Fixing font problem

[ChancyRat]

How can I fix the font on almost all of my site, especially the home page?

I only noticed the problem after I created a contact page, where I really like the font that was generated via wufoo, except I choose Georgia on that site, which is also the font on my site overall, so I thought the contact page would match the home page.

Contact: http://www.joinrats.com/gallery/11432042_t7xYg
Home: www.joinrats.com (and any other gallery you visit)

The contact page font is "lighter" and easier in appearance, all the rest of the site is dark and heavy looking. I don't know what those qualities are to describe them technically, much less where or how to fix the site font.

Thank you.

[jfriend]

You can start by adding this CSS:


body, a, .boxBottom a, .boxBottom a:hover, .boxBottom a:visited, .boxBottom a:active,
a:active, #albumDescription a, #albumDescription a:hover, #albumDescription a:active,
#displayPhoto a, #displayPhoto a:hover, #displayPhoto a:visited,
#displayPhoto a:active {font-family: georgia !important;}

Your theme is setting the font to trebuchet so you have to override it everywhere the theme sets it. This is a start, but may not get everything. You'll just have to see what else you find that needs changing.

[ChancyRat]

You can start by adding this CSS:


body, a, .boxBottom a, .boxBottom a:hover, .boxBottom a:visited, .boxBottom a:active,
a:active, #albumDescription a, #albumDescription a:hover, #albumDescription a:active,
#displayPhoto a, #displayPhoto a:hover, #displayPhoto a:visited,
#displayPhoto a:active {font-family: georgia !important;}

Your theme is setting the font to trebuchet so you have to override it everywhere the theme sets it. This is a start, but may not get everything. You'll just have to see what else you find that needs changing.

Thanks, but okay, I made a mistake. I actually do want trebuchet, so I have added the code as you requested, but changed georgia to trebuchet. (Although it can stay georgia on the contact page.)

The problem now, it seems, is the intense darkness of the font everywhere, compared to the contact page. What is that quality and how do I do to set that?

EDIT - Ah, I spoke too quickly. I see great improvement, I think everywhere except on the home page.

[jfriend]

Thanks, but okay, I made a mistake. I actually do want trebuchet, so I have added the code as you requested, but changed georgia to trebuchet. (Although it can stay georgia on the contact page.)

The problem now, it seems, is the intense darkness of the font everywhere, compared to the contact page. What is that quality and how do I do to set that?

EDIT - Ah, I spoke too quickly. I see great improvement, I think everywhere except on the home page. Go to your bio on the homepage and take out all the <font face="xxx"> tags and their matching </font> tags and also remove all the <strong> and </strong> tags.

Then, add the part in red to your CSS:

body.homepage, body, a, .boxBottom a, .boxBottom a:hover, .boxBottom a:visited, .boxBottom a:active,
a:active, #albumDescription a, #albumDescription a:hover, #albumDescription a:active,
#displayPhoto a, #displayPhoto a:hover, #displayPhoto a:visited,
#displayPhoto a:active {font-family: trebuchet !important;}

[ChancyRat]

Go to your bio on the homepage and take out all the <font face="xxx"> tags and their matching </font> tags and also remove all the <strong> and </strong> tags.

Then, add the part in red to your CSS:

body.homepage, body, a, .boxBottom a, .boxBottom a:hover, .boxBottom a:visited, .boxBottom a:active,
a:active, #albumDescription a, #albumDescription a:hover, #albumDescription a:active,
#displayPhoto a, #displayPhoto a:hover, #displayPhoto a:visited,
#displayPhoto a:active {font-family: trebuchet !important;}

There was only one forced font for the title, it is gone. But I left the color codes, was that ok? They are the ones that make some of the text blue.

I re-copied the whole section into CSS, and the first time I tried to save it, I got the red warning. Was that a space at the end of one of the lines? I removed it and tried again, and it "took". But attached is a snapshot of what I see on FF. The Navbar sizes are identical on both pages, but the homepage font size is tiny and very dark. How can I make the homepage type the same size and have the sophistication of the other page? Other page link (no font control in the description) is here:

http://www.joinrats.com/EarningTrust/SocializingJerry/11367366_8ohB4

http://www.joinrats.com/photos/804638224_sTcJY-X3.jpg

[jfriend]

There was only one forced font for the title, it is gone. But I left the color codes, was that ok? They are the ones that make some of the text blue.

I re-copied the whole section into CSS, and the first time I tried to save it, I got the red warning. Was that a space at the end of one of the lines? I removed it and tried again, and it "took". But attached is a snapshot of what I see on FF. The Navbar sizes are identical on both pages, but the homepage font size is tiny and very dark. How can I make the homepage type the same size and have the sophistication of the other page? Other page link (no font control in the description) is here:

http://www.joinrats.com/EarningTrust/SocializingJerry/11367366_8ohB4

