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

Answers to most frequent "how-to" questions on Suffusion. You cannot post to this forum, only the administrator can. You can check here for some of the most common questions and answers.
Locked
User avatar
Connie
Posts: 1169
Joined: 10 Nov 2009, 04:53
Contact:

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

Post by Connie » 29 Dec 2009, 02:47

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":
Image

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:
Image

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":
Image

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:
Image

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

Cheers,Connie

sayontan
Site Admin
Posts: 10210
Joined: 15 Sep 2009, 16:39
Location: Houston, Texas
Contact:

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

Post by sayontan » 29 Dec 2009, 02:57

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

sayontan
Site Admin
Posts: 10210
Joined: 15 Sep 2009, 16:39
Location: Houston, Texas
Contact:

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

Post by sayontan » 29 Dec 2009, 03:04

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.

Locked