Blue is the Colour

Installation:
Upload the style via AdminCP > Styles & Templates > Upload/Download Styles
Upload the graphics files to styles/blueisthecolour/images/. I only included changed graphics, so for the editor graphics etc you'll either have to upload them to that folder as well, or change the StyleVars settings.


About
Another blue style, sorry. This is style constructed for my own personal forum, originally not intended to be spread around (hence the lack of decent PSD records, sorry but there are none I can reasonably distribute at the moment. ) but what the hell, bit of publicity never hurt anyone.

It is designed to be, in essence a visual upgrade of the default vBulletin style, hence in some places I've made use of the original images. While I think the default layout and organisation of the style is excellent, frankly I find the graphical side very weak. So I wanted to keep the basics, just make it more vibrant. It turnd out rather more "friendly" than I intended, so maybe it would suit a family site or a casual/personal forum best.


Live Demo
You can view a live, but more customised, version here:
http://forumwhatever.com


Bonus!
Because I have a few customisations on my site, I have included any extra graphics I've used in the zip file with the rest as a freebie bonus, including the banner and forum icon masks I used to achieve the fuzzed-edge look on my own forum. So if you nose around the folders and find something you don't recognise, that's why.


Important note:
This is a style that will not work properly on IE6 or lower. Any other non-Microsoft browser from the last few years should have no problems. The reason for this is that all the GIFs are actually 24-bit PNGs with advanced gradient transparency, which IE browsers could not handle until recently. IE6 will show a grey box around each icon. However, if you search this site there are a few PNG hacks which might work for you and will allow older IE users to see graphics just the same as everyone else.

Why would I do this? Well, the advanced transparency means no jagged edges as you see with most transparent buttons (look at the rounded collapse buttons in vB's default theme if you don't know what I mean) and also means you can change the colours to anything you like and the buttons will still blend perfectly. It was done for my (and therefore your) ease of customisation down the road.

[TygerTyger]

Ok, a few people have been asking how I did the fuzz effect on my forum category and banners, which doesn't actually require you to add the effect to every image.

What you do is use the category icons template modification which is listed about 20 times here and instead set the category icon as the table background, then lay an image with a fuzzed transparent centre over the top of the background. Since IE6 and below can't handle the effect, it instead just uses the background image for those browsers.

Open your forumhome_forumbit_level1/2_nopost templates.

FIND:

<td><img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif" alt="" border="0" id="forum_statusicon_$forum[forumid]" /></td>
			<td><img src="$vboptions[cleargifurl]" alt="" width="9" height="1" border="0" /></td>

REPLACE WITH:

<if condition="is_browser('ie') AND !is_browser('ie', 7)">
				<td class="alt1" id="f$forum[forumid]">
					<img src="images/forumicons/$forum[forumid].png" alt="" border="0" id="forum_statusicon_$forum[forumid]" <if condition="$forum[statusicon] != 'new'">class="inlineimg fog"</if> />
				</td>
			<else />
				<td style="background:transparent url(images/forumicons/$forum[forumid].png) center center no-repeat;" class="alt1 inlineimg<if condition="$forum[statusicon] != 'new'"> fog"</if> id="f$forum[forumid]">
					<img src="$stylevar[imgdir_misc]/iconmask.png" alt="" border="0" id="forum_statusicon_$forum[forumid]" />
				</td>
			</if>

Then all you have to do is create an ordinary 50px x 50px picture for each forum section, give it the same name as the ID of the forum (so if your forum category has the ID 30, name the icon 30.png and then put all your icons in a directory called images/forumicons.

And you're done! If you want to make the icons fade out when there are no new posts like I've done, just add the following to your additional CSS definitions:

.fog { opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.40; }

[rice]

awesome...thanks a lot for your help.

cheers,

eric

[taumau]

How do you do that in one picture for each Forum Section? :surprised:

[vspro]

Perfect! I Love THis