I'm not sure what you're asking about with this other screen shot. for your home page, take out the one <h3> tag, take out the size="6" part from the one <font> tags and then add this CSS at the end of your CSS:

#userBio {font-size: 18px; line-height: 100%;}

You can then tweak the numbers in that CSS to your liking.

As you can hopefully see, it's way simpler and less error-prone to control formatting using CSS than embedded tags in your HTML.

[ChancyRat]

I'm not sure what you're asking about with this other screen shot. for your home page, take out the one <h3> tag, take out the size="6" part from the one <font> tags and then add this CSS at the end of your CSS:

#userBio {font-size: 18px; line-height: 100%;}

You can then tweak the numbers in that CSS to your liking.

As you can hopefully see, it's way simpler and less error-prone to control formatting using CSS than embedded tags in your HTML.

Yes, but I believe you helped me follow the CSS road to come to that painful place that there is no program that will tell you the code for a particular format, while HTML, one can work with it so much easier. :cry

Yes, you got it! But - the font is Times Roman...
At least, in IE I see trebuchet (copied text to Word and saw the font there), in FF, Word shows Times Roman? I have refreshed several times.

I see my belief that everything was Georgia is not the least of my disorientations. The texts on most of the gallery page descriptions alternate between Times Roman and Trebuchet.

Until I quit being dizzy over this, could I force the home page to trebuchet on all browsers for the moment, but please help me understand how to force it to times roman?

Is my objection to the "quality" of the type in the image I inserted earlier, because the font there is Trebuchet? Rather than some font quality I can force? This is a snapshot of the font I see on IE:

[jfriend]

Yes, but I believe you helped me follow the CSS road to come to that painful place that there is no program that will tell you the code for a particular format, while HTML, one can work with it so much easier. :cry

Yes, you got it! But - the font is Times Roman...
At least, in IE I see trebuchet (copied text to Word and saw the font there), in FF, Word shows Times Roman? I have refreshed several times.

I see my belief that everything was Georgia is not the least of my disorientations. The texts on most of the gallery page descriptions alternate between Times Roman and Trebuchet.

Until I quit being dizzy over this, could I force the home page to trebuchet on all browsers for the moment, but please help me understand how to force it to times roman?

Is my objection to the "quality" of the type in the image I inserted earlier, because the font there is Trebuchet? Rather than some font quality I can force? This is a snapshot of the font I see on IE: First off, please put a link to your site in your dgrin signature so it's in every post and I don't have to go find it everytime I try to help.

Second, when you removed the <h3> tag, you left the open angle bracket and that is screwing things up. Please clean that up.

Third, you have a lot of text on your homepage. Please be very specific about what exact text on the homepage in what browser is not in Trebuchet and I can help diagnose the issue. And, when you tell me something isn't right, please be very specific about what you want it to look like. You included a screen shot in your previous posting (and screen shots can sometimes be very helpful), but I have no idea what you thought was wrong with that screen shot or what you wanted changed. Remember, I don't know what you want or what you wanted it to look like unless you tell me, very specifically.

[ChancyRat]

First off, please put a link to your site in your dgrin signature so it's in every post and I don't have to go find it everytime I try to help.

Second, when you removed the <h3> tag, you left the open angle bracket and that is screwing things up. Please clean that up.

Third, you have a lot of text on your homepage. Please be very specific about what exact text on the homepage in what browser is not in Trebuchet and I can help diagnose the issue. And, when you tell me something isn't right, please be very specific about what you want it to look like. You included a screen shot in your previous posting (and screen shots can sometimes be very helpful), but I have no idea what you thought was wrong with that screen shot or what you wanted changed. Remember, I don't know what you want or what you wanted it to look like unless you tell me, very specifically.

Yes, sorry - www.joinrats.com.
I have removed the <, thank you.
The entire page is in Times Roman:
- the first paragraphs under the title
- the site map
- the paragraphs under the site map

I lack the technical term for the quality of type I see on the Contact page:
http://www.joinrats.com/gallery/11432042_t7xYg
Is it grey? Something "finer" or "sophisticated".
I don't think it's that the font is TR because the homepage in FF is TR and that looks bad - solid/black-black-black.

Here is another snapshot of the 3 pages, left to right:
FF - Contact - TR but beautiful font coloration
FF - home - TR instead of Trebuchet, also thick and dark, very different from the contact page TR.
IE - home - Trebuchet but thick and dark also.

In addition to getting both browers the same, is it possible to have Trebuchet with the "grey"/sophisticated look? I'm SORRY I don't know the technical term for what I see in the font, to be more specific.

http://www.joinrats.com/photos/804705163_m8VuL-X3.jpg

[jfriend]

