Go Back   vb.org Archive > vBulletin 4 Discussion > vB4 General Discussions
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools Display Modes
  #1  
Old 06-20-2016, 07:42 PM
Inked_Mono Inked_Mono is offline
 
Join Date: Jan 2015
Location: Canada
Posts: 116
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default 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!
Reply With Quote
  #2  
Old 06-21-2016, 05:30 PM
grey_goose grey_goose is offline
 
Join Date: Jun 2009
Posts: 284
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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;
}
Reply With Quote
Благодарность от:
Inked_Mono
  #3  
Old 06-21-2016, 06:44 PM
Inked_Mono Inked_Mono is offline
 
Join Date: Jan 2015
Location: Canada
Posts: 116
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by grey_goose View Post
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
Reply With Quote
  #4  
Old 06-21-2016, 06:56 PM
MarkFL's Avatar
MarkFL MarkFL is offline
 
Join Date: Feb 2014
Location: St. Augustine, FL
Posts: 3,853
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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.
Reply With Quote
Благодарность от:
Inked_Mono
  #5  
Old 06-21-2016, 07:04 PM
Inked_Mono Inked_Mono is offline
 
Join Date: Jan 2015
Location: Canada
Posts: 116
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by MarkFL View Post
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 View Post
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
Reply With Quote
  #6  
Old 06-21-2016, 09:08 PM
MarkFL's Avatar
MarkFL MarkFL is offline
 
Join Date: Feb 2014
Location: St. Augustine, FL
Posts: 3,853
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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;
}
Reply With Quote
Благодарность от:
grey_goose
  #7  
Old 06-21-2016, 10:20 PM
Inked_Mono Inked_Mono is offline
 
Join Date: Jan 2015
Location: Canada
Posts: 116
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by MarkFL View Post
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!
Reply With Quote
Благодарность от:
Mattwhf
  #8  
Old 06-22-2016, 12:05 AM
MarkFL's Avatar
MarkFL MarkFL is offline
 
Join Date: Feb 2014
Location: St. Augustine, FL
Posts: 3,853
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I tried combining selectors on my local dev site and it worked for both categories...I will check out your PM now.
Reply With Quote
  #9  
Old 06-22-2016, 01:07 AM
Inked_Mono Inked_Mono is offline
 
Join Date: Jan 2015
Location: Canada
Posts: 116
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by MarkFL View Post
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.
Reply With Quote
Благодарность от:
MarkFL
  #10  
Old 06-22-2016, 10:58 AM
Mattwhf Mattwhf is offline
 
Join Date: May 2016
Posts: 190
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks everyone for sharing codes

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


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:15 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05532 seconds
  • Memory Usage 2,286KB
  • Queries Executed 13 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (14)bbcode_html
  • (5)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (10)post_thanks_box
  • (5)post_thanks_box_bit
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (5)post_thanks_postbit
  • (10)post_thanks_postbit_info
  • (10)postbit
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete