Frame the Blog Header Image. ~ Easy HTML Tricks for Blogging

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 :