(+84) 463.28.7979

Full width footer in Atahualpa


First of all a hats off for Bytesforall for designing such a marvelous theme Atahualpa for WordPress. Its has got more than 260 options to play with and you can customize almost anything in this theme. Now coming to the point. After receiving quiet a few emails regarding how I managed to get a full width footer in Atahualpa keeping the content area narrower.  One question was common in all those emails that I received as to whether I altered the source code of the theme or I did it using the options available. Yes, I did changed the source code but later on realized that it was not at all required. I will tell you how to get a full width footer without changing the source code of the theme.

Adding HTML in the footer section

Login to your wordpress website. Then from your dashboard goto

Appearance > Atahualpa theme options > Style & edit Footer

atostyle

Add the following HTML into Footer: Content

1
2
3
</td></tr></table></div></div>
<div id="divfooter"><div><table id="tablefooter">
<tr><td>

Save the changes

Note: Add the above HTML above everything (on the top) in Footer:Content section

Styling the Added Html

Goto Atahualpa theme options > Add HTML/CSS insert

Add the following CSS in the CSS insert section

1
2
3
4
5
6
7
8
9
10
div#divfooter {
background:none repeat scroll 0 0 #000000;
color:#FFFFFF;
padding:10px;
width:100%;
}
table#tablefooter {
margin:auto;
}

Save the changes

Now refresh your website and see the magic happening. You will have full width footer with all your footer content in it. The above CSS is just for an example and you can modify it to match your site. If you still have problems or require further information then leave a comment. Here are few of my free Atahualpa Skins that 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>