Fixed Footer’s

Been looking at how the footer and header interacts with the rest of the code within WordPress.  I have wanted to figure out a way to keep my footer always showing and use it to display some imaging that I want to show.

I got this idea from my sister in law who found it at zengarden.

First off, my site is based on the Twenty Ten theme.

It’s a pretty easy fix, you have to go into your footer.php file and move the comment:

</div><!– #wrapper –>

Move it up from the bottom of the footer and place it right between the comments:

</div><!– #main –>

<div id=”footer” role=”contentinfo”>

So you have this:

</div><!– #main –>
</div><!– #wrapper –>
<div id=”footer” role=”contentinfo”>

From here, it’s just all playing around with CSS.

The basis thing is to go into your main footer CSS and make the position fixed and the bottom=0.  From there it’s just common sense CSS styling.  Depends what you want to do.  I am working on a cityscape graphic that will run the full width of the monitor right on the bottom.  I have a temporary image there until I finish with the final graphic.

One note to add.  I had to add a div in here to help the main div area have the room needed to clear the footer.  So, whatever height you make your footer, you need to add that height into the “clearbottom” div.

Here is what I added to the code:

</div><!– #main –>
</div><!– #wrapper –>
<!– adds the length at bottom of page to clear the footer –>
<div id=”clearbottom”></div>
<div id=”footer” role=”contentinfo”>

 


Leave a Reply