55 Styling the header and footer sections (Blogger template design series)
January 29, 2008 /

If you've been following the Blogger Template Design series so far, you'll have seen the demonstration template looking something like this. In the series so far, we've created the layout (canvas) for our template, then changed the margins and padding for the main elements. But there is no distinguishing style yet for this template.

So in this installment, we'll look at some quick customization options for the blog's header and footer to pretty things up a little bit, and provide a stylistic base for future customizations so we have a better idea of the overall design we want to work towards.

I've always considered the blog header and footer to stylistically "frame" the main content of the blog, and feel it's important to pay much attention to these areas when designing a custom template.

Broadly speaking, there are two major styles for the header and footer sections of blog templates:

Where the width spans only the width of the content, like this:

Where the width spans the entire window, like this:

In this tutorial, I'll explain how both styles can be achieved so you can choose which style you'd prefer for your own custom template.

Changing the width of the header and footer (for both styles)

For both of the example styles displayed above, we will need to change the dimensions for the header and footer sections, which ensures the content spans the entire width of the blog.

Here's how to do this:

  1. Go to Template>Edit HTML in your Blogger dashboard. Do not expand the widget templates (it is unnecessary for these customizations and can in fact make things more difficult for you!)
  2. Find the width of your outer-wrapper. In the demonstration template, this is 950px, as can be seen in the following section of code:
    #outer-wrapper {
    border: 1px solid #000000;
    width: 950px;
    margin:0 auto;
    padding: 10px;
    text-align:$startSide;
    font: $bodyfont;
    }
    We need to know this width so we can adjust the header and footer wrappers to be the same width.
  3. Change the width of the header-wrapper. Currently the header wrapper in the demonstration template is only 660px wide. We need to change this to match the width of the outer-wrapper. So find this section in your template code:
    #header-wrapper {
    width: 660px;
    border: 1px solid #000000;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }
    And change the line highlighted in red to match the width of your outer-wrapper instead. In the demonstration template, the adjustment will look like this:
    #header-wrapper {
    width: 950px;
    border: 1px solid #000000;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }
  4. Change the width of the footer. In similarity to the header-wrapper, the footer measures only 660px in width, so we need to increase this width. So find this section of code in your blog template:
    #footer {
    border: 1px solid #000000;
    width: 660px;
    margin:0 auto;
    padding-top:15px;
    line-height: 1.6em;
    text-transform:uppercase;
    letter-spacing:.1em;
    text-align: center;
    }
    And once again change the line in red to match the width of your outer-wrapper (eg: width: 950px).
  5. Make the style for the footer consistent! If we take a look at the template code which calls the footer section, we can see that there is a div called "footer-wrapper" which is not features in the <b:skin> portion of our template:
    <div id='footer-wrapper'> <b:section class='footer' id='footer'> <b:widget id='Text1' locked='false' title='' type='Text'/> </b:section> </div>
    To ensure this doesn't cause problems later on in the customization process, we need to change the style code in the template.

    So find the footer styling in your blog template again, and add the phrase highlighted in red:
    #footer-wrapper {
    border: 1px solid #000000;
    width: 950px;
    margin:0 auto;
    padding-top:15px;
    line-height: 1.6em;
    text-transform:uppercase;
    letter-spacing:.1em;
    text-align: center;
    }

Now if you preview your template, you will notice that the header and footer sections have increased in width and span the whole of the blog.

Making the header and footer sections span only the width of the blog

If you only want the header and footer sections to be as wide as the main blog content, you need make no further extensive customizations to these sections!

If you prefer, you can add a background color to the header and footer wrappers to make these stand out and frame the main content, as I showed in the examples above.

To do this, you only need to add one line of code to both the header-wrapper and footer-wrapper sections of your styling code:

background: #000000;
The hex value "#000000" is black, though you can just as easily substitute this value for the color of your choice.

To add your background color to the header-section, paste the line of code just below this phrase in your template code:

#header-wrapper {
To add this to the footer section, paste the line of code just below this phrase instead:
#footer-wrapper {

After adding a black background to the header and footer wrappers in my demonstration template, the end result looks like this:

This is the style of framing I have used for the Blogger Buster template, which also allowed me to use a background image for the header.

Making the header and footer sections span the width of the browser window

This style of framing the content can look very striking, as it creates bands of color to the top and bottom sections of the blog, segregating the main content from the framing elements and drawing more attention to the blog posts and sidebar sections.

