Blogger Templates Layouts Tutorials | Web Page Design Tutorials Home

How to Customize Blogger Header

Header of Blogger

The Header Div Layer is residued inside the Header Wrapper Layer. In other words, the Header Wrapper layer holds the Header layer inside.

Here's the HTML codes of the Header:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Pay attention to the margin:

Margin of Header: There are a 5 pixels margin around the four sides.

Blogger Header with Dreamweaver

Also pay attention to the border:

Border of Header: 1 pixel width. This is the inner black border of the Header.

You can also remove it if you set the width to zero.

Blogger Header with Dreamweaver

By setting the width of border of #header to zero, the inner border will be removed as shown below:

Blogger Header with Dreamweaver

Conclusion:

Now, let's review what we learnt before:

The two grey border lines of the Blogger Header are setting in:

The outer border is set in the Header Wrapper.

#header-wrapper (line 88 -92)

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

The inner border is set in the Header.

#header ID Selector (line 100 - 105)

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

The two border lines can be removed by setting the borders of #header-wrapper and #header to zero, as shown below:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

 

#header {
margin: 5px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Okay! we already knew the styles of Header Wrapper and Header of Blogger. In the next tutorial, we will customize the Blogger.

blogger layout tutorials