Five days, five new features: Adding the superfooter on Day 3

Significant changes to Red Pill’s layout today as I added a superfooter to bottom of the blog design. In my opinion, superfooters are an underrated design element.  So many blogs just load up on their sidebars that it ends up taking focus away from the content within a post. On some blogs – tags, recent comments, and a blogroll just aren’t that imporant to your readers.  But that doesn’t mean those features don’t have a role.  It’s just a question of where do they play that role.  Superfooters help fix address this by providing real estate out of the way of the blog post.

So here’s how I added the 3 column superfooter onto Red Pill.  All it takes us some clever CSS that blends up ID and CLASS selectors.

Here’s how I did it.

First, define a ID selector for the area in which the 3 columns will go

div #superfooter-columns {
        margin: 0 auto;
        width: 730px;
        font-size: 1.1em;   
        width: 730px;
        clear:both;
        text-align:left;
        z-index:1;
    }

 

Then, add a class that will be used on each column

#superfooter-columns .footercol {
    float:left;
    overflow:hidden;
    position:relative;
}

Then, add some css for each column – A, B, and C

#superfooter-columns #footercol_a {
    margin: 0;
    width:229px;
    padding: 10px 2.5px 30px 10px;
}

#superfooter-columns #footercol_b {
    margin: 0;
    width:229px;
    padding: 10px 2.5px 30px 10px;
}

#superfooter-columns #footercol_c {
    margin: 0;
    width:229px;
    padding: 10px 2.5px 30px 10px;
}

 

Adjust the widths and padding appropriately for your site layout.  Once you have that basic skeleton in place you can start filling the divs in your XHTML with the content you want.  I’ll talk about the features I stuck into the superfooter in tomorrow’s post


This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

One Trackback

  1. [...] I added the superfooter to Red Pill.  And truth be told the new blog features I’m going to talk about today were [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

Choose the Blue Pill

Upcoming Events