Chapter 7
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.
To carry out these modifications, click on Styles & Templates in the left-hand menu, and then click on Style Manager. This brings up the Style Manager window, which we first met in Chapter 3.
As we saw in Chapter 3, if you click on the Go button, then you are taken to a very large window called All Style Options window. (In Chapter 3 we saw how to use this page to change your board's logo.)
155
Changing the Look of vBulletin
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.
156
Chapter 7
•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
157
Changing the Look of vBulletin
•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.
You can change further elements of the page by editing the CSS attributes for those sections of the board. (You can also use the CSS selector at the bottom left of each section of the Style Manager page and then use a CSS editor to locate that section in the HTML source code.)
158