However, it is much more difficult to achieve!

To achieve this, we must take the header and footer sections outside the outer-wrapper, then wrap these in new div elements which span the entire browser window.

It is quite complicated to explain, so I will take you through the process step-by-step:

  1. Add some styling code to your <b:skin> section. This is the simplest part of the process. Simply copy the code below and paste this just before the closing </b:skin> tag in your template:
    #outer-header {
    background: #000000;
    }
    #outer-footer {
    background: #000000;
    }
  2. Take the header outside the outer-wrapper. Find this section ion your blog's template code:
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Blogger template Design Series (Header)' type='Header'/>
    </b:section>
    </div>
    Now delete this entire section!

    Now we can paste a modified version of this code outside the outer-wrapper, so the header will span the width of your browser window.

    So find this line in your blog template:

    <div id='outer-wrapper'>
    And paste the following section of code immedietly before it:
    <div id='outer-header'>
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
    </b:section>
    </div>
    </div>
    <div id='outer-wrapper'>
    Now if you preview your template, the header section should look something like this:

  3. Take the footer section outside the outer-wrapper. We're going to use the same method to ensure the footer section moves outside the outer-wrapper, so that it will not be constrained in width.

    So find this section in your blog's HTML code, and delete the entire section:
    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>
    Next, find this line in your blog template:
    </div></div> <!-- end outer-wrapper -->
    And paste the following section of code immediately after this line:
    </div></div> <!-- end outer-wrapper -->
    <div id='outer-footer'>
    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'>
    <b:widget id='Text1' locked='false' title='' type='Text'/>
    </b:section>
    </div>
    </div>
  4. At this stage, your template may seem a little maladjusted. This is because the style for the outer-wrapper doesn't feature the required code to prevent it from running into the new footer section.

    This is easily solved by adding the required code to the style for the outer-wrapper in the <b:skin> section of the template.

    Find the outer-wrapper section in the <b:skin> portion of your blog template, and add the lines highlighted in red:
    #outer-wrapper {
    border: 1px solid #000000;
    width: 950px;
    margin:0 auto 5px;
    text-align:$startSide;
    font: $bodyfont;
    word-wrap: break-word;
    overflow: hidden;
    }
    Now if you preview your template, all of the elements should fit neatly into place, like this:

If you prefer, you can change the background color of the header and footer sections by substituting #000000 for your chosen hex value in the style for the outer-header and outer-footer sections (use the Color Calculator in the Tools section to find the hex value for your chosen color).

By now, I hope I have provided enough information for you to format your own header and footer sections to match the style of your overall template!

I know that some of the customizations described here are a little difficult to implement, so if you do have any problems, feel free to leave a comment or send an email and I'll do my best to advise for your own particular template.

Status of the demonstration template

For the demonstration template used to exemplify the tutorials in this series, I have chosen to span the header and footer backgrounds across the whole browser window. You can view the progress of this demonstration blog at any time, and also find links to all previous installments in this series.

Coming soon...

In the next main installment, I will begin to explain how to add interactivity to your header section. Also, I will be posting some resources of inspiration for blog style and design in the next few days to give you some ideas of the header images, icons and color schemes you may like to use in your own templates, which will be helpful to refer to when designing your own schemes.

As always, please feel free to leave your comments and opinions below. I really do appreciate your feedback on this series, especially regarding tutorials like this which are more difficult to explain.

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

