Categories - Custom Background Colours (To Each ID)?

[Inked_Mono]

Does anybody know of a way to set custom background colors for your categories? As it stands, they're all defined as a blue;

http://i.imgur.com/mySBJJg.png

As you can see with "Off-Topic Discussion" and "Additional Forums", but is there a way I'd be able to set a unique color for each of those categories? I've tried looking around, but can't seem to find a way to.

Thanks in advance!

[grey_goose]

Forums are displayed with the 'forumbit' templates but already have IDs:

<li id="forum15" class="forumbit_post L2">
stuff and stuff
</li>

All you'd need to do is to go into your additional.css or forumhome.css and add a class for that ID. In the above case it would be:

li#forum15 {
background: white;
}

[Inked_Mono]

Forums are displayed with the 'forumbit' templates but already have IDs:

<li id="forum15" class="forumbit_post L2">
stuff and stuff
</li>

All you'd need to do is to go into your additional.css or forumhome.css and add a class for that ID. In the above case it would be:

li#forum15 {
background: white;
}

Hey there!

When you refer to "forumbit" templated, are you referring to the CSS? I'd tried looking through it, but was unable to find anything that looked similar to what you'd mentioned. Upon inspecting the element, the category itself was titled as;

http://i.imgur.com/PWI1rfa.png

So, I added the;

li#forum101 {
background: white;
}

To the additional.css, as well as the forumhome.css and ended up having no luck. I know I'm doing something entirely wrong, haha, as it just doesn't seem to add up. Could it have something to do with the title of the CSS? As in "li#forum101" should perhaps be "li#cat101"?

Edit: Upon trying it, I was given this result: http://i.imgur.com/X3UEmzu.png

[MarkFL]

Try something like this:

#catXX .forumhead {
background: red !important;
}

Change "XX" to the forumid of the category you want to change, and change the color to suit your preference. Add a selector like the above for each category you want to affect.

[Inked_Mono]

Try something like this:

#catXX .forumhead {
background: red !important;
}

Change "XX" to the forumid of the category you want to change, and change the color to suit your preference. Add a selector like the above for each category you want to affect.

I just had to change it to read;

#catXX .vbs_forumhead {
background: red !important;
}

and it worked perfectly. A few minor tweaks, and it's exactly what I'll need. Thank you!

--------------- Added 1466543458 at 1466543458 ---------------

Try something like this:

#catXX .forumhead {
background: red !important;
}

Change "XX" to the forumid of the category you want to change, and change the color to suit your preference. Add a selector like the above for each category you want to affect.

Random question:

Adding in a background, it seems to rid of the padding/internal black border.

Before: http://i.imgur.com/NYKosqU.png
After: http://i.imgur.com/BhhD3A6.png

I've got the CSS to try and include a border and appropriate padding, but it doesn't seem to be working.

Before (CSS): http://i.imgur.com/UEsw4hc.png
After (CSS): http://i.imgur.com/e2A7rch.png

Any idea what might be causing the conflict?



Edit2: Found a work around!

By adding the following into the initial override CSS, I was able to add an inside border.

-webkit-box-shadow:inset 0px 0px 0px 10px #000;
-moz-box-shadow:inset 0px 0px 0px 10px #000;
box-shadow:inset 0px 0px 0px 10px #000;

So, in entirety, the code looks like the following:


/* Custom Category Colors */
#catXX .vbs_forumhead {
background: #2b3227;
-webkit-box-shadow:inset 0px 0px 0px 10px #000;
-moz-box-shadow:inset 0px 0px 0px 10px #000;
box-shadow:inset 0px 0px 0px 10px #000;
}


--------------- Added 1466545022 at 1466545022 ---------------

Aaand... I've hit a snag.


/* Custom Category Colors */

#cat86 .vbs_forumhead {
background: #683030;
-webkit-box-shadow:inset 0px 0px 0px 10px #000;
-moz-box-shadow:inset 0px 0px 0px 10px #000;
box-shadow:inset 0px 0px 0px 10px #000;
}

#cat49 .vbs_forumhead {
background: #683030;
-webkit-box-shadow:inset 0px 0px 0px 10px #000;
-moz-box-shadow:inset 0px 0px 0px 10px #000;
box-shadow:inset 0px 0px 0px 10px #000;
}


Does anybody know why the code wouldn't apply to the multiple categories? It seems to only work for the first, but even then, changing the first number from 86 to 49 doesn't seem to do anything.

http://i.imgur.com/2JPaBZW.png

Edit: This seems to just be an issue with the first category of each tab. I can't do any of the further categories, however the first one works without a problem.

http://i.imgur.com/ydstYci.png

[MarkFL]

Try combining them like so:

/* Custom Category Colors */

#cat49 .vbs_forumhead, #cat86 .vbs_forumhead {
background: #683030;
-webkit-box-shadow:inset 0px 0px 0px 10px #000;
-moz-box-shadow:inset 0px 0px 0px 10px #000;
box-shadow:inset 0px 0px 0px 10px #000;
}

[Inked_Mono]

Try combining them like so:

/* Custom Category Colors */

#cat49 .vbs_forumhead, #cat86 .vbs_forumhead {
background: #683030;
-webkit-box-shadow:inset 0px 0px 0px 10px #000;
-moz-box-shadow:inset 0px 0px 0px 10px #000;
box-shadow:inset 0px 0px 0px 10px #000;
}

Oddly enough, even then it still seems to only replace the top one. Hmm.

Edit: I sent a PM!

[MarkFL]

I tried combining selectors on my local dev site and it worked for both categories...I will check out your PM now.

[Inked_Mono]

I tried combining selectors on my local dev site and it worked for both categories...I will check out your PM now.

Thanks! I took a look and have responded.

Should anything come up from the discussion, I'll keep this thread updated for future search results.

[Mattwhf]

Thanks everyone for sharing codes

But i think it can be solve with inline style (combine with forum id) without using more CSS codes.

[MarkFL]

Thanks everyone for sharing codes

But i think it can be solve with inline style (combine with forum id) without using more CSS codes.

Using inline styling requires template hacking, which should be avoided if possible.

As it turned out, the OP is using a custom style which doesn't wrap the category headers correctly within the list element, and so I wound up having to hack the "forumhome_forumbit_level1_nopost" template, where I located the line:

<tr class="vbs_forumhead}">

and changed it to:

<tr class="vbs_forumhead fh{vb:raw forum.forumid}">

This way, each forumhead element has a class with the forumid in it that can be used with CSS selectors.