How to Style Your Widgetized Footer

by R.J. on June 21, 2009

A lot of people have asked me to set up a widgetized footer using the great tutorial at FergusWeb.net.

You can find a full thesis theme-ready copy and paste answer here as well.

It’s a great tutorial, and I give full credit to the author for it so please don’t think I had anything to do with writing it just because I’m writing about it. Since the author doesn’t mention how to style the widgetized footer, I thought I’d mention how I styled it to get it to work for me and also mention how you might need to adjust it to fit your needs.

Once you’ve added the tutorial’s php to your custom_functions.php, go ahead and add the following code to your custom.css:

#footer div.col {
float:left;
margin:5px 3px 0 0;
padding-left:10px;
text-align:left;
width:29em;
}

That’s it! The three “footer widgets” should be centered, more or less, in your footer now instead of stacked on top of each other. Please make sure to change the width: 29em; in order to accurately fit your site design and layout.

Comments on this entry are closed.

Previous post: How to Add a Navigation Bar in Your Footer

Next post: Thesis Tutorial Compilation – The Most Useful Thesis Tutorials on the Web