Sunday, February 14, 2010

Customizing Header to match your blog design...


This is pretty easy. I will explain what I have done to customize the header of this blog, so that you can apply the same to your blog...

Step 1 :

Went to Dashboard -> Layout -> Edit HTML

At the top searched for variable definitions and then for pagetitlecolor.

Searched for the value="#666666" under pagetitlecolor. (This is in case of minima template) Replaced it with value="#ffffff".

Blog Title Color in Header is now changed to White.

Step 2 :

Changed background color to #204063 instead of #fff in #header-wrapper { ... }

Step 3 :

Third and final step is to make necessary changes in .Header h1 { ... } as required.

In this blog's case I added the following code to .Header h1 { ... }

padding-top: 17px;
padding-right: 0;
padding-bottom: 17px;
padding-left: 84px;
background: #204063 url(http://www.blogblog.com/thisaway_blue/icon_header_left.gif) no-repeat 20px 20px;


Just save and enjoy the new cool look...

0 comments:

Post a Comment