Yes, sorry - www.joinrats.com (http://www.joinrats.com).
I have removed the <, thank you.
The entire page is in Times Roman:
- the first paragraphs under the title
- the site map
- the paragraphs under the site map

I lack the technical term for the quality of type I see on the Contact page:
http://www.joinrats.com/gallery/11432042_t7xYg
Is it grey? Something "finer" or "sophisticated".
I don't think it's that the font is TR because the homepage in FF is TR and that looks bad - solid/black-black-black.

Here is another snapshot of the 3 pages, left to right:
FF - Contact - TR but beautiful font coloration
FF - home - TR instead of Trebuchet, also thick and dark, very different from the contact page TR.
IE - home - Trebuchet but thick and dark also.

In addition to getting both browers the same, is it possible to have Trebuchet with the "grey"/sophisticated look? I'm SORRY I don't know the technical term for what I see in the font, to be more specific.

This CSS should make the homepage text above your slideshow look exactly like the Contact page (except for the title which you are using a <font> tag on). I can't see how it looks in IE until you put the CSS in your page and remove the previous userBio CSS.

#userBio {font-size: 20.8px; line-height: 28.0667px; font-weight: 400; font-style: normal; font-family: Georgia; word-spacing: 0; color: #444444 !important;}

I am only concentrating on the text above your slideshow at the moment because it's best to work on one issue at a time. You have other HTML tags in play down below the slideshow that may be messing with the text (like <blockquote> and other <font> tags and <strong> tags, etc...). When you use those tags, you are at the mercy of how a browser decides to display those tags. If you use a <span class="myFormat1">some text</span>, then you can specify the format exactly using CSS and nothing is left to the browser to decide for you.

[ChancyRat]

This CSS should make the homepage text above your slideshow look exactly like the Contact page (except for the title which you are using a <font> tag on). I can't see how it looks in IE until you put the CSS in your page and remove the previous userBio CSS.

#userBio {font-size: 20.8px; line-height: 28.0667px; font-weight: 400; font-style: normal; font-family: Georgia; word-spacing: 0; color: #444444 !important;}

I am only concentrating on the text above your slideshow at the moment because it's best to work on one issue at a time. You have other HTML tags in play down below the slideshow that may be messing with the text (like <blockquote> and other <font> tags and <strong> tags, etc...). When you use those tags, you are at the mercy of how a browser decides to display those tags. If you use a <span class="myFormat1">some text</span>, then you can specify the format exactly using CSS and nothing is left to the browser to decide for you.

What exact code do I remove in the CSS? There are many instances of "userbio" that do things like center the slideshow. I should not be removing those, right? I don't see an equivalent section to the one you want me to insert.

[jfriend]

What exact code do I remove in the CSS? There are many instances of "userbio" that do things like center the slideshow. I should not be removing those, right? I don't see an equivalent section to the one you want me to insert. Get rid of these:


/* adds code to force line spacing on bio page to stay at single-spaced */
#userBio h3 {line-height: 1.2em;}

/* changes home page bio description text color to black and links to a nice blue */
#userBio {color: #000;}


#userBio {font-size: 18px; line-height: 100%;}

[ChancyRat]

Get rid of these:


/* adds code to force line spacing on bio page to stay at single-spaced */
#userBio h3 {line-height: 1.2em;}

/* changes home page bio description text color to black and links to a nice blue */
#userBio {color: #000;}


#userBio {font-size: 18px; line-height: 100%;}

Ok, done, and the new code added. I have reduced what I think is the font size which was 20, to 18. However the line spacing is a bit too wide. But! Now the font color has that nice sophisticated grey type color rather than harsh pounding black.

I don't mind for the moment that the title is hard black, I assume because of my HTML?

The font family, I changed to trebuchet, which reverted again to Times Roman (I think). I have put it back to Georgia while I await your instructions.

The first line of my CSS has georgia specified, and it's specified many other places whose importance I don't understand. Could this be contributing to the problem of Trebuchet not "taking" on FF? By the way, Trebuchet is now gone in IE, I believe it's now Georgia.

Is the nice sophisticated grey the font weight? I changed the 400 to 500 which looks a bit better (maybe).

Other than the font not changing to Trebuchet, the next/only problem I see is that all the links in the site map are now dark blue. In the prior version the header links were dark blue but the links under each header were the bad black.

Among the many things I have to thank you for, one I want to mention is for recommended Notepad++ on another thread. It's numerous options are gems.

[jfriend]

Ok, done, and the new code added. I have reduced what I think is the font size which was 20, to 18. However the line spacing is a bit too wide. But! Now the font color has that nice sophisticated grey type color rather than harsh pounding black.

I don't mind for the moment that the title is hard black, I assume because of my HTML?

The font family, I changed to trebuchet, which reverted again to Times Roman (I think). I have put it back to Georgia while I await your instructions.

The first line of my CSS has georgia specified, and it's specified many other places whose importance I don't understand. Could this be contributing to the problem of Trebuchet not "taking" on FF? By the way, Trebuchet is now gone in IE, I believe it's now Georgia.

Is the nice sophisticated grey the font weight? I changed the 400 to 500 which looks a bit better (maybe).

Other than the font not changing to Trebuchet, the next/only problem I see is that all the links in the site map are now dark blue. In the prior version the header links were dark blue but the links under each header were the bad black.

Among the many things I have to thank you for, one I want to mention is for recommended Notepad++ on another thread. It's numerous options are gems. Maybe you don't have the Trebuchet font on your system, but you do have the Georgia font. My system has something called Trebuchet MS. Why not just go with Georgia if you like it? Do you realize that you can specify multiple fonts and the browser will pick the first one that it finds on the system like the part shown in red here:

#userBio {font-size: 18.8px; line-height: 28.0667px; font-weight: 500; font-style: normal; font-family: Georgia, Trebuchet MS, Arial; word-spacing: 0; color: #444444 !important;}

Yes, your title is hard black because of the <font color="#000"> tag in your own HTML. You can change that as desired.

The line height is in this userBio line we're working on so feel free to change it. I just set it to what you said you liked in the contact page, but if you've messed with the font-size, you will want to mess with the line-height parameter too.

If you're trying to use Trebuchet, then change this line of your CSS to this:

body.homepage, body, a, .boxBottom a, .boxBottom a:hover, .boxBottom a:visited,.boxBottom a:active,
a:active, #albumDescription a, #albumDescription a:hover, #albumDescription a:active,
#displayPhoto a, #displayPhoto a:hover, #displayPhoto a:visited,
#displayPhoto a:active {font-family: trebuchet ms, georgia, arial !important;}

For the links in your sitemap, you stated several facts, but didn't say what color you want them to be.

[ChancyRat]

Maybe you don't have the Trebuchet font on your system, but you do have the Georgia font. My system has something called Trebuchet MS. Why not just go with Georgia if you like it? Do you realize that you can specify multiple fonts and the browser will pick the first one that it finds on the system like the part shown in red here:

#userBio {font-size: 18.8px; line-height: 28.0667px; font-weight: 500; font-style: normal; font-family: Georgia, Trebuchet MS, Arial; word-spacing: 0; color: #444444 !important;}

Yes, your title is hard black because of the <font color="#000"> tag in your own HTML. You can change that as desired.

The line height is in this userBio line we're working on so feel free to change it. I just set it to what you said you liked in the contact page, but if you've messed with the font-size, you will want to mess with the line-height parameter too.

If you're trying to use Trebuchet, then change this line of your CSS to this:

body.homepage, body, a, .boxBottom a, .boxBottom a:hover, .boxBottom a:visited,.boxBottom a:active,
a:active, #albumDescription a, #albumDescription a:hover, #albumDescription a:active,
#displayPhoto a, #displayPhoto a:hover, #displayPhoto a:visited,
#displayPhoto a:active {font-family: trebuchet ms, georgia, arial !important;}

For the links in your sitemap, you stated several facts, but didn't say what color you want them to be.

The sitemap links (not the header ones) should be the same color as the text you have already fixed, the first paragraphs, the kind-of-black, kind-of-grey. The header links which are dark blue can stay that way.

What is the significance of line height having so many decimals? "28.0667"

I have put in the new code to put trebuchet first, and yes my system does have it, the MS version, but here is what the page now looks like on both FF and IE - and what I see is that the dark blue links ARE Trebuchet MS, but the regular black/grey narrative is either Georgia or Times Roman. How can the page split up that way?

Also, am I seeing the dark blue links are not font weight 500? They are the heavy dark solid?

[jfriend]

The sitemap links (not the header ones) should be the same color as the text you have already fixed, the first paragraphs, the kind-of-black, kind-of-grey. The header links which are dark blue can stay that way.

What is the significance of line height having so many decimals? "28.0667"

I have put in the new code to put trebuchet first, and yes my system does have it, the MS version, but here is what the page now looks like on both FF and IE - and what I see is that the dark blue links ARE Trebuchet MS, but the regular black/grey narrative is either Georgia or Times Roman. How can the page split up that way? Change the userBio line to this and add the new line below (there is no significance to the fact that I now broke the previous single line up into multiple lines - it was just getting too long to manage as a single line):

#userBio, #userBio a {
font-size: 18.8px !important;
line-height: 28.0667px !important;
font-weight: 500 !important;
font-style: normal !important;
font-family: trebuchet ms, georgia, arial !important;
word-spacing: 0 !important;
color: #444444 !important;
}
#userBio a:hover {color: #FF0000 !important;}

