Customizing the templates easily

>> Browse templatesMoney tips1 comments

To make customizing the templates easy for everybody (even without HTML background), I added some items in the HTML coding so that you can change the color and font properties of most of the important elements. Below are the things that you can change simply by going to the Layout > Template > Fonts and Colors section in the Dashboard. From there, simply choose any items that you want to change and pick a new color or font from the dashboard on its right.

Example: You can see in these two templates, Kleen and KleenGreen, that you can modify a lot simply by using the Fonts and Colors dashboard without tweaking the HTMLs.

In most of the templates, the link only changes color when your mouse hovers over it. I use the variable Hover Link Color to control the hovered link colors. But, before 22/5/2007, I used the variable Visited Link Color to control the Hovered Link Colors.

In some cases, the fonts or colors won't changed after you've changed them in the Layout page. That's because I've turned them off in the HTML code so that it doesn't affect the overall design. If you still want to change it, then you have to go into the HTML code.


Background Colors:

  1. Main Background Color
  2. Content Background Color
  3. Header Background Color
  4. Post Background Color (added 19/5/2007)
  5. Comment Background Color (added 20/5/2007)
  6. Sidebar1 Background Color (added 22/5/2007)
  7. Sidebar2 Background Color (added 22/5/2007)
Main Font Colors:
  1. Blog Title Color
  2. Blog Description Color
  3. Date Header Color
  4. Post Title Color
  5. Text Color
  6. Blog Quote Color
  7. Link Color
  8. Hover Link Color
Linkbar Text & Background Colors (the navigation bar in the header section):

The linkbar was added 7/5/2007, so any templates before this don't have linkbars.
  1. Linkbar Text Color
  2. Linkbar Hover Text Color
  3. Linkbar Background Color
  4. Linkbar Hover Background Color
Miscelaneous Font Colors:
  1. Sidebar Header Color
  2. Sidebar Text Color
  3. Sidebar Link Color
  4. Sidebar Hover Link Color
  5. Post-Footer Text Color (added 20/5/2007)
  6. Post-Footer Link Color (added 22/5/2007)
  7. Comment Text Color
  8. Footer Text Color
Post-footer is the text below a post (contains the author's name, time of posts, labels, and link to comments).

Font Properties (font type, size, bold, italic):
  1. Blog Title Font
  2. Blog Description Font
  3. Date Header Font
  4. Post Title Font
  5. Text Font
  6. Blog Quote Font
  7. Sidebar Header Font
  8. Sidebar Text Font
  9. Post-Footer Text Font (added 20/5/2007)
  10. Footer Text Font (added 22/5/2007)

1 comments:

nancypants January 19, 2008 3:27 pm  

I feel like this is a dumb question, but though I can figure it out easily in the blogger standard templates, I cannot figure out how to use a URL link for the main background colors in your templates. I don't know what I'm doing wrong.

I'm working on these templates for friends.

Thanks.
nancypantslady at gmail dot com