Add Picture to Left Header Title Blog

Sometimes we want to change our header looks, not many major changes only add a little sweetener an image in the top left corner as a logo or character of our blog.
To add an image to the left or right of the header with the title and description, you have to upload an image smaller than the width of your header.
Generally the width of the header can be found by looking at the CSS code for the outer-wrapper.
For fast page loading, i suggest an image not more than 300 px width and the height not more than 200 px, most 160 px height can match the header.
Go to Layout, sub tab Edit HTML and scroll down to : (backup your template first)

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

The above example outer-wrapper width is 990 px in a Minima template. So select an image which is about 200 px in width or less and upload it to your header. Choose to position it behind the title and Description. See the figure 1 on the right.

1). Image to the left
Find this code :

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

Change To :

#header-inner {
background-position: left;
Width:990px; ==> add width = header wrapper
Height:160px; ==> if your picture height 160 px
}


2). Title to the right
Find this code :

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Change To :

#header h1 {
width:790px; ==> add a new width
margin:0 5px 5px 200px; ==> add the last left margin
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

The 200 px is the left margin and you can increase this number to push title away from left margin. Use the Preview button to adjust the position.
Note : on this example, i have used an image size W=200 px X H=160 px
Also remember the Margin rule :
Top, Right, Bottom, Left Margin in px.

3). Push the description away from the left margin
Find this code :

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:990px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Change To :

#header .description {
width:790px;
margin:0 5px 5px 200px;
padding:0 20px 5px;
max-width:990px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Use the Preview button to adjust the exact position of your description. See the picture below of the new header with a sample logo/picture to the left and the title and description to the right as i do in my blog :





4). For Normal image upload, but you found a little difficult problem to center the image and the image show on the left.
You will find the image code lies within a special div :

<div id='header-inner'>

Try to add this code to fix the problem :

#header-inner {
width:770px;
margin:0 auto;
}

Note : Also to center this image in a Stretch template (like the Sand Dollar Template or the Stretch Denim Template) you have to add this code to the CSS Part of the template.
Don't forget to read my last post : TOC Google Ajax Api

Happy Week End and Have Fun.
Did you enjoy your V.D. ?