color

[nurul112]

 8)How add color to categorie  text ?

[Bigguy]

Play around with index.css a bit and you should get it.

[Sir Osis of Liver]

/css/index.css

Code Select Expand



h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
}



[Bigguy]

There ya go. Thank you Sir.

[Siirist]

/css/index.css

Code Select Expand



h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
}



So this will change the color of the text on all the categories, is that correct?

If this is true, would that mean that I cannot have a different color of text on different categories?

Be Well,
Siirist

[Kindred]

just like the boards...  you can create individual CSS calls...

<tbody class="header" id="category_22">
the ID allows you to target CSS to the specific category heading

[Siirist]

just like the boards...  you can create individual CSS calls...

<tbody class="header" id="category_22">
the ID allows you to target CSS to the specific category heading

Sweet!!!

Thanks Kindred!

Be Well,
Siirist

*EDIT: Well pooh, "<tbody class="header" id="category_22">" does not exist in the Themes/ostara1/css/index.css

[Kindred]

that was an example from this site...

look at your own site using the browser developer tools or firefox+firebug
check what the category_### value is for your categories...

add a line for
#category_2 (or whatever it actually is)
{
color: blue !important;
}

[Siirist]

Hmm...

Code Select Expand


line# 742
/* Styles for rounded headers.
------------------------------------------------------- */
h3.catbg, h3.catbg2, h3.titlebg, h4.titlebg, h4.catbg
{
overflow: hidden;
height: 31px;
line-height: 31px;
font-size: 1.2em;
font-weight: bold;
}
h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
#category_2
{
color: blue !important;
}
}
h3.catbg2 a, h3.catbg2
{
color: #feb;
}
Line#764


the attached forum2/Themes/default/index.css was downloaded before the above changes

Thank you for your time.
Siirist

[Siirist]

I am not understanding.

I found

Code Select Expand

}
h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
#category_2
{

My Categories text is white

When I change color: #000, then every category's text is black.

I do not understand how to change the color for each individual category.

Agreed in those } { it references #category_2 yet effects all categories and I don't see a reference to each of the other categories.

I attached my Themes/default/css/index.css again.

Thanks in advance.

Be Well,
Siirist

[Illori]

so you have

Code Select Expand


/* Styles for rounded headers.
------------------------------------------------------- */
h3.catbg, h3.catbg2, h3.titlebg, h4.titlebg, h4.catbg
{
overflow: hidden;
height: 31px;
line-height: 31px;
font-size: 1.2em;
font-weight: bold;
}
h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
#category_2
{
color: blue !important;
}
}
h3.catbg2 a, h3.catbg2
{
color: #feb;
}



after that add

Code Select Expand

#category_2
{
color: blue !important;
}

[Siirist]

Hey Illori, 

Thanks for your reply.

I did that and saved it and there was no change. Category text is still white.

New code looks like this

Code Select Expand


* Styles for rounded headers.
------------------------------------------------------- */
h3.catbg, h3.catbg2, h3.titlebg, h4.titlebg, h4.catbg
{
overflow: hidden;
height: 31px;
line-height: 31px;
font-size: 1.2em;
font-weight: bold;
}
h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
#category_2
{
color: blue !important;
}
}
h3.catbg2 a, h3.catbg2
{
color: #feb;
}
#category_2
{
color: blue !important;
}
h3.catbg a:hover, h4.catbg a:hover, .table_list tbody.header td a:hover
{
color: #fd9;
text-decoration: none;
}
h3.catbg2 a:hover
{
color: #fff;
text-decoration: none;
}
h3.titlebg a, h3.titlebg, h4.titlebg, h4.titlebg a
{
color: #222;
}
h3.titlebg a:hover, h4.titlebg a:hover
{
color: #53616f;
text-decoration: none;
}


There are now two (2) entries of
{
color: blue !important;
}

//EDIT: I changed the forum's default theme to SMF Default Curve so that you can see the forum as a guest in the right theme.

Hmm . . .

[Illori]

you did not add the code as you said, you have it with in other css definations. you need to put it AFTER the closing } bracket.

[Siirist]

Um, here's what I understand and see.

{ = open bracket
} = closing bracket

color: #fff;
   #category_2
{ (open)
color: blue !important;
} (close)
} (close) [this is a double close, hmmm . . .
h3.catbg2 a, h3.catbg2
{ (open)
   color: #feb;
} (close)
#category_2
{ (open)
color: blue !important;
} (close)

Is this like a $125.00 fix in Paid?

[Illori]

you have this

Code Select Expand

h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
#category_2
{
color: blue !important;
}

it should be this

Code Select Expand

h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
}
#category_2
{
color: blue !important;
}

do you see the difference?

[Sir Osis of Liver]

Code Select Expand



h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
#category_2
{
color: blue !important;
}
}



Should be -

Code Select Expand



h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
}
#category_2
{
color: blue !important;
}



Ninja'd. 

[Siirist]

you have this

Code Select Expand

h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
#category_2
{
color: blue !important;
}

it should be this

Code Select Expand

h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
}
#category_2
{
color: blue !important;
}

do you see the difference?

Yes. Thank you. *scratches head* Interesting positioning of the switches.

Code Select Expand


color: blue !important;
}
}



Should be -

Code Select Expand


color: blue !important;
}



Ninja'd. 

Nice spotting Sir Osis
Got that taken care of too (I deleted the second close switch, as shown below).

Thank you both.

Now I have

Code Select Expand


h3.catbg a:link, h3.catbg a:visited, h4.catbg a:link, h4.catbg a:visited, h3.catbg, .table_list tbody.header td, .table_list tbody.header td a
{
color: #fff;
}
#category_2
{
color: blue !important;
}
h3.catbg2 a, h3.catbg2
{
color: #feb;
}
#category_2
}
h3.catbg a:hover, h4.catbg a:hover, .table_list tbody.header td a:hover

(which I uploaded)

I have looked at the forum (SMF Default Curve) and the categories remain white on a light blue background.

*sighs*

[Illori]

use your browsers developers tools to inspect the category header and find out the correct id for it. each header has its own id/number.

[Siirist]

use your browsers developers tools to inspect the category header and find out the correct id for it. each header has its own id/number.

I remember this from years ago using SMF ver 1.0 

You guys aren't going to believe what I remembered.   

I can use HTML codes ie. <font color="#0000FF">blah blah blah</font>   

Sorry for all the trouble. 

Cordially,
Siirsit

[Illori]

but you should NOT. we told you the correct way to do the task you wanted.