vBulletin Manual - Adding a Style Set

When you click Add Style in the control panel, you will see the following form:

This form allows you to enter a name for your new style set, as well as choose which template and replacement sets to use for the style. You can also choose whether to let users choose to use this style set or not. If you'd like to use the same colors and fonts for your new template set, then you can change the option for Replacement Set to Default. You could also set the Template Set option to Default, which would allow you to use the exact same layout and design for your new template set, just with a new color scheme. I chose not to do either of these, so created both a new template set and replacement set. This will allow me to create a totally different design in my new style set.

Once you have done that, you will see a screen similar to this:

The first thing you need to do with your template set is to set up the fonts and colors to your liking. So click the '[fonts/colors/etc]' link next to your new style set. You'll then see a long page that allows you to set the header, footer, table widths, fonts and colors, among other things, for your new style set. It's the exact same page to the one you used when you first set up your forum. Once you're happy with these settings, click the 'Save Changes' button at the bottom. You will then be taken back to the same page, which will this time have all of your custom values filled in. If you decided not to modify the colors (you wanted to use a different design with the same colors), then just leave the options exactly as they are.

The next step is to modify some templates for the new style. If you chose to just use new colors (not a different design) for your new style set, then you can skip this step. Click the '[edit templates]' link at the very top of the page to be taken to the template editor. You should see a screen which begins like this:

Your new template set will be expanded by default. This functions in exactly the same way as the main template editor, which you will probably already have used to customise your forum's layout. Any templates you change here will only take effect in your new style set, not the default style set which users are viewing at the moment.

Once you're happy with the changes, open a new browser window and visit your forums home page. Click on the user cp icon at the top, and go to Modify Options. Choose your new style set from the dropdown list on that page, and then click Submit Modifications. This will show you your forums, but in the new style set you have created. If you want to make any more changes, go back to the control panel and click either Styles > Modify > [fonts/colors/etc] to change the fonts or colors, or Templates > Modify to change the templates. Go back to your forums and hit Refresh to see how your latest changes look. When you're happy with the changes it's time to start telling users about the new style set!

You can also give users a direct link to see the new style set. The link will be in the form:

http://www.example.com/forums/index.php?styleid=x

You can get the styleid of your new style set by hovering your mouse cursor over the [fonts/colors/etc] button for your new style in the Modify Styles section of the control panel, and looking down in your browser's status bar to see the address it is pointing to. For example:

Hover your mouse cursor here:

And then look in the Status Bar of your browser:

Look for the dostyleid section of that link - the last number in the line. In this case it is 2, so you would replace x with 2 on the web address above. Also remember to replace the URL with your forum URL!