Styling vBulletin 3.8/Interactive Profiles and CSS

My new remade article, this was originally on vBulletin.org, but has been rewritten since the original was posted as a modification and then later moved to Articles. Still, it's a list of styles for Interactive Profiles/vBulletin Blog/vBulletin Forum Customisations, and these will work best on vBulletin 3.8 (does this work on vBulletin 4, I don't know)

First up, the list itself.

Green Legend

Code:

Code:

body {
background:#006600;
color:#FFFFFF;
}
.tcat {
background:#339900;
color:#ffffff;
}
.thead {
background:#66FF00;
color:#336666;
}
.panelsurround {
background: #33FF33;
color: #000000;
}
.page {
background:#006600;
color:#FFFFFF;
}
.tfoot {
background:#66FF00;
color:#FFFFFF;
}
.usercpoptions {
background:#66FF00;
color:#FFFFFF;
}
.vbmenu_popup {
background:#66FF00;
color:#FFFFFF;
}
.vbmenu_control {
background:#66FF00;
color:#FFFFFF;
}

Shroob Invasion

Code:

Code:

body {
background:#990099;
color:#FFFFFF;
}
.tcat {
background:#660066;
color:#FFFF33;
}
.thead {
background:#FF33CC;
color:#FFFFFF;
}
.tborder {
border-style: double;
border-width: thick;
}
.page {
background:#990099;
color:#FFFFFF;
}
.vbmenu_control {
background:#660066;
color:#FFFFFF;
}

Ocean Blue

Code:

