Frame the Blog Header Image. ~ The Blog Doctor.
Loading...

Frame the Blog Header Image.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

The Image you load in the Blog Header serves as a branding image for your blog. It is hence important that it should be loaded correctly and positioned properly at the top of your blog. Viewers will recall your blog better if you have a striking blog header image at the top.


Recently many bloggers had complained about their header images shrinking. Blogger has introduced a fix which resizes every image after upload and centers it at the top of the blog.


Framing the Blog Header Image gives a striking result like this :



In this post we will see how to frame your blog header image by modifying the code in the CSS part of the template...........




THE BOX MODEL


To understand the framing technique it is essential to understand how the web page is divided into elements. These elements are like boxes each nested within the other. The innermost box has the content which we upload. See picture below :




What you type in your blog or whatever you upload like images or videos comes to lie within the innemost CONTENT box. This box has a PADDING and a BORDER. Outside the box is the MARGIN area which separates it from the adjoining element.


The width, color and size of each of these areas is described in the CSS part of the template at the top. The blog header image part of your blog is made up of (See Picture below) :


:

1. The Header-wrapper (black).

2. The Header (red).

3. The Header-Inner (silver).

4. The Header Image (yellow with green border)

5. The Image Itself.

These are four boxes which are nested within each other. The innermost box contains the Image.






MODIFYING THE TEMPLATE


To modify the header image you have to alter the code within the template. For this login at Blogger.com and click on 'Layout' link on Dashboard. The Page Elements subtab will open. Click on the Edit Html subtab of Template tab at the top. First backup template to PC by clicking the Download Full Template link on the Edit Html subtab. Now if any error occurs you can reload original template from backup.



Next in the Template code box scroll down to this code :

/* Header
-----------------------------------------------
*/

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

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
...........

#header img {
margin-left: auto;
margin-right: auto;
}


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}


The above code is for the Minima Template. Your code may differ slightly depending on which template you are using. The first step is to get rid of the original borders for the header. In the header-wrapper and the header section modify the following line :

border: 1px solid $bordercolor;

Change "1px" in the above line to "0px" and save the template.



YELLOW BORDER


To add a yellow border a la National Geographic Magazine modify the header image code to look like this :

#header img {
border: 2px solid #000000;
padding:15px;
background:gold;
margin-$startSide: auto;
margin-$endSide: auto;
}

Save Template. This will look like the picture below :





MULTIPLE FRAMES


To give multiple frames to your image use the following code :

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:750px;
border: 10px solid #000000;
margin:0 auto 10px;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
border: 10px solid #FFD700;
text-align: center;
color:$pagetitlecolor;
}

............

#header img {
border: 30px solid #008b8b;
padding:5px;
background: #4f4835;
margin-$startSide: auto;
margin-$endSide: auto;
}


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Preview and save template. This will look like this :


Note that the width line in the outer-wrapper and the header-wrapper has been increased from the original 660px to accomodate the increase in padding.



THREE BORDERS


To have three borders use this code :


#header img {
border: 20px solid #ffd700;
padding:5px;
background: #4f4835;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
border: 5px solid #000;
text-align: center;
color:$pagetitlecolor;
}

This will show up like this :

The image has a 20px yellow border with a blackish background. The header has a black border.


To get the hex number of colors you can use Color Picker a free software from Iconnico.com



Experiment by increasing the padding and width parameters in the code above. Use Preview button to see effects like this :






15 comments:

Rhonda said...

Hey, I like your site so much I'd like to blogroll you; also, I've started adding avatars that are "blogs of note" and would like to add that too. Lemmeno if this is a problem. Nice post too, BTW!

Vin said...

Rhonda,

Not a problem! Do go ahead! :)

someone said...

Got a ? I added a html widget to my header. The border goes around the original header and the html widget. How can I make the border go around the original header only and not around the html widget? Thanks.

Vin said...

Someone,

First delete the border round the header-wrapper and the header using same method as shown in above post.

Then add the border line to the header-inner like below :

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
border:1px solid $bordercolor;
}

Preview and save template.

someone said...

Thanks! Worked great!

someone said...

Another ? Is there a way to add an additional border inside the inner border that looks exactly like the inner border? Thanks.

Vin said...

Someone,

If you can add a div container anywhere you can put a border on it.

someone said...

Sorry, I don't understand. I assume you're talking about widget templates, but I've not dabbled with that part of the html yet. Will you explain further? Thanks.

Vin said...

Someone,

See the post above. Code starting like this : #header-wrapper...

defines a rectangle 'div'/container in the web page which is executed by this code in the 'body' of the page :

<div id='header-wrapper'>

.....

</div>

If you add a border line code to the #header-wrapper you get a border on that container in the web page.

someone said...

Yes. Thank you. I have done that. I was wondering if I could add another border inside that one, or make the border a double border.

Vin said...

Someone,

Add the word 'double' in the code for the border line for that container. For example :

#header {
border:1px double $bordercolor;
}

main image said...

Instead of a full (wrap-around) 1 px border, I just want a single line (1 px) at the bottom of my header.

How to do this?

Thanks,

Tommy

Vin said...

Main Image,

Instead of :

#header {
margin:0 20px 10px;
border:1px solid #ccc;
}

Use this code :

#header {
margin:0 20px 10px;
border-bottom:1px solid #ccc;
}

Kristen said...

How would I add a decorative, scrolly-type border around the header image, or something prettier than dotted, straight line, etc.? I'm assuming it would come from an image, but what would the css code look like for such a thing?

Vin said...

Kristen,

The easiest method would be by adding it in an image editing program in the image itself and then uploading the new image to the header.

Image editing programs like Gimp and Irfanview are free. Just Google for them.

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.