You can then adjust the hover color if you want.

The decimal points in the line-height are just what the contact form was using. You don't need that level of accuracy and can use whole numbers.

The remaining blue color for the titles in the columns is coming from your own HTML which you control.

[ChancyRat]

Change the userBio line to this and add the new line below (there is no significance to the fact that I now broke the previous single line up into multiple lines - it was just getting too long to manage as a single line):

#userBio, #userBio a {
font-size: 18.8px !important;
line-height: 28.0667px !important;
font-weight: 500 !important;
font-style: normal !important;
font-family: trebuchet ms, georgia, arial !important;
word-spacing: 0 !important;
color: #444444 !important;
}
#userBio a:hover {color: #FF0000 !important;}

You can then adjust the hover color if you want.

The decimal points in the line-height are just what the contact form was using. You don't need that level of accuracy and can use whole numbers.

The remaining blue color for the titles in the columns is coming from your own HTML which you control.

I don't see where you established the color of the narrative text. I changed the weight to 600 to darken it just a bit, but the result was a heavy and thick grey, rather than remaining lightweight but darkening slightly. Is the color black? And the grey comes only from the font weight?

Your change resulted in the sitemap sub-links returning to hover-red. Yippee! However, can I revert the hover color in the rest of the narrative to the dark blue?

As for the black title, if I remove the header font sizing, how do I get it to be larger? Preferably larger than it is right now, even. I don't know how to do that with css.

