Changing the Look of vBulletin

In this article we're going to examine ways to change how your vBulletin installation looks to the outside world.
The sky's pretty much the limit with what you can do with vBulletin, and there's no point going through the process of building a custom style here, because what you will want to do will be different to what we will do. So, instead, we'll offer you some hints, tips, and insights into style manipulation and creation for vBulletin.
In this article we will look at:

• • The role of styles and templates in vBulletin
• • How to modify the default style
• • How to add and edit a new style
• • How to distribute a style that you have created
• • How to upload a new style to your server and install it

Styling vBulletin
There are two ways that styles get created for vBulletin:

• • Modification of the default style
• • Creation of Custom styles

By far the most common method of creating styles for vBulletin is to start off with the default style (the blue and white style that you've seen so far in this article) and to make modifications to this style. You can think of this as a sort of 'feature-creep' or 'style-creep' of the original. This method is much easier and more straightforward than creating a style completely from scratch, and by using the default style as a starting point, you are making certain you haven't forgotten something or left something important out of the template.

Buy your way out of work!
You don't have to bother about creating templates for yourself. If you fire up your browser and search for "vBulletin styles" or "vBulletin templates", you will find literally thousands of examples. Most of these are commercial so that you have to buy them, but there are quite a number of templates freely available for download check out the vBulletin discussion forum for more details.
Template Lifecycles
A discussion board can go through one of two distinct template lifecycles. Which one it follows depends a lot on the administrator of the forum and what they are trying to achieve with it.
Lifecycle 1 Constant Change
This lifecycle is probably the more common of the two and probably accounts for many of the customized vBulletin boards you've come across.
This is where the administrator installs their copy of vBulletin and gets their forum going as quickly as possible. So, in order to minimize any delay between getting the discussion board installed and getting it working, they simply open up the forums for discussion using of the default style (or download and use another style that they fancy).
Then, with the board open and operational, the administrator sets about making incremental changes to the discussion board. They start off small, perhaps adding their logo, or changing a font color or table background. Then they start to make bigger, more significant changes. Then, at some point they probably install a hack or two onto the board.
By now the board is looking significantly different from the default that they installed maybe only a few weeks earlier. The cycle of development continues until one of three things happen:

• • A new version breaks the customized template.
• • The administrator wants to completely change the look of the site.
• • The administrator is happy with the end result. (Hmmm, don't think that ever happens!)

Lifecycle 2 Working Behind the Scenes
This is where the administrator installs the forum and then either opens it with a default skin or keeps it closed while they work on a brand new skin for the site. This is a little bit like the magician's trick where they pull away the curtain. Tada a dramatic unveiling.
There are several drawbacks associated with this method. The first, and most significant, is the forum downtime involved. If you only planning a few small tweaks to the default style, then you could be up and running in a reasonable period of time, ranging from a few minutes (for quick hacks and tweaks) to a few days (for something more involved).
Prolonged, unnecessary downtime is bad for a discussion board old members start to look for somewhere new to go, new members can't sign up, and your ranking in the search engine listings start to drop. Keep downtime to an absolute minimum.
Editing the Default Style

You've seen what you start with, so let's take a look at how to make some serious changes to the default style for the vBulletin template.

Changing Image Paths
There are a lot more images in a vBulletin installation than just the main logo. There are, in fact, over 200 images contained in 13 folders within the main images folder.

You can change the default location of eight of these folders:

• images/buttons This folder contains all the button images.

• images/statusicon This folder contains all the icons that are used to represent the status of forums, threads, and posts.

• images/attach This folder contains the various icons that are used to represent different attachment file types.

• images/misc This folder contains miscellaneous images.

• images/editor This folder contains the button and interface images for the vBulletin editor.

• images/polls This folder contains the images used to build the bars in the poll voting results page.

• images/rating This folder contains the images used to illustrate the rating applied to a thread.

• images/reputation This folder contains the small images used to display a user's current reputation.

Upload the new images to new folders on the web server. You can move forward some of the defaults if you've not made an entire set of new images. However, if your new images are dramatically different from the old ones, you should make an effort to change all the images odd styling of images can be confusing for the user.
Once the new images are uploaded, change the paths, and click on Save. The new images will immediately appear on the board.
Other Editable Elements
Much of the default style can be edited through the All Style Options page. Here are the categories that the different sections have been grouped into:

• • Common Templates
• • Sizes and Dimensions
• • Image Paths
• • Miscellaneous
• • Body
• • Page Background
• • <td>, <th>, <p>, <li>
• • Table Border
• • Category Strips
• • Table Header
• • Table Footer
• • First Alternating Color

• Second Alternating Color

• • WYSIWYG Editor
• • Input Fields
• • Buttons
• • <select> Menus
• • Small Font

• Time Color

• • Navbar Text
• • Highlighted Font
• • Panel Surround
• • Panel (Forms)
• • <legend>
• • Popup Menu Controls
• • Popup Menu Body
• • Popup Menu Option Row
• • Popup Menu Highlighted Option
• • Forum Jump Menu
• • Additional CSS Definitions
• • Text Editor Control Styles
• • Toolbar Menu Options

Each one of these categories is home to several changes and tweaks that you can make to the styling of your board.
For example, let's change the background color of the body of the forum page. In the Body section, type #aa0016 (a dark red) into the Background box. You'll see the color of the tile change when you do this. Then click Save CSS for the Body section. (Alternatively, you can click Save at the very bottom of the Style Manager page to save changes to multiple sections). Notice that the text you entered for the background attribute is now shown in red indicating that you've made a customization to that style. To undo the change, you can either type the original value in the box, or you can use the revert option at the bottom of the Body section.