The Real Blogger Status - Beta: CSS Rules

Monday, November 27, 2006

Using Background Images

Background images make the blog so much more colourful than plain old solid colour backgrounds. A background image

Is not clickable.
Shows up only where no foreground content is present.

(Note): This post has been migrated to (and improved in) The Real Blogger Status: Background Images In Your Blog.

Look at using a background image under the text title, for instance. Note that this is the opposite from replacing the text in the title with a picture. If you put a picture in the title, no background will be visible, unless you intentionally make the picture too small for the title space, or use a transparent .gif file for an image.

We do this using CSS rules. Look in the template for

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

Change that to

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:0px solid $bordercolor;
background: url(http://whatever.wherever.com/what.gif) no-repeat 0px 0px;
}

The CSS object "header-wrapper" is the Beta standard name for the screen area which will contain the text blog title and blog description. If you have, separately, tweaked your header, any of the above settings may differ. Just add the "background" rule.

If you have a Classic blog, your template may or may not use a CSS rule to define the header. It may or may not use a CSS object "header-wrapper". Be aware of the possibilities. You could, conceivably, have a <div> tag, with all of the rules defined there in the HTML.

<div style="width:660px; margin:0 auto 10px; border:0px solid $bordercolor;"> ... </div>

if so, change that to

<div style="width:660px; margin:0 auto 10px; border:0px solid $bordercolor;background: url(http://whatever.wherever.com/what.gif) no-repeat 0px 0px;"> ... </div>

You can apply a background image to any area in the blog, not just the header.

body {
...
background: url('whatever.wherever.com/what.gif');
...
}

With any large screen area, your image will probably be smaller than the area being covered. You'll probably not use "norepeat", so your background image gets reused, repeatedly, in a checkerboard pattern, over the entire area.

For more information, see the W3Schools tutorial: CSS Background

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;
}