CSS ERROR in default template, need help fixing

[sledgeweb]

OK, this line in the default CSS template is not good...

Koodi [Valitse] Laajenna

/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
   color: #000000;
   font-size: small;
   font-family: verdana, sans-serif;
}

The reason is, the style is applied to items in the body area of the forum, as well as within window elements of the forum. This is fine if your body background is light, and your window backgrounds are light, but is no good if you have a dark body background and a light window background.

For example, my forum has a dark body background. With color set to black, the "PAGE 1" text is black on top of a dark background and are hard to see. Also, the text that explains the new image icons at the bottom of the main forum page is black on top of a dark background, and you can't read them at all.

However, you can't set this to a light color, because then all the text say in the PROFILE menu is light on a light background.

Good CSS structure should dictate that these two areas of text use two different styles since they are in completely different elements. The text that is in the body area should be able to be styles separately than the text that is in the window elements.

I know this is an easy fix, and as such, this should be fixed in the default template for future releases of SMF. However, I could use some help actually locating where these items are locatied so I can go ahead and give them a different style class. I didn't see them in the index.template file.

Thanks,
Sledge

[sledgeweb]

This questions was open to anyone.... anyone at all. Hello?

[T. Patrick]

Hello,

Ditto!, I'm having the same problem. Black body with light window have no shot of working well with the color control that exists. And I can't seem to find anything else in the forums on this exactly, until now.

I'm setting up this forum for a non-profit organization that I belong to. We're all firefighters from throughout the state and our theme "HAS" to be red on black. (lol)  I couldn't talk them into white with black spots!

Other than this minor issue, SMF is the best I've used yet. Not that I'm any measure only having worked with two others. This seems to have everything we need.

I noticed that this situation also affects the scrolling news text. Doesn't leave you a very big range of colors that will work on both a dark and light background.... and still be readable.

I know nothing about CSS structure, but any help toward resolving this would be great. Sounds like Sledge just needs to be pointed to the correct file.

If he solves this, I would like to know. 

Thanks,
Fifty-4

[T. Patrick]

Well until a solution is presented, I have done this. Seems to work.

Old code.
_{/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
   color: #000000;
   font-size: small;
   font-family: verdana, sans-serif;
}}

My fix
<sub>body, td,
{
   color: #000000;
   font-size: small;
   font-family: verdana, sans-serif;
}

body, th ,
{
   color: #000000;
   font-size: small;
   font-family: verdana, sans-serif;
}


body, tr
{
   color: #FFFFFF;
   font-size: small;
   font-family: verdana, sans-serif;
}</sub>

[sledgeweb]

This fix works better for me... I haven't tested it fully, but the areas I tested seem to work. The idea is, all my light backgrounds are in those window boxes, which are inside divs with a tborder class assignment. Therefore, I want anything nested in the tborder classes to have dark text:

Koodi [Valitse] Laajenna

/* By default (td, body..) use verdana in black. */
body tborder, tborder td, tborder th , tborder tr
{
   color: #000000;
   font-size: small;
   font-family: verdana, sans-serif;
}


Then, in the body tag, I make the default text light, so the text shows up on my dark backgrounds. Give this a try and let me know if it works for you. Stinks that support here has gone downhill so much. I have a couple of other problems, but can't get any help on them.

Koodi [Valitse] Laajenna

/* The main body of the entire forum. */
body
{
   color: #FFFFFF;
   //All your other body stuff, just make sure you have the color attribute set as well
}