In an earlier post I showed you the trick as to how to create a full width footer in Atahualpa keeping 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 theme options without changing any file of the theme.
The Code
/* This below code an update for the article. A GENERIC CODE to fit any layout. */
</tr></tbody></table></div></div>
<div id="wrapper"><div id="container">
<table cellspacing="0" cellpadding="0" border="0" id="layout">
<colgroup>
<?php if ( $left_col == "on" ) { ?><col /><?php } ?>
<?php if ( $left_col2 == "on" ) { ?><col /><?php } ?>
<col />
<?php if ( $right_col2 == "on" ) { ?><col /><?php } ?>
<?php if ( $right_col == "on" ) { ?><col /><?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.
</tr></tbody></table></div></div> <div id="wrapper"><div id="container"> <table cellspacing="0" cellpadding="0" border="0" id="layout"> <colgroup> <col> <col> <col> </colgroup> <tbody><tr><td colspan="3"></td>
Where to insert the code
Login to your wordpress website. Then from your dashboard goto
Appearance > Atahualpa theme options > Style & edit Header Area
Add above HTML code into Configure Header Area section.
Note: Add the above code Below everything (to the bottom of all other codes) in Configure Header Area section.
Save the changes made.
Styling the code
After inserting the above code if you refresh your website you will notice that there is no change to the layout. Well to make your header full width and a narrow content area there are few more adjustments that we need to do.
Step 1: Adjust the width of header to 100% of the screen
TO do this go to Appearance > Atahualpa theme options > Style & Configure Layout
change the value of Layout WIDTH and type to 100%
Step 2: Make the content width to a Fixed narrower width
TO do this go to Atahualpa theme options > Add HTML/CSS insert
Add the following CSS in the CSS insert section
div.wrapbody{
width:980px !important;
}
P.S. – !important is important in the above code. I have kept the width to 980px. You can have a value to match your layout.
How to match the code to your column layout
The above code is an example of how to create full width header for a 3 column default Atahualpa layout [ Left sidebar – Content Area – Right Sidebar ].
Here is the name and position of the sidebars. Its should also be noted that they should appear in the correct series.
colone => left sidebar
colone-inner => left inner sidebar
coltwo => the center area where the posts go
colthree-inner => right inner sidebar
colthree => right sidebar
Example 1:
So suppose that your site layout is say [content area – right inner sidebar – right sidebar ] then your code should be
</tr></tbody></table></div></div> <div id="wrapper"><div id="container"> <table cellspacing="0" cellpadding="0" border="0" id="layout"> <colgroup> <col> <col> <col> </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.
</tr></tbody></table></div></div> <div id="wrapper"><div id="container"> <table cellspacing="0" cellpadding="0" border="0" id="layout"> <colgroup> <col> <col> <col> <col> </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) ]
</tr></tbody></table></div></div> <div id="wrapper"><div id="container"> <table cellspacing="0" cellpadding="0" border="0" id="layout"> <colgroup> <col> <col> <col> <col> <col> </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 Skins that you can download for free.
Do you like this article?
