Style References for vBulletin 4.x

[final kaoss]

Thanks, this thread should be stickied.

[JacquiiDesigns]

Wow! Great tutorial. This should prove an invaluable resource in the coming weeks.
Thanks so much for the info share!

J.

[londoner]

wow great post , thanks for all ur effort mate

[RichieBoy67]

Really helpful thread! Thanks dude!

[TheLastSuperman]

Originally Posted by TheLastSuperman

Well the bottom half can be easily modified via adding this to additional.css:

#welcomemessage {
color:#ff4400 !important;
}

If we try this version to also snag the title, this is when it changes on all pages:

#pagetitle h1, #welcomemessage {
color:#ff4400 !important;
}

It's the top half i.e. the page title that is the issue, if you modify that via css per the bottom example above it changes on all pages not simply forumhome (which we will assume you do not want to do, only make the change on forumhome naturally) so you can at this point either:

1) Modify the template and specify the css via style="css here;" example:

Edit the FORUMHOME template and find:

	<div id="pagetitle">
		<h1>{vb:raw vboptions.bbtitle}</h1>
		<p id="welcomemessage" class="description">{vb:rawphrase welcome_to_the_x, {vb:raw vboptions.bbtitle}}</p>
	</div>

Change to:

	<div id="pagetitle" style="color:#ff4400 !important;">
		<h1>{vb:raw vboptions.bbtitle}</h1>
		<p id="welcomemessage" class="description">{vb:rawphrase welcome_to_the_x, {vb:raw vboptions.bbtitle}}</p>
	</div>

OR

2) Make a plugin for this:

AdminCP > Plugins & Products > Add New Plugin

Product: vBulletin
Hook location: parse_templates
Title: Custom Style Changes
Execution Order: 5

PHP Code:

if (STYLEID == 1) {
if (THIS_SCRIPT == 'forumhome') {
$cssfix = '<style type="text/css">
#pagetitle {
color:#ff4400 !important;
}
</style>';
$template_hook[headinclude_bottom_css] .= $cssfix;
}
} 


Change the STYLEID == 1 i.e. change the 1 to the styleid # of the style you are changing this in otherwise it will change in all styles not just the one in question you're working on .


So it's either option 1 or 2, option one means one less plugin on your site, option two is not technically css correct in a sense i.e. they say its best to use id="cssid" or class="cssclass" instead of style="css code here directly" but imho that's better than a plugin parsing/checking etc but the choice is up to you .

Finally got around to making this into an article and edited the Useful Links section of this one to include it - https://vborg.vbsupport.ru/showthread.php?t=307739

[Kirkus]

OK, I know this is an old(er) thread. But I had to post a big fat Thank You for the original post and the rest of this thread. It's inclusive and the only thing I could find that had so much information on creating/editing vBulleting Styles. So...

Thank you!!

[belkassem]

After few years I think this article is a reference. Time won't get rid of the content. Still helpful. Thank You.

[nolimitreef]

I am going nuts and losing so much sleep over this issue.

We have 2 logos so rather than using a logo at all we are trying to make the header background image an image map. There are 2 places in this image I'd like to make hot links if you will. How exactly would I go about this and where? Is it even possible? Well actually I know it is because I sort of did it but it covered the toplinks. Your help would be GREATLY appreciated. I have included the locations of each and our url in case you need it.

Thank you!

<AREA SHAPE=rect COORDS="155,126,704,250" HREF="http://www.nolimitreef.com/index.php" ALT="Reef Aquarium Forum">
<AREA SHAPE=rect COORDS="482,4,893,117" HREF="http://www.nolimitreef.com/dbtclassifieds.php" ALT="Reefbay classifieds Buy Sell Trade">

http://www.nolimitreef.com

[TheLastSuperman]

I would use a fluid three part div area... example:

<div class="placeholder">
<div class="firstlogo"><a href="url"><img src="url" alt="blah" /></a></div>
<div class="secondlogo"><a href="url"><img src="url" alt="blah" /></a></div>
</div>

It looks like you're using some program to make an image map, those will work but some get confused making/using them here's a guide by Mozilla to help you grap them better - https://developer.mozilla.org/en-US/...ML/Element/map so you can still use your map and insert it into the header template and remove the default logo OR you can tinker around with div classes and use something similar to the snippet I posted above where placeholder is the width+height of the area and first and secondlogo div classes are the two logo div's that hold the logo ahref+image code.

[nolimitreef]

Originally Posted by TheLastSuperman

I would use a fluid three part div area... example:

<div class="placeholder">
<div class="firstlogo"><a href="url"><img src="url" alt="blah" /></a></div>
<div class="secondlogo"><a href="url"><img src="url" alt="blah" /></a></div>
</div>

It looks like you're using some program to make an image map, those will work but some get confused making/using them here's a guide by Mozilla to help you grap them better - https://developer.mozilla.org/en-US/...ML/Element/map so you can still use your map and insert it into the header template and remove the default logo OR you can tinker around with div classes and use something similar to the snippet I posted above where placeholder is the width+height of the area and first and secondlogo div classes are the two logo div's that hold the logo ahref+image code.

Thank you! I'll give that a shot. Yes it is an image map app from Ulead Smart Saver Pro v3.0 (very old but basic). I needed to place absolute positioning to the 2 embedded logos clear image to link them. It did work however. But I don't know if what I did has anything to do with my other header issue or not though.

In Advertising; header1 and header2 locations do not work. The other locations do work for the same code. I used a JS simple banner rotator script in header2 and it didn't show. but when I tried it in other other locations it worked perfect. We'd really like header2 to work for our advertisers. Actually we'd love to have header1 and header2 stacked on the right and have seen it but can't find the code. If you could help with this issue or point me in the right direction I would appreciate it