vb.org Archive - Categories - Custom Background Colours (To Each ID)?

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)

- - Categories - Custom Background Colours (To Each ID)? (https://vborg.vbsupport.ru/showthread.php?t=322886)

Categories - Custom Background Colours (To Each ID)?

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!

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

HTML Code:

<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:

HTML Code:

li#forum15 {

    background: white;

}

Quote:

Originally Posted by grey_goose (Post 2572349)

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

HTML Code:

<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:

HTML Code:

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;

HTML Code:

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

Try something like this:

HTML Code:

#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.

Quote:

Originally Posted by MarkFL (Post 2572352)

Try something like this:

HTML Code:

#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;

HTML Code:

#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 [DATE]1466543458[/DATE] at [TIME]1466543458[/TIME] ---------------

Quote:

Originally Posted by MarkFL (Post 2572352)

Try something like this:

HTML Code:

#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.

HTML Code:

    -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:

HTML Code:

/* 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 [DATE]1466545022[/DATE] at [TIME]1466545022[/TIME] ---------------

Aaand... I've hit a snag.

HTML Code:

/* 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

Try combining them like so:

HTML Code:

/* 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;

}

Quote:

Originally Posted by MarkFL (Post 2572356)

Try combining them like so:

HTML Code:

/* 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!

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

Quote:

Originally Posted by MarkFL (Post 2572364)

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.

Thanks everyone for sharing codes

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

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (14)bbcode_html_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01251 seconds Memory Usage 1,759KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (14)bbcode_html_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: