Xddd

vB4.1.2: Styling Your Forum
9 easy changes you can make using StyleVars to remake the look of your forum
March 17, 2011 vBulletin Fei Leung

vB4.1.2 – Skinning Your Forum
Table of Contents

2011

Pro Tip: Create a New Style .................................................................................................................................. 3

Introduction...............................................................................................................3 Step 1: Changing the Logo ...........................................................................................4 Step 2: Changing the Header Background ....................................................................6 Step 3: Changing the Background of the TabBar..........................................................7 Step 4: Changing the Background ................................................................................9

Pro Tip: Create an image folder for your style ............................................................................................. 5 Pro Tip: Finding a StyleVar................................................................................................................................... 8

Step 5: Removing the Space between the Title and the Navigation Bar ...................... 10 Step 6: Changing the Headers .................................................................................... 11 Step 7: Changing the Footers ..................................................................................... 12
Pro Tip:Finding the StyleVars You’ve Modified ....................................................................................... 15

Step 8: Changing the Forum Footer Link Color ........................................................... 13 Step 9: Changing the Body Background ..................................................................... 14 Conclusion................................................................................................................ 16 Appendix I – Getting to the ACP ................................................................................ 17

Pro Tip: Downloading & Distributing Your Style ..................................................................................... 16

Page 2

vB4.1.2 – Skinning Your Forum
Introduction

2011After installing vBulletin, you might want to make some changes to the style in order to customize the forum to match your website. You can do that through the Administration Control Panel (ACP) and the Style Manager. 1 The Style Manager allows you to modify and change everything about your vBulletin, from the font color to the pixels width separating various elements to the background images for yourheader. It might look a little intimidating at first, will all the terms and related forms, but it’s really quite simple to use. To demonstrate, let me show you how I totally changed the look of my vBulletin in nine easy steps. Rather then modify the default style, create a new style in the Style Manager.

Pro Tip: Create a New Style

1

If you don’t know how to get to the ACP, pleaseconsult Appendix 1 at the end of the document for detailed instructions.
Page 3

vB4.1.2 – Skinning Your Forum
Step 1: Changing the Logo

2011

The first thing I wanted to do was get rid of the vBulletin logo. I uploaded the graphic I wanted to use into the images folder on my server:

Once that was done, I logged in to the ACP and navigated to the Style Manager. I clicked on the dropdownlist beside the style I wanted to edit and selected the option “StyleVars” before clicking the button.

From the variable list to the left, I selected the StyleVars “titleimage” from beneath the header “ImagePaths”. In the form that appeared to the right, I entered the path for my logo and clicked the save button. This is what it looks like:

Page 4

vB4.1.2 – Skinning Your Forum

2011...