Add Header to Dots Template.

The Dots Template is the only one of two in the Blogger Collection which does not have a header at the top. It has a header placed at the top of the sidebar. The other one is the Simple II Template which is the last in the choices list. Here I have added a header at the top and removed the original one at the top of the sidebar.......

First login to Dashboard and click on Layouts. This will open the Page Elements tab. Click on the Pick New Template subtab at the top. The template choices page opens and select the Dots template. See the picture below where I have shown the various divisions in the template :
Click on Image to enlarge it

From the image you can see that there is no header at the top. There are only two columns - the sidebar and the posts column. The header "Money for Blogs" is located at the top of the sidebar.


To add a header at the top go to Template---->Edit Html---->First Backup the template using the Download Full Template link. Then scroll down in Edit Template text box till you come to :

#header-wrapper {
display: none;
}

Delete this code as it is responsible for the no header. Save Template. In the same place add this code :

/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
background:#ffffff;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Save Template. It may give error message about variable definitions being declared. In that case add the below code in the Variable Definition section at the top of the template :

<Variable name="bordercolor" description="Text Color" type="color"
default="#333" value="#333333">

<Variable name="textcolora" description="Text Color" type="color"
default="#333" value="#333333">

Save Template. Now to add the header widget code in the body of the template scroll down in Edit Template text box till you coe to this code line :

<div id='outer-wrapper'><div id='wrap2'>

Add the following code immediately after the above line :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3'
showaddelement='yes'>
<b:widget id='Header1' locked='false' title='XXXXXXXXXXX (Header)'
type='Header'/>
</b:section></div>

Save Template.



If you want to delete the header at the top of the sidebar go to Edit Html subtab of Template tab and scroll down till you come to this code :

<b:widget id='Header1' locked='false' title='XXXXXXXX (Header)' type='Header'/>

Delete this code and save Template. See the new header in the picture below :

Technorati Tags:blog header, blogger hacks, header, template, dots template