Welcome to The Real Blogger Status - Beta. Please note the warnings (as of 6/13: 0 active), and the alerts (as of 1/10/2007: 5 active).

Please be aware of the naming variances in this blog. You will find various references to "Classic" / "Old Template 2006" Blogger, and to "Beta" / "New Template 2006" Blogger.

Wednesday, September 06, 2006

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)?

3 comments:

Singpolyma said...

Or... you could just edit the header widget in the 'Edit HTML' tab ;)

Chuck said...

DOHH! Such a simple solution.

Except - that won't work - there are limitations on the Blog Title field.
1) The title field is limited in length, so you put the code into the description. But
2) The title field cannot be blank, either.
3) So you put some code into the title, and some more into the description. But that looks tacky.

Do you perchance have an example, to show what you had in mind?

Kara and Nickolai said...

thank you thank you thank you!! i was messing with this for hours and it was driving me nuts. but i got it with your instructions. :)