Read this, if you want to change font or colors ...

[Connie]

I notice that there a lot of questions, mostly in the "support requests-section" how to change colors and fonts.

Mostly these people have not run a search here in the forum as these questions are answered many times already.
I feel the need to explain this once and forever ;=)

1. Be clear which section / which part you want to change or refine
2. Check if you can do that with the existent options
3. if not you are a candidate for "Custom CSS, JavaScript & RSS" - section which you will find in the "Suffusion Theme Options/Blog Features"

Here you can enter any CSS-definition which you want and this will not be overwritten by upcoming updates.

But how to identify which styles are to change? For this there is a good tool at hand (I mentioned this already in some postings):

a) Use the Firefox-Browser
b) Install the Webdeveloper-Extension which you can download from here: http://chrispederick.com/work/web-developer/
c) after installing it., choose to activate the "style-information":


d) then go the part of the page which you want to identify: move the cursor over the element you want to identify:
it will get a red border:


e) when you identified the desired element and moved the cursor over that element, you will get the necessary style-information in the "webdeveloper bar":


in my example it is the image in the post.

f) Now you have the necessary information and can enter the relevant CSS-code in the Custom CSS, JavaScript & RSS" - section:
The following image shows the definitions for the image in a post:


I hope this small guide will help and Sayontan must not answer the same questions too often!

Cheers,Connie

[sayontan]

Very helpful, Connie! Thanks! I am moving this to the "How-To" section.

[sayontan]

I would like to add, there is another very popular Firefox extension called Firebug, using which you can right-click on a page element and say "Inspect Element". That will give the entire style information applicable to that element right away.

I use both, Firebug and Web-Developer extensions. For the most part Firebug is quicker in terms of the number of clicks. For certain things like complete stylesheets and validation I use the Web-Developer extension.

There is a similar feature in Chrome, where you can directly right click on something and say "Inspect Element". If you are predominantly an IE user, you can download IE Debugbar.