55 comments:

  1. Great stuff! How can I remove some of the padding I have in my header as you see here?:
    http://www.duelingtampons.com

    ReplyDelete
  2. Dear Amanda,

    I do not know how to discribe it... but may be I can say it this way... You Have Done A Great Job... You had help me and many others who are like me (newbies)... As for the rest of readers. Do not forget to subscribe... to this blog...

    Best regards,
    Pak Maeh

    ReplyDelete
  3. Hello Matt,

    there are several elements of padding in your header which I spotted when viewing the source code for your page. If you can send me the template code for your blog, I can experiment in a test blog to see which adjustments work best for you. You can email me the code to amanda [at] bloggerbuster [dot] com if this would be useful to you.

    For Pak Maeh,

    Thank you so much for your support. I am glad to be of helo to fellow bloggers and hope you continue to enjoy this blog :)

    Best wishes,

    Amanda

    ReplyDelete
  4. Hi Amanda,

    your posts are very helpful!
    Now I've a small problem, though.
    I took the footer section outside the outer-wrapper as you described and combined this with the 'three columns in the footer section' style you explained in an earlier post.
    Now I want to change the background of the column headers (add a background photo like I did for the date-header) but only in the footer section and not in the side bar.

    Your help would be very much appreciated.

    My test blog can be found here

    All the best,
    Sabine

    ReplyDelete
  5. Tried this method of modifying my header, but it did the opposite of what I wanted it to do. First off, it moved my custom header image to the far left of the page. What I want it to do is extend the full width of the "header background", i.e. the width of the posting section of the blog. One snag I ran into was that the default code in my template (I'm using the "blue" version of the Denim template as well) is different than the one you have above. Here's what mine has:

    #outer-wrapper {
    font: $bodyFont;
    }

    /* Header
    ----------------------------------------------- */
    #header-wrapper {
    margin: 0;
    padding: 0;
    background-color: $headerCornersColor;
    text-align: $startSide;
    }

    #header {
    width: 760px;
    margin: 0 auto;
    background-color: $headerBgColor;
    border: 1px solid $headerBgColor;
    color: $headerTextColor;
    padding: 0;
    font: $headerFont;
    }

    It appears to be missing some of the format options. I tried simply changing the header with itself, which is all I could figure out to do. Any help you could offer would be appreciated. You'd think this would be cake.

    Thanks so much for doing what you do!

    ReplyDelete
  6. I have a problem with my footer when i m add gtalk in my footer it extands from the footer image you can see example here

    http://netbks.blogspot.com/

    plzz help me.....

    ReplyDelete
  7. Can't figure out how to get my header image to center. It looks fine in 800x600, but it's way to the left in 1034x768.

    ReplyDelete
  8. your tutorials are a great help!
    i like the width to be 950px just as you have demonstrated. However, when i do so, it creates a 'space' between the post column and the side widget, at the same time it pushes my chat widget box in between the post column and the side widget. any idea how i can prevent this? thanks!

    ReplyDelete
  9. Hi your tutorial worked great. I now have the three sections at the footer. Now I need to add the background image. How do I do that? please let me know.

    ReplyDelete
  10. works nicely for my blog although I still can't figure out how to increase the height of the header and footer! thanks, I really love your tutorials.

    ReplyDelete
  11. SO am I interpreting correctly that causing the header to span the window causes header images to be unusable? I'm wondering if I can combine this with your multi-section header hack and still use an image. I'm thinking if I add elements I can center them... Think that will work?

    ReplyDelete
  12. Hi Amanda,

    Thank you for this great tutorial! I have been trying to dothis for so long and I finally was able to find the info. here. You always help me so much with my blog.

    I was hoping you might be able to help me with something please, I would like to know if there is a way to remove the outer header padding only and not affect the padding of the widgets, I would really appreciate any help you could give.

    Sincerely,
    Jonni
    :)

    ReplyDelete
  13. Hi Amanda,
    As always, great tutorial, I have implemented many of your edits into my Rounders 3 blogger template, the best so far is the Automatic Post Summaries, but now I wish to divide my footer into 2 columns, there are lots of 3 column edits available, but none for 2, can you help please?

    ReplyDelete
  14. Hi Amanda, I was referred by 9mb forums (Jenie) because I'm new to blogging. I have some questions to ask about styling the template.

    Is the tutorial also applicable for wordpress? because I can't find the Template>Edit HTML thing. I hope you don't mind.

    ReplyDelete
  15. thankx muito bom !!!
    a tempos queria fazer estes ajustes...
    ¨¨O¨¨¨¨O¨¨

    ReplyDelete
  16. great stuff as usual. Your tutorials are professional, easy to understand and flipping useful.

    Thanks again for your excellent work!

    ReplyDelete
  17. Hello,

    this is a great article. But unfortunately I was unable to find the answer to my question. I would like to put html links into my footer. Do you think is this possible? And if yes, do you know the way how to do it?

    I would appreciate any help.

    ReplyDelete
  18. I cant find this code in my blogger where is it
    div id=footer-wrapper
    b:section class='footer' id='footer'
    div
    http://rafayhackingarticles.blogspot.com

    ReplyDelete
  19. i tried this but even i did not trak the footer can u help me please
    http://livedonya.blogspot.com

    ReplyDelete
  20. Hi
    Your posts are very much helpful for starters like me. I am using 4 column template with footer dividing into 3 columns. I like to change the footer header background and colors. can you please guide me on this?
    Thanks a ton.

    ReplyDelete
  21. Hey i can't find this: #footer on the template. I dont get how to change it, everything looks different in mine than yours when i go to HTML thingi near thetemplate.

    www.istebrak.blogspot.com

    I want to line up my blog header the way this guy did: www.bao22.blogspot.com

    html is so congusing....

    can you email me back on email? i honestly dont know how to navigate through this thing.

    straw.berry.lemon@hotmail.com

    ReplyDelete
  22. Hi,

    I am trying to remove the '}' that appears in my my footer of my blog. Could you please tell me how to remove it. I did Google it but could not find any answer.

    My blog URL is http://hkarthi.blogspot.com/

    ReplyDelete
  23. I don't know how but it actually works, you are a genius, nobody can fix programming programs like you congratulations.

    ReplyDelete
  24. Hi!!!
    #outer-wrapper {
    is missing in my blog template. please help me

    www.links4pk.blogspot.comm

    ReplyDelete
  25. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  26. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

    ReplyDelete
  27. It's is good read this tutorial.
    I am also making one custom footer design.
    Guys can check on http://www.amrikvirdi.com/
    Best Regards,
    Amrik Virdi

    ReplyDelete
  28. Thanks for the tutorial. I didn't know how to do it and I have seen some site with headers and footers and I wanted to implement it on my blog.

    ReplyDelete
  29. Thanks for this info! I was looking for something that guide me to how change the template of my blog.

    ReplyDelete
  30. We hope that this initiative will give rise to a network of individuals from all over the world who will become an active core of a new and exciting association.

    ReplyDelete
  31. Hi Pal. .
    I Am a Blogger and it was under construction due to my exams.But now i have set it up and it is customized to instinct.i wish to have your opinion about the customization of my Blog Http://BlogNpcTricks.In

    i will be thankfull for your comments and it would help me out in this Big ocean of Blogging

    ReplyDelete
  32. Hi Pals,
    If Anybody still facing difficulties or confusion in altering width of your blog,This may help you
    http://www.blognpctricks.in/2011/12/change-width-of-headerfooterany-section.html

    ReplyDelete
  33. see their own weight bailey uggs on sale step onto the Bi side birds cheap ugg bailey button the most objectionable word is this threat uggs classic mini then uggs classic short we are a service area tall uggs for sale and slowly knock on the words: three thousand yuan discount for the "myth of currency" transactions like me. As for the apology thing uggs bailey buttons even under fire ugg bailey button cheap I promise you all the requirements. Please accept the transaction. Three thousand yuan is playing in your bank card

    ReplyDelete
  34. thanks for this post, beneficial for web designer

    ReplyDelete
  35. Thanks to share with us the information. I wish you good luck!

    ReplyDelete
  36. Stylish Sections of Header and Footer...!!

    ReplyDelete
  37. good post... visit my blog http://www.innovatebloggers.com/

    ReplyDelete
  38. --Want someone to help me out with my blog
    http://www.bizipro.blogspot.com

    ReplyDelete
  39. Gud post bro :) I have done it ,,!!! Hoping more from u ..
    www.cytricks.com

    ReplyDelete
  40. I had no trouble navigating through all the tabs as well as related info. The site ended up being truly simple to access.
    Intraday Nifty Future Tips
    Share market tips
    Share and Earn .

    ReplyDelete
  41. I’m satisfied that you simply shared this useful information with us.
    Commodity tips
    Stock Market
    Share Market
    Nse Tips
    Bse Tips

    ReplyDelete
  42. I would like to make my header extend across by blog but I am using an image for a header. Will this tutorial work for that? You can see my blog at http://www.remarkablehome.net Thank you so much!

    ReplyDelete
  43. There are some problem in several elements headline.

    ReplyDelete
  44. This comment has been removed by the author.

    ReplyDelete
  45. watchdogsfullpcgame.blogspot.co.uk/ pc game full with crack and gta5 pc full with crack http://gta5pcdownloadwithcrackupdate.blogspot.co.uk/

    ReplyDelete
  46. Please Visit Ma Blog http://gallianmachi.blogspot.com/

    ReplyDelete
  47. Unfortunately, this code does not appear in the blogger templates so it can't be removed. Any suggestions???????

    div id='header-wrapper'



    ReplyDelete
  48. Dear why does background code only changes and hightlights the text with color not the whole footer wrapper
    http://www.bluedock.co.nr

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy