Customising The Header #2

Replacing the boring text title in your blog is easy enough. Making it look really pretty is easy - when you know how.

Removing the header element in a Beta blog is not too hard. Replacing the template entry, or adding a new header page element, isn't terribly difficult. But some templates require just a bit more work. if you want to do a good job.

---

I started out with a plain text header, the default for Minima, in a pair of ugly boxes.

---

I replaced the default blog header with an HTML page element.

<a href="http://bloggerstatusforrealbeta.blogspot.com/index.html"><img border="0" src="http://photos1.blogger.com/blogger2/560/527000594325287/
1600/RBS%20Header%201.gif"/></a>
<p align="center">What Blogger won't tell you.</p>

The graphic content is nicer, but still the ugly boxes.

---

I then had to edit the template HTML.

I found the code for the Blog Title.

<div id="header">
<a name="Top"></a>
<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<p id="description"><$BlogDescription$></p>
</div>

That shows that I have 3 containers - "blog-title", "description", and "header" - to examine. Two containers = "blog-title" and "description" - are peers, and together make one box. That one box is enclosed by "header", which is the second box. And there are the 2 ugly boxes.

The rules, for each container, are in the Header section of the blog header code.

/* Header
----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}
}
@media handheld {
#header {
width:90%;
}
}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#666;
text-decoration:none;
}
#blog-title a:hover {
color:#c60;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:700px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
letter-spacing:.2em;
color:#999;
}

There are a total of 5 relevant rules, in my case.

#header

border:1px solid #ccc;

#blog-title

border:1px solid #eee;

border-width:1px 1px 0;

#description

border:1px solid #eee;

border-width:0 1px 1px;

I changed all "1px" to "0px".

/* Header
----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:0px solid #ccc;
}
}
@media handheld {
#header {
width:90%;
}
}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:0px solid #eee;
border-width:0px 0px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
letter-spacing:.2em;
}
#blog-title a {
color:#666;
text-decoration:none;
}
#blog-title a:hover {
color:#c60;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:0px solid #eee;
border-width:0 0px 0px;
max-width:700px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
letter-spacing:.2em;
color:#999;
}

And no more ugly boxes.

Want more ideas? How about using background images (aka wallpaper)?