Blogger FAQ

Question:

I have just started my first blog and really need some help with the template!!

I really don't know anything about the css, but what I want to do is to change the default banner of the Minima Template, to a graphic that I've designed in photoshop.

How do I do this????
I know this is really basic, but I need the help!

Answer:

The header is just a box on the page. It's style attributes are defined by CSS such as:


Minima CSS=

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}

This CSS sets the width, margins and places a one pixel border around the header. One way of adding your image would be to make it the background of the header by adding this CSS:

background: url(http://the address of your image.jpg)
no-repeat;

So now you would have;

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background: url(http://the address of your image.jpg)
no-repeat;
}

The following HTML code directs the location on the page where the header is displayed and what items are contained inside the header:

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

Any Item placed between the opening division tag and the closing division tag will display inside the header. For example the Blog Title and Discription are inside the header in a standard minima template. By changing the above code to the code below you are removing the Title and Description and replacing it with a image:

<div id="header">
<img src="http://image address.gif" width="size" height="size" alt="description of image goes here">
</div>

The information in between quotations will have to be replaced with items specfic to your image, such as it's address, size and a short description of the image.

Not knowing what size your image is I can't tell you exactly but you might have to add a height to your header CSS if the image is cut off. Just add what ever the pixel height of your image is. For example if the image is 100 pixels height add the following which takes into account the margins:

height: 110px;

Hope this helps!

Technorati Tags: blogger faq