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.)

Some Tips about Editing Styles
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.

Adding a New Style
So far, we've looked at modifying the existing default style, but what about creating a whole new style?
Easy!
Again, start off at the All Style Options page. Take a look at what's below the buttons. Do you see the link marked Add New Style?
It's amazing how many people miss that altogether and simply cannot find a way to make a new style. (Many people resort to using the Add Child Style option in the drop-down box instead.)

You can now fill in the following details of the new stylesheet:

• • Parent Style This allows you to choose whether the new style has a parent style or is itself a parent style. (A parent style has child styles based upon it.)
• • Title This is the name of the new style.
• • Allow User Selection This determines whether the new stylesheet is selectable by the board users from the main forum page and the UserCP. Set this to No initially if you don't want others to see your 'work in progress'.
• • Display Order This lets you choose the display order of the styles as displayed in Style Manager and the Quick Style Chooser in the forum.

The Add New Style window should now look like this:

In case you are wondering, the radio buttons just below the style name indicate whether it is selectable by the end users.
OK, now you have your new style, it's time to do something with it!
Editing the Style
The Style Manager window now looks a little different with two styles in there waiting to be edited.

Another interesting feature is that, when you hover the cursor over the name of one of the styles, it gives you the ability to view the discussion board using that particular style.
This is done using a carefully crafted hyperlink:
http://www.example.com/vb/index.php?s=&styleid=4
You can now edit the new style in the same way that you edited the old one. What you will notice initially is that your new style is in fact the old style it's just a rendition of the default style. However, this allows you to work on the style and keep the changes separate from the style in use on the discussion board.
Fonts
Be careful about making too many changes to the fonts used remember that fonts need to be installed on the user's computer too. By default, a number of fonts are specified, and if the first one is unavailable, another is used. Font types are also specified to cover a broad range of different fonts.
Be careful with fonts if the font you specify is not available and you don't specify alternatives, your forum can end up looking very strange indeed!

Save Often!
Remember, save your changes often!
Saving the Style

Right, you've made some changes to your new style. The next thing you need to do is back up the changes just in case something goes wrong. You don't believe that things can go wrong? You think your forum is safe on the server? Think again! A whole host of things can, and do, go wrong:

• • A cataclysmic failure of the server
• • A vanishing web host
• • A corrupted database
• • A hacker attack
• • Accidental deletion
• • Wipe-out by installing a new version
• • The unexpected fire, flood, aliens …

The best place to keep a backup is not on the server but on your PC or an external storage medium, so make a copy and keep it safe (perhaps on a USB flash memory device or a CD).
Downloading the Style
The Style Manager page is the place to go when you want to download your style. In the drop-down box next to the style you want to download, you'll find Download.

If you click on Cancel, then a file that contains all the changes to the style will be downloaded.
If you click OK to access the advanced options, you get the ability to change the name of the file and what is downloaded.

