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.



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;
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 {
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'/>

<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 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'/>

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

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