body {
background:#66FFFF;
color:#000000;
}
.tcat {
background:#0066CC;
color:#FFFFFF;
}
.thead {
background:#3399FF;
color:#FFFFFF;
}
.tborder {
border-style: double;
border-width: thick;
background: #FFFFFF;
}
.page {
background:#66FFFF;
color:#000000;
}
.vbmenu_control {
background:#0066CC;
color:#FFFFFF;
}
.panel {
background:#6699FF;
color:#000000;
}
.panelsurround {
background:#666666;
color:#000000;
}
.fieldset {
background:#6699FF;
color:#000000;
}
.alt1 {
background:#6699FF;
color:#000000;
}
.alt2 {
background:#33FFFF;
color:#000000;
}
.tfoot {
background:#0066CC;
color:#FFFFFF;

Ocean Blue

Code:

Code:

body {
background:#66FFFF;
color:#000000;
}
.tcat {
background:#0066CC;
color:FFFFFF;
}
.thead {
background:#3399FF;
color:FFFFFF;
}
.tborder {
border-style: double;
border-width: thick;
background: #FFFFFF;
}
.page {
background:#66FFFF;
color:#000000;
}
.vbmenu_control {
background:#0066CC;
color:#FFFFFF;
}
.panel {
background:#6699FF ;
color:#000000;
}
.panelsurround {
background:#666666;
color:#000000;
}
.fieldset {
background:#6699FF;
color:#000000;
}
.alt1 {
background:#6699FF;
color:#000000;
}
.alt2 {
background:#33FFFF;
color:#000000;
}
.tfoot {
background:#0066CC;
color:FFFFFF;

Castle Bleck

Code:

Code:

body {
background:#999999;
color:#FFFFFF;
}
.tcat {
background:#999999;
color:#FFFFFF;
}
.thead {
background:#666666;
color:#FFFFFF;
}
.tborder {
border-style: double;
border-width: thick;
background: #FFFFFF;
}
.page {
background:#000000;
color:#FFFFFF;
}
.vbmenu_control {
background:#000000;
color:#FFFFFF;
}
.panel {
background:#000000;
color:#FFFFFF;
}
.panelsurround {
background:#666666;
color:#000000;
}
.fieldset {
background:#000000;
color:#FFFFFF;
}
.alt1 {
background:#000000;
color:#FFFFFF;
}
.alt2 {
background:#000000;
color:#FFFFFF;
}
.tfoot {
background:#999999;
color:#FFFFFF;
}
.navbar {
background:#000000;
color:#FFFFFF;
}
.navbar a {
background:#000000;
color:#FFFFFF;
}
.navbar a:visited {
background:#000000;
color:#FFFFFF;
}

Desert Sands:

Code:

Code:

body {
background:#FFFF33;
color:#666666;
}
.tcat {
background:#CC9900;
color:FFFFFF;
}
.thead {
background:#CCCC33;
color:#000000;
}
.tborder {
border-style: double;
border-width: thick;
background: #CC9900;
}
.page {
background:#FFFF33;
color:#666666;
}
.vbmenu_control {
background:#CC9900;
color:#FFFFFF;
}
.panel {
background:#FFFF33;
color:#666666;
}
.panelsurround {
background:#CCCC00;
color:#666666;
}
.fieldset {
background:#FFFF33;
color:#666666;
}
.alt1 {
background:#FFFF00;
color:#666666;
}
.alt2 {
background:#FFFF33;
color:#666666;
}
.tfoot {
background:#CC9900;
color:#FFFFFF;
}
.navbar {
background:#FFFF00;
color:#666666;
}
.navbar a {
background:#FFFF00;
color:#666666;
}
.navbar a:visited {
background:#FFFF00;
color:#666666;
}
.vbmenu_option {
background:#CC9900;
color:#FFFFFF;
}

Pure Nothingness:

For those who like a truly plain profile style, this is purely white mainly with grey for other colours.

Code:

Code:

body {
background:#FFFFFF;
color:#000000;
}
.tcat {
background:#999999;
color:#000000;
}
.thead {
background:#CCCCCC;
color:#000000;
}
.tborder {
border-style: single;
border-width: thick;
border-color: #666666;
background: #666666;
}
.page {
background:#FFFFFF;
color:#000000;
}
.vbmenu_control {
background:#FFFFFF;
color:#000000;
}
.panel {
background:#FFFFFF;
color:#000000;
}
.panelsurround {
background:#CCCCCC;
color:#000000;
}
.fieldset {
background:#FFFFFF;
color:#000000;
}
.alt1 {
background:#FFFFFF;
color:#000000;
}
.alt2 {
background:#FFFFFF;
color:#000000;
}
.tfoot {
background:#666666;
color:#000000;
}
.nav {
background:#FFFFFF;
color:#000000;
}

The Seaside:

Yellow type and blue profile done on request for Loco.M.

Code:

Code:

body {
background:#66FFFF;
color:#000000;
}
.tcat {
background:#FFFF00;
color:#000000;
}
.thead {
background:#FFFF33;
color:#000000;
}
.tborder {
border-style: double;
border-width: thick;
background: #FFCC00;
}
.page {
background:#66FFFF;
color:#000000;
}
.vbmenu_control {
background:#0066CC;
color:#FFFFFF;
}
.panel {
background:#6699FF ;
color:#000000;
}
.panelsurround {
background:#FFCC00;
color:#000000;
}
.fieldset {
background:#6699FF;
color:#000000;
}
.alt1 {
background:#6699FF;
color:#000000;
}
.alt2 {
background:#33FFFF;
color:#000000;
}
.tfoot {
background:#FFFF33;
color:#000000;
}

Dimension D

Based on a videogame (Super Paper Mario) and extremely bright colours because of that.

Code:

Code:

body {
background:#009900;
color:#000000;
}
.tcat {
background:#006600;
color:#000000;
}
.thead {
background:#FFFF33;
color:#000000;
}
.tborder {
border-style: single;
border-width: thick;
background: #99FF00;
}
.page {
background:#009900;
color:#000000;
}
.vbmenu_control {
background:#66FF00;
color:#000000;
}
.panel {
background:#00FF00 ;
color:#000000;
}
.panelsurround {
background:#99FF00;
color:#000000;
}
.fieldset {
background:#00FF00;
color:#000000;
}
.alt1 {
background:#00FF00;
color:#000000;
}
.alt2 {
background:#99FF66;
color:#000000;
}
.tfoot {
background:#66FF00;
color:#000000;
}

Dark Land
Code:

Code:

body {
background:#000000;
color:#FFFFFF;
}
.tcat {
background:#993300;
color:#000000;
}
.thead {
background:#CC3300;
color:#000000;
}
.tborder {
border-style: ridge;
border-width: thin;
background: #FF3300;
}
.page {
background:#000000;
color:#FFFFFF;
}
.vbmenu_control {
background:#666666;
color:#000000;
}
.panel {
background:#999999;
color:#000000;
}
.panelsurround {
background:#FF3300;
color:#000000;
}
.fieldset {
background:#999999;
color:#000000;
}
.alt1 {
background:#666666;
color:#FF3300;
}
.alt2 {
background:#666666;
color:#000000;
}
.tfoot {
background:#663300;
color:#000000;
}
.navbar {
background:#666666;
color:#FF3300;
}
.navbar a {
background:#666666;
color:#FF3300;
}
.navbar a:visited {
background:#666666;
color:#FF3300;
}
.vbmenu_option {
background:#999999;
color:#FF3300;
}

Rainbow

Code:

Code:

 body {
background:#000000;
color:#FFFFFF;
}
.tcat {
background:#FF0000;
color:#000000;
}
.thead {
background:#0000FF;
color:#000000;
}
.tborder {
border-style: single;
border-width: thick;
background: #00FF00;
}
.page {
background:#000000;
color:#FFFFFF;
}
.vbmenu_control {
background:#FFFF00;
color:#000000;
}
.panel {
background:#660066;
color:#000000;
}
.panelsurround {
background:#3300CC;
color:#000000;
}
.fieldset {
background:#660066;
color:#FFFFFF;
}
.alt1 {
background:#FFFFFF;
color:#000000;
}
.alt2 {
background:#000000;
color:#FFFFFF;
}
.tfoot {
background:#FF6600;
color:000000;
}
.navbar {
background:#FFFFFF;
color:#000000;
}
.navbar a:link {
background:#FFFFFF;
color:#000000;
}
.navbar a:visited {
background:#FFFFFF;
color:#000000;
}
.vbmenu_option {
background:#00FFFF;
color:#000000;
}

Luigi's Mansion (based on game and location of same name)

Code:

Code:

body {
background:#336699;
color:#000000;
}
.tcat {
background:#006600;
color:#000000;
}
.thead {
background:#00CC66;
color:#000000;
}
.tborder {
border-style: single;
border-width: thick;
background: #FFFFFF;
}
.page {
background:#336699;
color:#000000;
}
.vbmenu_control {
background:#FFCC33;
color:#0066CC;
}
.panel {
background:#009933;
color:#FFFFFF;
}
.panelsurround {
background:#99FF00;
color:#;
}
.fieldset {
background:#009933;
color:#000000;
}
.alt1 {
background:#336633;
color:#FFFFFF;
}
.alt2 {
background:#66CC66;
color:#FFFFFF;
}
.tfoot {
background:#66FF00;
color:#000000;
}
.navbar a:link {
background:#336633;
color:#0066CC;
font-weight: bold;
}
.navbar a:visited {
background:#336633;
color:#0066CC;
font-weight: bold;
}

Desire of Darkness

Code:

Code:

body {
background:#993399;
color:#FFFFFF;
}
.tcat {
background:#663366;
color:#000000;
}
.thead {
background:#996699;
color:#000000;
}
.tborder {
border-style: solid;
border-width: thick;
background: #FFFFFF;
}
.page {
background:#993399;
color:#FFFFFF;
}
.vbmenu_control {
background:#663366;
color:#FFFFFF;
}
.panel {
background:#996699;
color:#000000;
}
.panelsurround {
background:#666666;

Finally, something not on vBulletin.org, here's how to move over the styles to vBulletin 3.8's blog/forum profiles, with screenshots:

Code:

body {
background:#990099;
color:#FFFFFF;
}
.tcat {
background:#660066;
color:#FFFF33;
}
.thead {
background:#FF33CC;
color:#FFFFFF;
}
.tborder {
border-style: double;
border-width: thick;
}
.page {
background:#990099;
color:#FFFFFF;
}
.vbmenu_control {
background:#660066;
color:#FFFFFF;
}

The example we'll use here is called Shroob Invasion, and if you want a preview of the style, it's a really old non default style you can use on my own forum, as shown here:

First of all, under Main, you'd leave Font Family, Padding and Background Image fields alone. They're irrelevant. You'd then change Text Color to #FFFFFF (or just the word white, doesn't matter), and Background Color to #990099, which is a darkish shade of purple. Yes, this style is dated, but it's an example, and the over the top colour scheme comes from Mario and Luigi Partners in Time, where the enemy faction uses bright purple and green colours for every single building, enemy, character and even their home planet.

Oh, and a quick off topic note... every single style on the list has been designed based on the colour scheme in an RPG game, back ages ago. For that reason, many are extremely bright colours, and the Castle Bleck style is deliberately monochrome. Yes, it's possible to have a more depressing style than the worst corporate website in existance, because the entire thing is in pure black, white and grey. Just like the game then:

[noparse]http://www.youtube.com/watch?v=WvSCJ4KGN90&feature=related[/noparse]

But back to the point, this is an example, you can choose whatever colour scheme you like, it's just about how you add them.

Still, for the next part, Major Block Headers. As far as I know, these are what you call 'tcat' in the CSS for the page, so use the colour scheme given for that. It's pretty much where the fancy gradients on the forum index are defined in the default vBulletin style.

Next you have Minor Block Headers, aka tcat in the CSS. Use these values:

#FF33CC; For the background
#FFFFFF; For the text

For Block Footers, use the same as for Tcat or thead.

Primary and Secondary Content areas are what's called 'alt1' and alt2' in the CSS. Use the same as the body colour if they're both meant to be the same, like with this style and the Castle Bleck style, but for custom styles, use a different colour for each.

The menu control refers to the part saying 'Page 1 of [whatever]' on the Friends and Visitor Messages tabs. It also refers to the menu with the links saying stuff like 'calendar' and 'community' and 'blogs', if you've made that small modification given on vB.org to include that part of the page in what can be customised.

Edit that to what is said in the CSS for the relevant style.

Ignore the bit that says 'page'. It's obsolete. You see, the difference is, these were originally written for a modification for vBulletin 3.6, where the styling of the profile affected the entire page on the site, background and all. 'page' refers to the general background on the forum structure as a whole.

If the last bit was confusing, I also wrote an answer on vBulletin.org, saying this:

Set Main to what .page is set to there, and then borders to what tborder is set as. You then set alt1 and alt2 as the Primary and Secondary Content areas, and controls to the fieldset or panel class colours found in my profile styles. I then set my tcat and thead sections to the same colour, which isn't quite faithful but looks good enough #333333 as the background colour and #FFFFFF as the font colours. Heck, to mimmick the style I presented there, set all text and links as white colour, and the table footer as equivalent to the headers. A preview of the 'converted' style version can be found below:

Finally, some tips from yet another article I wrote:

1. You should ALWAYS specify the font and background colour for both the body tag and page section. Why? Because otherwise the other will default to the usual style and will often horribly clash with the custom style you are trying to implement.
2. The part of the page which has the options to Erase Customisation or Supress Customisation is of class vbmenu_control so if you style that class, it will also effect the text at the top of the profile! This is important to remember, as I have found that you could accidentally make these options totally invisible.
3. You should keep colours at most below 5 different colours/tones. Too much makes the profile practically rainbow coloured.
4. Make sure always that you specify colours and background colours for the page and body sections that are different from each other because the copyright is also within these classes, and must not be made invisible because of the vBulletin license.

This post has been promoted to an article

 

Thank you!