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.

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.

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

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.