The XML file contains all the changes that have been made to the style. Here's a small sample of an XML file:
<?xml version="1.0" encoding="ISO-8859-1"?>
<style name="NewStyle" vbversion="3.5.4" type="custom">
<templategroup name="CSS Special Templates">
<template name=".button" templatetype="css" date="1117789818" username="Administrator" version=""><![CDATA[a:4:{s:10:"background";s:0:"";s:5:"color";s:0:"";s:4:"font";a:3:{s:5:"style";s:0:"";s:4:"size";s:4:"10px";s:6:"family";s:70:"verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif";}s:5:"EXTRA";s:0:"";}]]></template>
<template name=".navbar" templatetype="css" date="1117789818" username="Administrator" version=""><![CDATA[a:7:{s:10:"background";s:0:"";s:5:"color";s:0:"";s:4:"font";a:3:{s:5:"style";s:0:"";s:4:"size";s:4:"10px";s:6:"family";s:70:"verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif";}s:5:"EXTRA";s:0:"";s:6:"LINK_N";a:3:{s:10:"background";s:0:"";s:5:"color";s:0:"";s:15:"text-decoration";s:0:"";}s:6:"LINK_V";a:3:{s:10:"background";s:0:"";s:5:"color";s:0:"";s:15:"text-decoration";s:0:"";}s:6:"LINK_M";a:3:{s:10:"background";s:0:"";s:5:"color";s:0:"";s:15:"text-decoration";s:0:"";}}]]></template>
<template name=".smallfont" templatetype="css" date="1117789818" username="Administrator" version=""><![CDATA[a:4:{s:10:"background";s:0:"";s:5:"color";s:0:"";s:4:"font";a:3:{s:5:"style";s:0:"";s:4:"size";s:4:"10px";s:6:"family";s:70:"verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif";}s:5:"EXTRA";s:0:"";}]]></template>
<template name=".tcat" templatetype="css" date="1117789818" username="Administrator" version=""><![CDATA[a:7:{s:10:"background";s:65:"#869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left";s:5:"color";s:7:"#FFFFFF";s:4:"font";a:3:{s:5:"style";s:4:"bold";s:4:"size";s:3:"9pt";s:6:"family";s:70:"verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif";}s:5:"EXTRA";s:0:"";s:6:"LINK_N";a:3:{s:10:"background";s:0:"";s:5:"color";s:7:"#ffffff";s:15:"text-decoration";s:4:"none";}s:6:"LINK_V";a:3:{s:10:"background";s:0:"";s:5:"color";s:7:"#ffffff";s:15:"text-decoration";s:4:"none";}s:6:"LINK_M";a:3:{s:10:"background";s:0:"";s:5:"color";s:7:"#FFFF66";s:15:"text-decoration";s:9:"underline";}}]]></template>
This file is a plain text file, and it is editable using a text editor, but as you can see, it isn't a place where you would want to go and make many changes!

Making the New Style into the Default
OK, you've created a new style, and you want to make it available as the default. How do you do this?
Easy! You may have noticed some checkboxes at the top left of the Style Manager window.

The style currently in use is checked. To change the style in use, just swap the check marks around, and click on the button marked Save Display Order.

The new style will now be available, and the old style won't be available. If you want to make both styles available, check both options and click on Save Display Order.

This will now make both styles available to the users of the board, and they can choose which one they want to use.
Distributing a Style
You've made a great style, and you think that others might like to use it. You can choose to make it available for free, or you could decide to sell it. (Remember though that selling a style usually means having to provide the buyer with installation support.)

But how do you package it?
A style consists of the following elements:

• • An XML file containing the changes
• • All the custom images that go with it

To create a distribution package for a style, first take the custom XML file that you created and place it in a folder. (Call the folder the same name as the style.)
Then, download all the folders that contain custom images for the style from the web server. Make sure that you get the folders and the images. So, for our earlier example, we'd need to download the following folders:

• • images/custom/buttons
• • images/custom/statusicon
• • images/custom/attach
• • images/custom/misc
• • images/custom/editor
• • images/custom/polls
• • images/custom/rating
• • images/custom/reputation

Place these folders and their contents into the folder containing the XML file and you're done. You can package up the whole thing into a zip file for convenience if you want it also helps to keep all the files together in one place.
Installing a New Style
Installing a new style is simple. Follow these simple steps:

• • First, find the style that you want to use.
• • If the style has been packaged, extract the contents of the zip file.
• • Upload the folders containing images into the images folder on the web server. Do not upload the XML file.
• • Next, click on Styles & Templates in the left-hand menu, and then click on Download/Upload Styles.
• • This takes you to the interface that you saw earlier when downloading the XML file. This time, we're interested in uploading it.

• Click on the Browse… button, and go in search of the XML file.

• • Make sure that (Create New Style) is selected in the Merge Into Style drop-down box.
• • Scroll to the bottom of the page and click on Import.
• • The import process will run and import the style into vBulletin.

And that's all there is to it!
Summary
In this article we've looked at how to style a vBulletin installation. If you're like most people, this is something you're likely to want to take your time over and work on to get right. It's a good idea not to rush things and to work methodically, checking often that the changes result in the look that you expect.
Also, remember to save regularly and make regular backups don't rely on the web host to do this for you. If you've spent time making modifications and changes. then take the time to keep them safe!
Finally, you might also want to consider making your style available to others this is both quick and simple with vBulletin.
Happy styling!