How to customize your blogger templates fonts and colours

Today i will show you how to customize the fonts and colours of your template and I'm going to use the template from my previous tutorial but it will work for most templates you just need to find the id or the class name of the element you are trying to style.

Now if you are trying to change the font or colour of the sidebar titles through your blog dashboard it will also change the font and colour of the post date which is not what some of us want so to change that we can either hard code them in the CSS code or define variables for the font and colours i will show you both ways

by default all <h2></h2> tags inherit from this CSS code

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}


so that is where the sidebar and post date get their colour and font styles from but if you look in the template the post date has a class name applied to it

<h2 class='date-header'><data:post.dateHeader/></h2>

and it has its own set of CSS rules shown below

h2.date-header {
margin:1.5em 0 .5em;
}


you could just add more style rules for the post date for example

h2.date-header {
margin:1.5em 0 .5em;
color:#f00;
font:Arial, Verdana, Sans-serif;
font-size:13px;
font-weight:bold;
}


or just declare variables so you can change colours and fonts from within your blogger dashboard here's an example

h2.date-header {
margin:1.5em 0 .5em;
color:$postdatecolor;
font:$postdatefont;
}


in the example above I created 2 variables named postdatecolor and postdatefont to use them just define them at the top of your template like I've done in the screenshot below



once you have done that save your template and go to the fonts and colours tab you should see something like the following screenshot



now you can change fonts and colours for the post date from within your blogger dashboard you can also write CSS code for the sidebar titles like this

.sidebar h2 {
font-size:13px;
font-weight:bold;
background:#f3f3f3;
padding:3px;
}


so now you know how to customize the fonts and colours of your blog if this helps some of you who are trying to customize your template leave your comment and let me know thanks for reading