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.

[Siirist]

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

Okay so the saga continues, when I look at the index page with Firebug for FireFox ver. 43, all I get is the index.css.

When I go with Google Chrome ver. 48, and access Developer tools, I get is the index.html.

When I go with IE ver. 11, and use F12 for Developer tools, I get is the index.html.

When I use Opera ver. 34, Developer tools, it gives me the index.html and the style sheet (aka the index.css)

*is beginning not to care*

[Kindred]

I have no idea what you are looking at...  But none of those files seems to be what firebug displays...

viewing the forum index with Firefox plus firebug shows you the HTML display and the CSS which controls the look of that display.

The HTML display is where I got the category_2 from...  It is an ID, which means you use a # in front of it for CSS targeting.

If you update the CSS file, you may need to clear your forum cache and also your browser cache to see the change...

[mashby]

If you are beginning not to care, then you are beginning the descent into ignorance. Never stop learning. A motto to live by.

Firebug and other such inspection tools can be daunting at first, but if you understand and learn the construction of a web page, those tools are invaluable. And you have to have the basics of CSS, too.

The kind folks who have already replied gave you great direction. CSS is simple really.

THING (class, ID, element) {
   CSS rules go here to define the appearance
}

You were including things inside your rules which of course won't work. And rather than typing any more if you really don't care, you can read up on CSS here or just ignore me, too:
http://www.w3schools.com/css/

[Siirist]

Thank you Kindred and mashby,

Put in those words gives this all new meaning.

I have modified about 15 websites. As of late they have had css files that I had to modify as well.

I acknowledge that I am still quite lacking in the world of css (thank you for the link mashby)

Okay so I believe that I am to find the part (element) that I want to modify in the html (ie. h2), then go into css and "define" what it does,
such as spaces (padding), font face (family), color, size (weight), and underline/bold/italics (text-decoration).

Am I going down the right road? Thinking along the right lines?

I'll take a fresh look at it in the morning.

Be Well,
Siirist

[mashby]

Your reply is very encouraging! Yes, that is the right road to proceed down. There are specific things you'll learn along the way. !important being one of them (just as an example). Box model. Oh, and you should also read up on beer. It has nothing to do with web stuff, but man, I really like it.

[Kindred]

Except that no... You do not need to modify the php/HTML at all.   The element Id is already present in the code and you just need to tell the system what to do with it, in terms of display, by defining the CSS

[Siirist]

Except that no... You do. It need to modify the php/HTML at all.   The element Id is already present in the code and you just need to tell the system what to do with it, in terms of display, by defining the CSS

A clarification?

Okay so I believe that I am to find the part (element) that I want to modify in the html (ie. h2),
then go into css and "define" what it does

Thank you,
Siirist

[Kindred]

damned autocorrect...    that should read:  You do NOT need to modify the php/HTML at all.

[Siirist]

damned autocorrect... 

I know, right?!!

...that should read:  You do NOT need to modify the php/HTML at all.

Wait, what? How can it work if I don't modify "the php/HTML at all"?

I attached the Themes/default/index.css. If perhaps someone could indicate which lines should be modified with the changes bolded as an example.

Thank you,
Siirist

[Kindred]

the php/html files ALREADY HAVE the categories IDed ...

you just have to ADD the CSS for each category ID to the CSS file.

e.g.
#category_2 { color: #000080 !important; }
#category_3 { color: #800000 !important; }
#category_4 { color: #008000 !important; }

[Siirist]

Umm. . . no.

You see when I search "#category" there is ONLY two occurrences of  "#category_2".

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                               <-HERE
{
color: blue !important;
}
h3.catbg2 a, h3.catbg2
{
color: #feb;
}
#category_2                                <-AND HERE
}



Siirist

[Kindred]

ummmm   yes....

you just have to ADD the CSS for each category ID to the CSS file.

[Siirist]

ummmm   yes....

you just have to ADD the CSS for each category ID to the CSS file.

Well, sh**!

Off to paid help. Unless that is you as well, if it is will you PM me with a price?

Be Well,
Siirist

[Kindred]

sorry, I just don't have the time

[Siirist]

sorry, I just don't have the time

No worries Kindred.  I have to choose my website layout, and SEO it, and then upload it, because somehow the site is getting 165,000 hits a month but there is not any new members in the forum.

Anyway, maybe another can do it for me. 

Be Well Kindred,
Siirist

[Siirist]

Hi Everyone,

Bringing this back to life. 

I don't know why, but even with all the explanation here, it is beyond me.

SOOOO, here are my thoughts on "other options".

I am currently using "Board-color-and-icons" which works well in all themes.

I have modified the color of the Categories by using <font color="0000FF">Category Title</font>, but Kindred said this was a bad idea (I checked my posts all the way back to May of 2015 (man, bookmarks MOD would be great here).

I today I discovered antiquated "Colorize Boards" (Colorize board names, descriptions and category names)

In order to comply with Kindred's statement about NOT using <font color>,
I could FIRST UN-install "Board-color-and-icons", (inexperienced members this is very important)
and then install "Colorize Boards" (using "How_can_I_install_a_mod_that_doesn't_work_in_my_SMF_version" because it is OLD and written for ver 2.0 RC4).

HOWEVER, I would loose the option for "...and icons". Yet, I should be able to go to Themes/(theme name here)/images and overwrite "off.png", "on.png", and "on2.png" with the icon I desire for that theme.

Would this make everything "all better"?

Thank you for your time to read all this and for your thoughts.

Be Well,
Siirist

[Siirist]

*anyone?*

[Steve]

I'm not trying to sound flippant so don't get me wrong but you could back everything up and just try it to see if it'll do what you want.

[Siirist]

I'm not trying to sound flippant so don't get me wrong but you could back everything up and just try it to see if it'll do what you want.

Hey Steve,

Yup Yup   

Just laying it out so that

A) Kindred (who said it was bad to force Category color with html code) could say "Atta boy, or Hell No   

B) Others could see how this could be done without coding   

Thanks fer takin a look see. 

Be Well,
Siirist

[Steve]

Kindred's not the only one who recommends not using html but I'd listen to him. He hasn't steered me wrong yet.