Skip to main content

Customising The Page 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 New Blogger (2007) 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.


Note that the above instructions are for a classic template. With a layout template, it's slightly easier.

/* Header
-----------------------------------------------
*/
#header-wrapper {
margin:0 2% 10px;
border:0px solid #cccccc;
}
#header {
margin: 5px;
border: 0px solid #cccccc;
text-align: center;
color:#666666;
}

Just 2 rules - "header-wrapper" and "header". Change both borders to "0px".


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

>> Top

Comments

Je9Jeanine said…
Everyone says that works.. I have read 8 help blogs at least that claim this works... but I did exactly that and I still have a border... looking for a better answer.
http://snappy63.blogspot.com/
Jeanine

Popular posts from this blog

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.

Leave Comments Here

Like any blogger, I appreciate polite comments, when they are relevant to the blog, and posted to the relevant article in the right blog. If you want to ask me a question thats relevant to blogging, but you can't find the right post to start with (I haven't written about everything blogger related, yet, nor the way things are going I don't expect to either), ask your questions here, or leave an entry in my guestbook.

As noted above, please note my commenting policy. If you post a comment to this post, I will probably treat it as a "Contact Me" post. If you have an issue that's relevant to any technical issue in the blog, please leave a comment on the specific post, not here. This post is for general comments, and for non posted contact to me.

If the form below does not work for you, check your third party cookies setting!

For actual technical issues, note that peer support in Blogger Help Forum: Something Is Broken, or Nitecruzr Dot Net - Blogging is, almos…

What's The URL Of My Blog?

We see the plea for help, periodicallyI need the URL of my blog, so I can give it to my friends. Help!Who's buried in Grant's Tomb, after all?No Chuck, be polite.OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".