PDA

View Full Version : All titles - unique CSS for all of my site?


Rico79
Apr-07-2009, 05:54 PM
Is there a way I can use on CSS that would define my font & color that I want to use for the entire site? I find that I need bits and pieces of code for each tiny section (ie. gallery title, image caption, navigation, page numbers, etc.)? I'd like to use my Calibri font and same color as navbar all throughout my site www.eyerickphoto.com.

Given that the words (font/color) are common, the search results are vague and wasn't able to find anyting precise.

Thank you,
Heyrick

jfriend
Apr-07-2009, 06:41 PM
First of all, fonts are a property of a local computer system, not something you can supply in your web page. You can specify a preference for what local fonts will be used in your web page, but you can't supply a font that isn't actually present on the local computer. I believe the Calibri only comes with Window Vista and is not present by default on earlier versions of Windows or on the Mac. You can specify a preference for the Calibri font if it is installed, but you should also specify safer choices that are known to be available as a backup.

Second, you can change the font and color globally, but if any theme you are using also specifies the font or color, then your global definition will be overriden by the theme and you will have to then override the more specific theme declaration in order to make it work everywhere. CSS works like this. The more specific a CSS target declaration is, the higher a priority that CSS rule gets if there is more than one rule that could apply to the object in the page. So a global rule like:

body {color:#F0E68C}

will work everywhere if no other CSS rules that specify color are present. But if there's a rule like:

.title {color:#999999;}

then, that rule is more "specific" than the previous one so it will take precedence. Themes tend to do lots of customizing so it makes it harder to change something globally in a theme without using multiple rules to override each thing the theme was doing with color.

For example, I notice you have a theme that uses green colors in some places. There are probably 10-20 places that green is used differently. If you wanted to override all of those, you'd have to find each place that theme is specifying green and override each one with your own CSS rule. It would be much better to switch to a theme that doesn't use green as your base theme because it won't have so many things to override.

You can set the default font and text color with this CSS:

body, body.tempClass, body.tempClass2 {font-family: calibri,verdana,tahoma,helvetica,arial,sans-serif; color:#F0E68C;}

Notice, I've specified multiple san-serif fonts (some of which are known to be present on older versions of Windows and on Macs) in case Calibri is not installed on the local system.

Beyond that, it's theme-specific how you override other things that the theme is setting to a different color. You'd have to find those one by one and write new CSS rules to set them to what you want or switch to a theme that isn't doing that.

You can try this and then see which colors or fonts are not being picked up by these new default rules.

J Allen
Apr-07-2009, 08:32 PM
Here's a kind of an interesting article about "web fonts", I always see a lot of questions about wanting to use specific fonts, wouldn't something like this be nice:

http://www.alistapart.com/articles/cssatten

jfriend
Apr-07-2009, 09:04 PM
Here's a kind of an interesting article about "web fonts", I always see a lot of questions about wanting to use specific fonts, wouldn't something like this be nice:

http://www.alistapart.com/articles/cssatten

This a useful site for seeing what fonts come by default with various platforms and seeing test examples for the fonts on your system:

http://www.typetester.org/

Rico79
Apr-08-2009, 05:42 AM
to both of you - thank you for your detailed answers.

As I'm using the SmugMug Gradiant style, I think I am bound to some specific style (ie. green titles) which I cannot locate anywhere in my code. I'm sure I'm not looking at the right places.

The font code you gave me above worked, however I see that all category, gallery, navigation, etc all stay the same. Only a few areas get updated to the Calibri and color specified.

body, body.tempClass, body.tempClass2 {font-family: calibri,verdana,tahoma,helvetica,arial,sans-serif; color:#F0E68C;}

I assume that I need to change my own theme in the control panel and specify the exact style I want. The problem is that, I really like the SmugMug gradiant (for its sleek background) and don't know how to re-create it through my own theme. :dunno

-h.
www.eyerickphoto.com (http://www.eyerickphoto.com)

This a useful site for seeing what fonts come by default with various platforms and seeing test examples for the fonts on your system:

http://www.typetester.org/