(+84) 463.28.7979

Full width header but narrower content area in Atahualpa


In an earlier post I showed you the trick as to how to create a full width footer in Atahualpakeeping the content area narrow. Here is how we can get a full with header area keeping the content area narrower. Of course we are going to do this only using the Atahualpa themeoptions without changing any file of the theme.

The Code

/* This below code an update for the article. A  GENERIC  CODE to fit any layout. */

1
2
3
4
5
6
7
8
9
10
11
</tr></tbody></table></div></div>
<div id="wrapper" class="wrapbody"><div id="container">
<table cellspacing="0" cellpadding="0" border="0" id="layout">
<colgroup>
<?php if ( $left_col == "on" ) { ?><col class="colone" /><?php } ?>
<?php if ( $left_col2 == "on" ) { ?><col class="colone-inner" /><?php } ?>
<col class="coltwo" />
<?php if ( $right_col2 == "on" ) { ?><col class="colthree-inner" /><?php } ?>
<?php if ( $right_col == "on" ) { ?><col class="colthree" /><?php } ?>
</colgroup>
<tbody><tr><td colspan="<?php echo $cols; ?>"></td>

/**************************************************************************/

This is an example code for layout [Left sidebar – Content area – Right sidebar]. Read below how to match the code to fit your layout.

1
2
3
4
5
6
7
8
9
</tr></tbody></table></div></div>
<div id="wrapper" class="wrapbody"><div id="container">
<table cellspacing="0" cellpadding="0" border="0" id="layout">
<colgroup>
<col class="colone">
<col class="coltwo">
<col class="colthree">
</colgroup>
<tbody><tr><td colspan="3"></td>

Click image to Enlarge

1
2
3
4
5
6
7
8
9
</tr></tbody></table></div></div>
<div id="wrapper" class="wrapbody"><div id="container">
<table cellspacing="0" cellpadding="0" border="0" id="layout">
<colgroup>
<col class="coltwo">
<col class="colthree-inner">
<col class="colthree">
</colgroup>
<tbody><tr><td colspan="3"></td>

Example 2:

[left sidebar(1) – content area(2) – right inner sidebar(3) – right sidebar(4) ]

Note since there are 4 columns including the content area, the last line of the code <td colspan = “4″>, we need to change the value of colspan to 4.

1
2
3
4
5
6
7
8
9
10
</tr></tbody></table></div></div>
<div id="wrapper" class="wrapbody"><div id="container">
<table cellspacing="0" cellpadding="0" border="0" id="layout">
<colgroup>
<col class="colone">
<col class="coltwo">
<col class="colthree-inner">
<col class="colthree">
</colgroup>
<tbody><tr><td colspan="4"></td>

Example 3: All 4 sidebars

[left sidebar(1)- left inner sidebar(2) - content area(3) – right inner sidebar(4) – right sidebar(5) ]

1
2
3
4
5
6
7
8
9
10
11
</tr></tbody></table></div></div>
<div id="wrapper" class="wrapbody"><div id="container">
<table cellspacing="0" cellpadding="0" border="0" id="layout">
<colgroup>
<col class="colone">
<col class="colone-inner">
<col class="coltwo">
<col class="colthree-inner">
<col class="colthree">
</colgroup>
<tbody><tr><td colspan="5"></td>

If you have any problems or you have difficulty in understanding how to do it then feel free to leave a comment. I will try to help you within a day. Here are few of my free Atahualpa Skinsthat you can download for free.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>