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.
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
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:
- 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!)
- 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. - 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;
} - 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). - 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:
- 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;
} - 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:
- 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> - 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.
No comments:
Post a Comment