How Change Fonts And Colors Of Blogger Templates

How To Change Fonts And Colors Of Blogger Templates you are using.This is my 5 th post in my blogger design tutorial series,if you haven't started reading this series then you are not late,as my most important posts will be getting starting from tomorrow which will cover all blogger css codes to give it different looks and how to modify it with there meanings explained.

My last posts on blogger design series are below,if you havent checked them check for sure.
1)Xml Declaration Codes For Bloggers
2)Meta Tags For Blogger.
3)Change Title Tags For Blogger.

Now i will continue on how to change the fonts and colors of your blogger template.

First i request you to please create a new demo blog with any name in your blogger account and choose a minima template (First template in Template Lists By Google) as its layout to learn the tutorials.

Then got To Its Layout > Edit Html

Now you will see codes like these in your html :-

Click the image to View Large

/* Variable definitions
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">

Now in these codes all the colors of blogger like back ground color,title color,link color,text color,description color and many more mostly have been defined and most of the font types used in blogger too are defined.

Now actually this is the place to define the colors in blogger codes and has been made easy in to modify too by google,so google has defined mostly all colors used in blogger here,but nowadays we are using free professional blogger templates designed by various bloggers.So they usually define only some colors here according to there design and most are given while when they are writing codes for particular part like for header or sidebar,dont worry reading this just if you are regularly reading this series it will become all clear to you in end.

Now as i have shown you above codes,in them you can easily read and see the words like bgcolor,text color,link color defining background color of template,text color of template and link color of template.

Similarly all the below lines too,you can read and understand for which part it is defining the colors.If you wanna change any color from above what you have to do.Let me Explain,Just i am picking one line from above codes.

This is the line i took i.e 1st line from code:-

<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">

Now above line tells the background color of your blogger template.

How to change it ?

Just you have to change the red code in above line with your color code you want,as #ffffff is for white and #000000 is for black.If you want more color codes just visit here.

Now this way you can make changes to all colors and fonts defined in above codes.

Now one more way to change them in very easy way provided by blogger platform which will work for sure if you are using blogger default template and if you are using other free template then it is not sure it will work or not for all colors as it depends on the way designer designed his codes.

Just Go To Layout > Fonts And Colors.

You will see the option like these in the image below:-

Click the image to view Large

At the left you have window to select for which you want to change color or font,just select from there and from right select the color you want,with all colors shown and then save your changes.In this way you can easily change the color you want for many things in blogger layout.This is very useful.

But if you are not using default google template then you have to study codes as i explained at the start of my post above and find the color where it is defined for any part which you want to change and make a color code change there manually and save the codes.

I hope now you will be able to easily edit color and font codes for your blogger template.For any questions just leave your comments below.


Heather T said...

I'm trying to change the title font on my blog for blogger. Reading a lot of info just confuses me lol so is there any easier things to look for if all I want to do is change the font?

Anshul said...

@heather you can't do unless you are well aware of css bcz every template varies design and css.

Manisha Kumar said...

Hey Anshul,

Please tell me how can I have different colors for visited links in minima black layout. I have visited links in my sidebars as well as post footers but I want different colors for them.
Please help.


DJzoey said...

what if i want to change the variable background color to a background image. how do i change that code?

Anshul said...

@djozey Here it is.

thestitchfiddler said...

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
color: $sidebarcolor;

My background is black and the comment color is a charcoal (somewhat a dark gray). I would like blue or gold but do not know what to do with the
color: $sidebarcolor (does this mean the comment color is the same as the side bar color? and what does the $ sign stand for in HTML

Anshul said...

@thestitch its difficult to explain u but as this is declartion used by blogger to give colors as due to these declarations only u able to chnage colors in template designer.

Bonny said...

How do you change the font in variables, something is over riding it and I can't seem to change it.

/* Variable definitions

default="normal normal 78% 'Century Gothic',Trebuchet,Arial,Verdana,Sans-serif">


Post a Comment