Announcement

Collapse
No announcement yet.

9 Easy Steps to Styling Your Forum

Collapse
X
Collapse
 

  • 9 Easy Steps to Styling Your Forum

    The updated guide on how to style your forum in less then 12 steps!

    Current for vB version 4.1.2


    Introduction

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

    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 Manager. 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 your header.

    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.

    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_1## -->

    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” before clicking the button.

    <!-- ##phrase_image_larger_version_x_y_z_2## -->

    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:

    <!-- ##phrase_image_larger_version_x_y_z_3## -->

    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. (Ugh!) 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” from the “Header” header instead.


    <!-- ##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## -->

    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

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

    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!

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

    After uploading the gradient I wanted to use (see image above), I went back to the Style Variation Editor and selected the “nav_tab_background” variable.

    <!-- ##phrase_image_larger_version_x_y_z_8## -->

    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: Finding a StyleVar
    <!-- ##phrase_image_larger_version_x_y_z_9## -->
    If you have trouble finding the StyleVar you want to change, use the search function in the upper left hand menu. Simply enter the name of the StyleVar you’re looking for in the textbox and vBulletin will find it for you.


     

    • Crazy8sNYK
      #21
      Crazy8sNYK commented
      Editing a comment
      #7192A8 was the VB standard colour for the tab background, is it possible just to enter colour codes, ie, #XXXXXX for white? A list of those would be nice.

    • Trevor Hannant
      #22
      Trevor Hannant commented
      Editing a comment
      obglobal.net - To get vB support on these forums you first need to be a licensed customer and register for Priority Forum Support. To do this, please go here:

      http://members.vbulletin.com/membersupport_priority.php

      ...and enter your email address in one of the boxes. You'll need to have your customer number and password to access the page.

      If you still have problems after doing this, send an email to support@vbulletin.com. Please include your user name, the email address you registered with and your customer number so we can fix the problem.

      Once you've done this, please post in the approriate forum for support.

      Crazy8sNYK - yes, you can use HEX or RGB values in the StyleVar system - there is also a colour chooser

    • Crazy8sNYK
      #23
      Crazy8sNYK commented
      Editing a comment
      Thanks for that, Trevor. I'm looking for a tutorial on how to change the color of the text in my forum. As of now, for example, where the header for the main forum says "Title / Thread Starter" etc, is all default. As a beginner, I'm really struggling to find any info in lamen's terms.

      I'd appreciate any help with it from anyone willing.

      Thanks a lot.
    Posting comments is disabled.

About the Author

Collapse

Fei Leung Find out more about Fei Leung

Article Tags

Collapse

advanced (5) android (2) api (29) array (17) attachment options (1) beginner (17) blog (4) calendar (2) center (1) cms (2) forum (3) forums (4) Intermediate (7) iphone (3) mapi (30) methods (10) mobile (34) post (1) security (2) ssl (1) style (2) threads (4) tutorial (1) vb5howto (5) vBulletin (5)

Latest Articles

Collapse

  • 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
    Symptoms

    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
Working...
X