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.)
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/buttonsThis folder contains all the button images.images/statusiconThis folder contains all the icons that are used to represent the status of forums, threads, and posts.images/attachThis folder contains the various icons that are used to represent different attachment file types.images/miscThis folder contains miscellaneous images.images/editorThis folder contains the button and interface images for the vBulletin editor.images/pollsThis folder contains the images used to build the bars in the poll voting results page.images/ratingThis folder contains the images used to illustrate the rating applied to a thread.images/reputationThis 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.
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.
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.)
When you are making changes to a style, two things are paramount:
- That the changes you think you've made are actually carried out
- That the changes you've made to the style haven't been detrimental to the discussion board as a whole
In order to make sure that things work smoothly, it's recommended that you follow these simple rules:
- Make a note of any changes you make. Keep a text file open and list the changes there.
- Make the minimal number of changes needed at any one time. Making lots of changes at once makes undoing a specific change tricky.
- Browser crashes, losing Internet connectivity, or power outages can cause you to lose any unsaved changes you've made. So, to prevent such losses, save your changes often.
- Check the effect that your changes have had on the discussion board. Are the changes what you expected them to be? Are you getting nearer to your goals or further away?
- If you make changes that have an adverse effect on the discussion board, stop what you are doing immediately, and check the changes you made—did you make a mistake, or is something unexpected happening? If you can't solve the problem quickly, then undo the changes using the revert option for that section in the style manager, and try again.
- The best place to experiment with changes and modifications to your discussion board is on your test installation—you can then migrate the changes to the live discussion board.