Tuesday, February 24, 2009

Wider Header for Dots Template

The Dots (or the Dots Dark) template, which is a default Blogger template, has its Header widget inside the left sidebar. Since the Header widget carries the title and the sub title (or description) of a Blogger blog, this arrangement brings about a somewhat congested appearance. This tutorial will illustrate how this Header widget can be moved to the more usual, across-the-top placement.

First let’s take a look at the Before and After views of what we are going to do.

Before:


After:


As you can see, the After view has the blog title running across the blog, instead of being stuck at the left sidebar.

(Note: Please backup your template before trying out this modification)

Go to the Layout -> Edit HTML mode and first make sure that the ‘Expand Widget Templates’ option is NOT selected. Then apply the following steps.

1) Delete the background property in the #outer-wrapper CSS selector.

#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;

}

2) Delete the existing line “display:none;” in the #header-wrapper and add the following rules.

#header-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat bottom right;
width:700px;
height:90px;
margin:0 auto 10px;
}

For the Dark Dots template, change the URL as follows.

background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat bottom right;

3) Change the first padding value in the #main-wrapper to 10 px from 100 px

#main-wrapper {
width:450px;
float:$endSide;
padding:10px 0 20px;

}

4) Change the first padding value of #sidebar to 10 px from 40 px
#sidebar {
...
padding:10px 10px 15px;

}

5) Delete the existing <b:section> element for the header contained inside the sidebar-wrapper.

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>


<b:section class='sidebar' id='sidebar' preferred='yes'>


6) Copy the code shown below in red, in between the outer-wrapper and the crosscol-wrapper, to get the new header. (You will have to re-type your blog title after copying this code)

<div id='content-wrapper'>
<div id='header-wrapper'>
<b:section class='sidebar' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Save your template and now you should have your header going across the top of your blog.