Customizing Header to match your blog design...

This is pretty easy. I will explain what I have done to customize the header of this blog, so that you can apply the same to your blog...

Step 1 :

Went to Dashboard -> Layout -> Edit HTML

At the top searched for variable definitions and then for pagetitlecolor.

Searched for the value="#666666" under pagetitlecolor. (This is in case of minima template) Replaced it with value="#ffffff".

Blog Title Color in Header is now changed to White.

Step 2 :

Changed background color to #204063 instead of #fff in #header-wrapper { ... }

Step 3 :

Third and final step is to make necessary changes in .Header h1 { ... } as required.

In this blog's case I added the following code to .Header h1 { ... }

padding-top: 17px;
padding-right: 0;
padding-bottom: 17px;
padding-left: 84px;
background: #204063 url(http://www.blogblog.com/thisaway_blue/icon_header_left.gif) no-repeat 20px 20px;

Just save and enjoy the new cool look...

Customizing Outer Wrapper Colour...

This is extension to the previous post on "How add background to blog body".

Firstly I made a small modification in #outer-wrapper { ... }

I replaced

margin:0 auto;

with

margin-top:10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;

and then added the following code

background: #4386ce url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmk5YOATHtbyU2nAUYlfif8hxBwh-xCrv0uW4eijxofjxwIIuBAfR5Bh3_wJP9MZGG_ILahYP2ogYDCMfiVEusFITNgZ6ScVejfsxdRMF7LxVosEPSEHPYkgaBexa5jGpMBtYCacKXz4/s1600/bg_outer.gif) repeat-x left top;

Further you can change the border color to outer-wrapper background color to match your design.

Just save the template and enjoy the new look...

Add background image to blog body...

Adding a background image to your blog is very simple.

All that you need to have is the URL of a good background image. It is better to see the background as a whole rather than the image seperately. If you dont understand what i'm saying just see this background image. Can you believe that this is the image used as the background of this blog ? !

Coming to adding background image to blog body...

Replace

body {
background:$bgcolor ;

with

body {
background:$bgcolor url(paste your image URL here);
background-repeat: repeat;

Before saving this make sure that you add the following code between { and } braces of #header, #outer-wrapper, #main-wrapper, #sidebar-wrapper and #footer.

background:#fff;

This sets the background colour of Header,Outer,Main,Sidebar and Footer wrappers to white. Note that #fff is for white. Similarly you can change the colours of these wrappers individually as per your choice.

Just save your template and enjoy the new look with the new background...

Add borders to your blog...

Borders add look to your blog. There are many border styles. But my favourite is double border. You can add your own creativity in applying borders. How to add borders is explained below by using minima template.

Please note that the below mentioned dimensions would be perfect if the width of your blog has been tweaked according to our tutorial on how to increase blog width.

border:3px double $bordercolor;

Add the above code within the { and } of the following i.e. after { paste the above line anywhere before }.

That line is to be pasted within,

#header { ..... }
#outer-wrapper { ..... }
#main-wrapper { ..... }
#sidebar-wrapper { ..... }
#footer { ..... }

For better alignment use

border:5px double $bordercolor;
padding-left: 10px;
padding-right: 10px;

incase of #main-wrapper and #sidebar-wrapper.

How to increase blog width...

This is a common doubt among most of the bloggers who wish to modify their blog template by their own, instead of going for ready-made templates.

Before you modify your template, make sure that you are clear about the structure of your blog. Refer to this article on the structure of a standard blog if you are not sure and then come back to this page.

Assuming that you are now a bit familiar with the standard blog structure, I am starting the tutorial.

Step 1: Increasing the width of Header Wrapper

Most recommended size for header-wrapper is 980px. Having a header wrapper of this size will be useful while placing ads by google adsense or adbrite or any other agency. This will be explained later.

First search for #header-wrapper and there change the width to 980px. By default (in minima template) width is 660px, which is very less.

Step 2: Increasing the width of Outer Wrapper

Most recommended size for outer-wrapper is 980px. Having an outer wrapper of this size will be useful while placing ads by google adsense or adbrite or any other agency. This will be explained later.

First search for #outer-wrapper and there change the width to 980px. By default (in minima template) width is 660px, which is very less.

Step 3: Increasing the width of Main and Sidebar Wrappers

Most recommended size for main-wrapper is between 650-700px.

Lets have a main-wrapper with 700px and sidebar-wrapper with 210px.

First search for #main-wrapper and there change the width to 685px. By default (in minima template) width is 410px, which is also very less.

Then in contrast, search for #sidebar-wrapper and there change the width to 210px.By default (in minima template) width is 220px.

Step 4: Increasing the width of Footer

Most recommended size for footer is also 980px.First search for #footer and there change the width to 980px. By default (in minima template) width is 660px, which is very less.

Thats all...

Click Save Template button and preview your blog.

Now your blog fits perfectly in the standard 1024 x 768 resolution screen.

Structure of a Standard Blog...

Before making any changes to the template of your blog, you need to understand the basic design plan of blogger blogs.

Most of the standard templates contain,

Body - This contains complete blog as a whole

Within body, they have

Outer-wrapper - This is again divided into four parts which are explained below.

Header-wrapper - Blog title and description are placed here.

Main-wrapper - Usually posts are displayed here.

Sidebar-wrapper - Usually widgets and ads are displayed here.

Footer - Bottom-most part of the blog.



Yellow - Body
Violet - Outer-Wrapper
Red - Header-Wrapper
Pink - Mainbar-Wrapper
Blue - Sidebar-Wrapper
Green - Footer

Transformation of this blog illustrated...

This post shows you how "YC Blog Tips" looked in the past and all the steps involved in its transformation to present state.

Stage 1 :

This was the first look of this blog using Minima template.



Stage 2 :

Navigation Bar Hidden



Stage 3 :

Added Labels to Sidebar



Stage 4 :

Increased Width of the Blog



Stage 5 :

Added Border to the Blog



Stage 6 :

Added Background Image to Blog Body



Stage 7 :

Customized the Outer-wrapper and Borders



Stage 8 :

Customized Header