I would like to ask a related question about link and hover colors that has been a long-time problem. You helped me get the sitemap page in place:
http://www.joinrats.com/gallery/8004335_ppoPx
but the sub-links have no color until one hovers over them, and then the color is unfortunately white. How can I change the hover color there to another color other than white? (I'm not sure which color I would choose yet.)

(Yes, the separate sitemap page would have hover colors, but the narrative on the home page would have default link colors and not change with hovering.)

--EDIT - I wrote very confusedly but have hopefully cleaned it up.

Thank you!

[jfriend]

I don't see where you established the color of the narrative text. I changed the weight to 600 to darken it just a bit, but the result was a heavy and thick grey, rather than remaining lightweight but darkening slightly. Is the color black? And the grey comes only from the font weight?

Your change resulted in the sitemap sub-links returning to dark blue! However, can I revert the hover color to link colors? How can I remove the hover color and return them to the dark blue, like the links in the sitemap?

As for the black title, if I remove the header font sizing, how do I get it to be larger? Preferably larger than it is right now, even. I don't know how to do that with css.

I would like to ask a related question about link and hover colors that has been a long-time problem. You helped me get the sitemap page in place:
http://www.joinrats.com/gallery/8004335_ppoPx
but the sub-links have no color until one hovers over them, and then the color is unfortunately white. How can I change the hover color there to another color other than white? (I'm not sure which color I would choose yet.)

(Yes, the separate sitemap page would have hover colors, but the sitemap on the home page would have default link colors and not change with hovering.)

Thank you!
The text color on the homepage comes from this line in red. If you want to know more about font-weight, then Google it. It's not the same as color.

#userBio, #userBio a {
font-size: 18.8px !important;
line-height: 28.0667px !important;
font-weight: 500 !important;
font-style: normal !important;
font-family: trebuchet ms, georgia, arial !important;
word-spacing: 0 !important;
color: #444444 !important;
}


The link hover colors in your homepage are controlled by this part of your CSS:

#userBio a:hover {color: #FF0000 !important;}


Your colors in the sitemap page are controlled by this part of your CSS. The a:hover colors are the color when the mouse is over the link:

/*
Change Banner Color in gallery 'Sitemap'
*/
.gallery_8004335 #my-banner,
.gallery_8004335 #my-banner a
{color: #5C3317 !important; }

/*style link colors in Sitemap*/
.gallery_8004335 #table a
{color:#5C3317 !important;}

/*Links with the mouse over them with Sitemap*/
.gallery_8004335 #table a:hover
{color:#FF0033 !important;}

[Mannequin012]

I've been trying to navigate through the forums but have been having a bit of trouble...

I've been trying to change the box titles from Smuggy Green to my own color...but it still has not changed. I have my theme set to 'default', ive tried looking over the code, but am still missing it.

Help?! :)

mannequin012.smugmug.com

thanks a lot

[ChancyRat]

I'm back from a difficult work week, so sorry to have disappeared.

Thanks for the info on the font color. However....


The link hover colors in your homepage are controlled by this part of your CSS:

#userBio a:hover {color: #FF0000 !important;}

Unfortunately, changing this code has not changed the hover color.

Your colors in the sitemap page are controlled by this part of your CSS. The a:hover colors are the color when the mouse is over the link:

/*
Change Banner Color in gallery 'Sitemap'
*/
.gallery_8004335 #my-banner,
.gallery_8004335 #my-banner a
{color: #5C3317 !important; }

/*style link colors in Sitemap*/
.gallery_8004335 #table a
{color:#5C3317 !important;}

/*Links with the mouse over them with Sitemap*/
.gallery_8004335 #table a:hover
{color:#FF0033 !important;}



Changing the hover color here also has not changed anything. I'm using #FF0033, but the page is still showing #DD0000. I have refreshed multiple times.

[jfriend]

I'm back from a difficult work week, so sorry to have disappeared.

Thanks for the info on the font color. However....



Unfortunately, changing this code has not changed the hover color.



Changing the hover color here also has not changed anything. I'm using #FF0033, but the page is still showing #DD0000. I have refreshed multiple times. Quite honestly, your CSS is such a mess with multiple CSS rules all competing for control of the exact same object that it is very difficult to advise you on changes and very difficult for you to change what you want to change. If I were you, I'd suggest taking all your CSS into a good text editor (I suggest the free Notepad++) and rearrange all your CSS into blocks of CSS each designed to modify a certain part of a page. And, put good comments around each block so you know what it's supposed to be. Then, remove all competing CSS rules so there's only one rule affecting any given part of your page.

If you change the last rule in your CSS to this:

#userBio table a:hover {color: #F000FF !important;}

it will change the hover color. It wasn't working right for two reasons. First, of all, you already have this in your CSS:

/*Links with the mouse over them with*/
#userBio table a:hover {color:#CD0000 !important;}
#userBio a:hover {color:#CD0000 !important;}

#userBio, #userBio a {
font-size: 18.8px !important;
line-height: 25px !important;
font-weight: 400 !important;
font-style: normal !important;
font-family: trebuchet ms, georgia, arial !important;
word-spacing: 0 !important;
color: #1F1F1A !important;
}
#userBio a:hover {color: #F0000FF !important;}

So, you're only making things worse if you add yet another rule trying to control the same thing. I'd suggest having only one rule that is setting #userBio text color unless you're specifically trying to have more than one color.

Second of all, the color number you were using had one too many digits so the browser just ignored it.

[ChancyRat]

Quite honestly, your CSS is such a mess with multiple CSS rules all competing for control of the exact same object that it is very difficult to advise you on changes and very difficult for you to change what you want to change. If I were you, I'd suggest taking all your CSS into a good text editor (I suggest the free Notepad++) and rearrange all your CSS into blocks of CSS each designed to modify a certain part of a page. And, put good comments around each block so you know what it's supposed to be. Then, remove all competing CSS rules so there's only one rule affecting any given part of your page.

If you change the last rule in your CSS to this:

#userBio table a:hover {color: #F000FF !important;}

it will change the hover color. It wasn't working right for two reasons. First, of all, you already have this in your CSS:

/*Links with the mouse over them with*/
#userBio table a:hover {color:#CD0000 !important;}
#userBio a:hover {color:#CD0000 !important;}

#userBio, #userBio a {
font-size: 18.8px !important;
line-height: 25px !important;
font-weight: 400 !important;
font-style: normal !important;
font-family: trebuchet ms, georgia, arial !important;
word-spacing: 0 !important;
color: #1F1F1A !important;
}
#userBio a:hover {color: #F0000FF !important;}
So, you're only making things worse if you add yet another rule trying to control the same thing. I'd suggest having only one rule that is setting #userBio text color unless you're specifically trying to have more than one color.

Second of all, the color number you were using had one too many digits so the browser just ignored it.

:cry :cry Hearing the painful truth is always painful, but appreciated.

Since my CSS is really mostly a mystery to me, I will try to be brave and reorganize it. However, if we could finish up this one bit -

Now the color links are correct on the home page, but not on the sitemap, where that is still all white over links. I have searched the CSS to see where competing color codes might be, and I did find 2. I delete one, and changed the color of the other, but the hover color remains white.

[ChancyRat]

Quite honestly, your CSS is such a mess with multiple CSS rules all competing for control of the exact same object that it is very difficult to advise you on changes and very difficult for you to change what you want to change. If I were you, I'd suggest taking all your CSS into a good text editor (I suggest the free Notepad++) and rearrange all your CSS into blocks of CSS each designed to modify a certain part of a page. And, put good comments around each block so you know what it's supposed to be. Then, remove all competing CSS rules so there's only one rule affecting any given part of your page.

If you change the last rule in your CSS to this:

#userBio table a:hover {color: #F000FF !important;}

it will change the hover color. It wasn't working right for two reasons. First, of all, you already have this in your CSS:

/*Links with the mouse over them with*/
#userBio table a:hover {color:#CD0000 !important;}
#userBio a:hover {color:#CD0000 !important;}

#userBio, #userBio a {
font-size: 18.8px !important;
line-height: 25px !important;
font-weight: 400 !important;
font-style: normal !important;
font-family: trebuchet ms, georgia, arial !important;
word-spacing: 0 !important;
color: #1F1F1A !important;
}
#userBio a:hover {color: #F0000FF !important;}
So, you're only making things worse if you add yet another rule trying to control the same thing. I'd suggest having only one rule that is setting #userBio text color unless you're specifically trying to have more than one color.

Second of all, the color number you were using had one too many digits so the browser just ignored it.

:cry :cry Hearing the painful truth is always painful, but appreciated.

Since my CSS is really mostly a mystery to me, I will try to be brave and reorganize it. However, if we could finish up this one bit -

Now the color links are correct on the home page, but not on the sitemap, where that is still all white over links. I have searched the CSS to see where competing color codes might be, and I did find 2. I delete one, and changed the color of the other, but the hover color remains white.

[jfriend]

:cry :cry Hearing the painful truth is always painful, but appreciated.

Since my CSS is really mostly a mystery to me, I will try to be brave and reorganize it. However, if we could finish up this one bit -

Now the color links are correct on the home page, but not on the sitemap, where that is still all white over links. I have searched the CSS to see where competing color codes might be, and I did find 2. I delete one, and changed the color of the other, but the hover color remains white.

This part of your CSS is controlling the links hover color in the sitemap:

.gallery_8004335 #albumDescription font:hover ,
.gallery_8004335 #albumDescription font:hover ,
.gallery_8004335 #albumDescription a:hover,
.gallery_8004335 #albumDescription a:hover {color: #FFF;}

Change that color to whatever you want it.

In the future, there is a much better way to tackle customization like this. You decide what basic link styles you want. Say you want some title links that are blue text with red hover color and some regular links that are brown text with red hover color. You create rules for a CSS class for each type like this:

/* specify common styles of my links */
.titleLink, .regLink {font-family: trebuchet ms, georgia, arial; font-size: 20px; text-decoration: none;}

/* specify unique style of title links */
.titleLink {color: #0000FF; font-weight: bold; }
.titleLink:hover {color: #FF0000;}

/* specify unique style of regular links */
.regLink {color: #FF00FF; font-weight: normal;}
.regLink:hover {color: #FF0000;}

Then, when you are creating your custom HTML and you want a title link, you just do it like this:

<a class="titleLink" href="http://www.joinrats.com/EarningTrust/MustReads">MUST MUST READS</a>

And, when you want a regular link, you do it like this:

<a class="regLink" href="http://www.joinrats.com/EarningTrust/MustReads/fancyrats/9918010_Nms4Z">Fancy Rates - Taming, Socialising</a>

You can then create whole new pages, use these classes in your HTML and never have to add another CSS rule. Then, when you want to update your site style, you simply change the master style declaration in one or two CSS rules and everything updates. Nothing is ever conflicting or competing.

[ChancyRat]

This part of your CSS is controlling the links hover color in the sitemap:

.gallery_8004335 #albumDescription font:hover ,
.gallery_8004335 #albumDescription font:hover ,
.gallery_8004335 #albumDescription a:hover,
.gallery_8004335 #albumDescription a:hover {color: #FFF;}
Change that color to whatever you want it.

In the future, there is a much better way to tackle customization like this. You decide what basic link styles you want. Say you want some title links that are blue text with red hover color and some regular links that are brown text with red hover color. You create rules for a CSS class for each type like this:

/* specify common styles of my links */
.titleLink, .regLink {font-family: trebuchet ms, georgia, arial; font-size: 20px; text-decoration: none;}

/* specify unique style of title links */
.titleLink {color: #0000FF; font-weight: bold; }
.titleLink:hover {color: #FF0000;}

/* specify unique style of regular links */
.regLink {color: #FF00FF; font-weight: normal;}
.regLink:hover {color: #FF0000;}

Then, when you are creating your custom HTML and you want a title link, you just do it like this:

<a class="titleLink" href="http://www.joinrats.com/EarningTrust/MustReads">MUST MUST READS</a>

And, when you want a regular link, you do it like this:

<a class="regLink" href="http://www.joinrats.com/EarningTrust/MustReads/fancyrats/9918010_Nms4Z">Fancy Rates - Taming, Socialising</a>

You can then create whole new pages, use these classes in your HTML and never have to add another CSS rule. Then, when you want to update your site style, you simply change the master style declaration in one or two CSS rules and everything updates. Nothing is ever conflicting or competing.

Thanks for the great lesson. I will study them.

- The CSS "took" showing errors, then I re-did something else and it "took" without errors; I hope I don't have errors that will haunt me. After all that, now the links on the sitemaps (in both sitemap page and home page) are correct.

- However on the home page, www.joinrats.com, the first paragraph of description text, I was hoping the links in that text would be a different color in the text as well as with hover. Is there a way to instruct for different styles for different parts of a page?

- How do i change the navbar hover color on the home page?

- Related to your info in this post, how does the css identify what are titles and what are regular links? I have a heavy recollection that in all my gallery descriptions, I haven't coded with those delineations in mind. And II have contradictory themes, such as valentine (old) (new), as well as summer, and there I have got different galleries coded for different colors over links as well.

- If I could piggy-back another format problem that has dogged me, in this Category which is all old valentine:
http://www.joinrats.com/Enrichment

- Can I change the breadcrumb for all galleries in this category to white font, instead of black?

- How would I change the font color, which is now black in old journal style galleries, to black in smugmug style galleries, e.g.,:

http://www.joinrats.com/Enrichment/RatsPlay/8226097_YgQM6#518283054_DdF3E

And since I'm on a roll with formatting problems:

- On these pages in old journal style, the right margin of the captions hits the border too closely.
http://www.joinrats.com/Enrichment/feathers/7795645_BNGPt
http://www.joinrats.com/Enrichment/coconuts/8865656_s8y6g
http://www.joinrats.com/Enrichment/jumping/8954344_Qih54

On the other hand in these galleries in that Category, they seem okay, but is it the luck of the character widths:
http://www.joinrats.com/Enrichment/stashing/7947546_A5obY
http://www.joinrats.com/Enrichment/pumpkins/10717503_XcsZd

Can I force the right margin to indent a smidgeon on all galleries in old valentine? Or, would that be all galleries in the category:

http://www.joinrats.com/Enrichment

I would limit the right margin change in old journal to only galleries in old valentine because the summer themes are okay on the right margin, as here:
http://www.joinrats.com/Introductions/ratbehaviors/10963305_YcSxt

Thanks.

[jfriend]

Thanks for the great lesson. I will study them.

- The CSS "took" showing errors, then I re-did something else and it "took" without errors; I hope I don't have errors that will haunt me. After all that, now the links on the sitemaps (in both sitemap page and home page) are correct.

- However on the home page, www.joinrats.com (http://www.joinrats.com), the first paragraph of description text, I was hoping the links in that text would be a different color in the text as well as with hover. Is there a way to instruct for different styles for different parts of a page?

- How do i change the navbar hover color on the home page?

- Related to your info in this post, how does the css identify what are titles and what are regular links? I have a heavy recollection that in all my gallery descriptions, I haven't coded with those delineations in mind. And II have contradictory themes, such as valentine (old) (new), as well as summer, and there I have got different galleries coded for different colors over links as well.

- If I could piggy-back another format problem that has dogged me, in this Category which is all old valentine:
http://www.joinrats.com/Enrichment

- Can I change the breadcrumb for all galleries in this category to white font, instead of black?

- How would I change the font color, which is now black in old journal style galleries, to black in smugmug style galleries, e.g.,:

http://www.joinrats.com/Enrichment/RatsPlay/8226097_YgQM6#518283054_DdF3E

And since I'm on a roll with formatting problems:

- On these pages in old journal style, the right margin of the captions hits the border too closely.
http://www.joinrats.com/Enrichment/feathers/7795645_BNGPt
http://www.joinrats.com/Enrichment/coconuts/8865656_s8y6g
http://www.joinrats.com/Enrichment/jumping/8954344_Qih54

On the other hand in these galleries in that Category, they seem okay, but is it the luck of the character widths:
http://www.joinrats.com/Enrichment/stashing/7947546_A5obY
http://www.joinrats.com/Enrichment/pumpkins/10717503_XcsZd

Can I force the right margin to indent a smidgeon on all galleries in old valentine? Or, would that be all galleries in the category:

http://www.joinrats.com/Enrichment

I would limit the right margin change in old journal to only galleries in old valentine because the summer themes are okay on the right margin, as here:
http://www.joinrats.com/Introductions/ratbehaviors/10963305_YcSxt

Thanks. Maybe someone else can take over from here. I feel like the CSS is such a mess that we're just playing whack-a-mole here. Fix one thing and there's an unintended consequence somewhere else. I can't avoid that because of the structure of your CSS and the fact that I have no overall picture of how your site is supposed to be formatted. Have you considered hiring someone to get it all organized for you? You have so much going on here that I think you're either going to have to commit to really learning HTML and CSS so you can set it up properly yourself or hire someone to do that for you. Otherwise, it's going to just get more and more and more difficult to modify without screwing up something.

The example I gave you in my last post can be used to control the color of ANY link on ANY page. You may have to remove competing rules to get it to work, but it will work.

Likewise, you can control the formatting of any sequence of text with something like this:

<span class="myRegularText">This is some text</span>

and then this CSS:

.myRegularText {font-family: verdana; color: #FFFF00; font-weight: bold;}

Or any block of HTML with this:

<div class="myRegularBlock">This is some text</div>

and then this CSS:

.myRegularBlock {font-family: verdana; color: #00FF00; font-weight: normal;}