How To Personalize your vBulletin Forum

OK, vBulletin is installed, how you make it look like your site and not vBulletins. Head for the Administration Control Panel (ACP) and Style Manager. Style Manager is where you can modify and change everything about vBulletin, from the logo and header image to font color to the pixels width separating different elements, or to change the overall background image.

Intimidating at first glance, it’s really pretty simple to use. To illustrate, the following few step will totally change the look of vBulletin.
Best Practice: Create a New Style
DO NOT modify the default style; instead create a new style in Style Manager. This will allow you to always be able to return to the default style, should you need to test functions later on and users can continue to use the old style while you develop the new one.

Change the Logo

First, let’s change the vBulletin logo to something more relevant. You’ll need to upload the new logo to the images folder. The default location of the logo image is public_html/images/misc/
URLJet Logo

Best Practice: Add a folder for your new style.
Add a new folder in your forums image directory to store the graphics for your new style. Trust me, files will be much easier to find if you need to make changes later.

With the new logo uploaded, login to the ACP and navigate to Style Manager. Click the dropdown list next to the style you’re editing and select “StyleVars”.

styvar

In the variable list on the left, scroll to StyleVars “titleimage” under the header “ImagePaths”. In the title image box on the right, enter the path for the logo and save. vBulletin uses relative paths so as long as you uploaded the new image to the images/misc/ folder, just replace the vB logo with yours. The header will automatically resize to fit. This is a good time to visit your forum to check your work. TIP: To quickly find the variable you’re looking for; use the search function in the upper left hand menu. Enter the name of the StyleVar you’re looking for and vBulletin finds it for you.

 

Change the Header Background

So, your new logo is in place, but it doesn’t go with the background and you want to change the background to match the header. Repeat the steps used to change the vBulletin logo, but instead of choosing the “titleimage” StyleVars, pick the “header_background” under the “Header” section.
hedbacki

The URLJet logo is a mix of blue and red and adding a white background makes it pop. In the background color box change the Hex color to white (#FFFFFF). This link will take you to a handy hex color picker. http://www.color-hex.com. If your background is more complex, you can also build one with the appropriate dimensions, upload it to your new style folder, then call out its location in this window.

 

 


Change the Background of the Tab Bar

Say you want something other than the vBulletin green here. Like the header background, vBulletin uses a repeating gradient image here as well.

navgrad

We made a black gradient. After uploading it to the style folder, head back to the Style Var Editor, look for the NavBar section and select “nav_tab_background” and save.

navtab

 

 

 

 

 

Time to practice….Check back and well have more tips on a vartrity of sujects from vBulletin to XenForo and WordPress

default
Post Written by

0 Comments

Leave A Reply


CommentLuv badge

%d bloggers like this: