No announcement yet.

10 Easy Steps to Styling Your Forum


  • 10 Easy Steps to Styling Your Forum

    10 easy changes you can make using StyleVars to redesign the look of your forum. This article is contributed by Fei Leung at Internet Brands.


    After 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 Variable Editor. The Style Variable Editor 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 your header.
    It might look a little intimidating at first, with all the terms and 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 ten easy steps.

    Note: Pro Tip: Create a New Style
    Rather then modify the default style, create a new style in the Style Manager. This way, you can keep users on the old style while you work on the new style.

    Step 1: Changing the Logo

    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:

    <!-- ##phrase_image_larger_version_x_y_z_0## -->

    Once that was done, I logged in to the ACP and navigated to the Style Manager. I clicked on the dropdown list beside the style I wanted to edit and selected the option "StyleVars". The ACP automatically took me to the Style Variation Editor. If yours doesn’t, you might want to click on the "Go" button.
    <!-- ##phrase_image_larger_version_x_y_z_1## -->

    From the variable list to the left, I selected the StyleVars "titleimage" under the header "Image Paths". It’s a little over half-way down the scrolling list. In the form that appeared to the right, I entered the path for my logo and clicked the save button. This is what the result looked like:
    <!-- ##phrase_image_larger_version_x_y_z_2## -->

    As you can see, my logo replaced the vBulletin logo and the header automatically resized to fit around it, but the background didn’t match the one in my logo, which takes us to step 2.

    Note: Pro Tip: Create an Image Folder for your Style
    Create a new folder in the image directory of your forum to house the graphics for your new style. This makes the files easier to locate just in case you need to re-upload files to get your design to look just right!

    Step 2: Changing the Header Background

    Now that I had my logo in place, I wanted to change the background of the header to match. I followed the same steps that I used to change the vBulletin logo, but instead of selecting the "titleimage" StyleVars, I chose the "header_background" one beneath the "Header" header of the scrolling list.
    <!-- ##phrase_image_larger_version_x_y_z_3## -->

    <!-- ##phrase_image_larger_version_x_y_z_4## -->As you noticed, the background for my logo has a color gradation from a darker blue to a lighter blue. In order to match it, I needed to upload an image file with the same height and pattern as the one in the logo. (See image to the left.) From there, it was a simple matter of entering in the location of the image in "Background Image" textbox and clicking the save button.

    The result looked much better then before:
    <!-- ##phrase_image_larger_version_x_y_z_5## -->

    Note: Pro Tip: Matching the Header Background Color
    Even when you have a gradient as a background, it’s a good idea to set a background color to fill in all those spaces that your gradient doesn’t cover. To do this, use the eyedropper in a graphics-editing program to select the color you desire. There should be box that gives you the html code for that color. Enter it in to the “Background Color” textbox and it should give your header a cleaner look.

    But I didn’t want to stop there. So, I moved on to step 3: Changing the Tab Button Background.

    Step 3: Changing the Background of the Tab Bar

    Although the original color scheme for the tab bar matched my header, I wanted it to pop a little more. I took a good look at it and realized that, like the background for my header, vBulletin used a repeating gradient image as well!
    After uploading the gradient I wanted to use, I went back to the Style Variation Editor and selected the "navbar_tab_background" variable.

    <!-- ##phrase_image_larger_version_x_y_z_6## -->

    With the location of the gradient entered and saved, my navbar now looked like this:

    <!-- ##phrase_image_larger_version_x_y_z_7## -->

    You can stop here if you’re satisfied with how the page looks. The following steps will outline the other small tweaks you can use to further modify the look of your forum.

    Note: Pro Tip: Matching the Selected Tab to the Tab Bar
    If you want the selected tab’s background to match the rest of the navbar, you’ll want to go and enter the same address for the “navbar_tab_selected_background”. You can find both of these beneath the “NavBar” header of the scrolling list.

    Posting comments is disabled.

About the Author


Wayne Luke A curious juxtaposition of nature, technology and sustainability. Find out more about Wayne Luke

Article Tags


administration (1) advanced (5) android (2) api (29) array (17) beginner (17) blog (4) calendar (2) cms (2) forum (3) forum rules (1) forums (4) Intermediate (7) iphone (3) list (1) mapi (30) member list (1) methods (10) mobile (34) security (2) skimlinks (1) style (2) threads (4) vb5howto (5) vBulletin (5)

Latest Articles


  • Managing CMS Section and Content
    by Don Kuramura
    Here's a quick Visual Guide on how Manage Sections in the new CMS.

    1. Editing a Section: If you have permissions to manage a Section, as you hover over the Section title, a pencil icon will display.

    After clicking the pencil icon, you will be taken to the Section Edit page. Here's what you will see:

    2. Section Name:
    Enter the Section Name
    3. SEO URL Alias: This is the SEO Friendly URL. By default, if this is blank, the system will automatically copy the section title.
    4. Section Layout: For each section you can define an individual section layout.
    Tue 11th Mar '14, 2:04pm
  • How to Create a New Article
    by Don Kuramura
    Here's a quick visual guide on how to create a new article with the CMS.

    1. Create New Article Button: Navigate to the section you want the article to be published in. Click on the “Create a New Article” button. This will open an article form.

    2. Article Title: In the "Add/Edit Article" screen, enter the title of your article in the “Title” textbox.
    Tue 11th Mar '14, 2:04pm
  • Promoting Articles from the Forums
    by Don Kuramura
    One of the innovative new features on vBulletin 4.0 Publishing Suite is the cross-publishing "Promote to Article" functionality. In the spirit of promoting content discovery, we wanted to create features that will allow content to flow between Forums, Blogs, and Articles. For example, there might be a really popular post in the forums, but unfortunately it is buried inside page 13 of a thread. We will now have an option (if you have permissions) to “promote” a forum (or blog) post as a new artic...
    Tue 11th Mar '14, 2:04pm
  • Welcome to the new CMS. Read me first.
    by Don Kuramura
    Welcome to the new CMS. Here's a quick guide of the different areas of this page.

    1. Section Navigation Widget. This widget allows you to go to different sections. The "plus icon" means that this section has sub-sections. Clicking on the "plus icon" will display the sub-sections. ...
    Tue 11th Mar '14, 2:04pm
  • Recovering a hacked vBulletin Site
    by TheLastSuperman

    Having your site hacked is something no owner wants to experience due to the fact it takes quite a bit of effort to fix, often times requiring payment to a experienced third-party when a owner feels inundated by the sheer amount of work required to troubleshoot and remedy the situation.
    • Site has been defaced - This is the most blatant form of hacking where your sites pages have been replaced with a very disruptive and sometimes rude message from the hacker themselves.
    Tue 12th Jun '12, 1:37am
  • Issues After Upgrading
    by TheLastSuperman
    If your running a completely default forum upgrading is a very simple process. Many sites however run third-party add-ons and even use a custom style therefor when things change between older and newer
    Thu 24th May '12, 12:02pm