Centering the Dots Header

In a previous post, we looked at how we can make the header widget of the Dots (and Dark Dots) template go across the blog. If you have a somewhat longer blog title, that tweak will allow you to have it across the blog rather than having it stuck inside the left sidebar.

In this post, we look at another simple tip that will center align the title and the description of such a widened header widget. All you have do is to add a single CSS rule to the #header-inner selector.

This change is illustrated in the code snippet below.

#header-inner {
text-align: center;
background-position: center;
margin-left: auto;
margin-right: auto;
}

Yes, that's all. Just add the line shown in red above and you will have the title and the sub title centered in the header.

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.

Related Posts

• Centering the Dots Header