SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Lancaster, Ca. USA
    1 Post(s)
    0 Thread(s)

    The Basics about vBulletin's Styles

    vBulletin comes with a demo style, identical to that which you can see at This style can be used as-is, or can be modified to suit your needs. However, be aware that the styleset and templates are prepared for demo purposes and come as-is. You are encouraged to create your own styleset and templateset, to suit your website's look and feel.

    What are Style Sets?
    Stylesets are vBulletin's most powerful customization method. With a Style Set is made up of Replacement variables and Templates. By combining combinations of these you get unlimited possibilities on how your forums look and feel.

    Creating Styles
    When you create a new style you are presented with 4 options.

    Style Name. If you wanted a Urban looking style you could call it "Urban" Replacement Set. You can set this to one of your existing replacement set or create a new one. The new set will be named the same as your style set. You only need to create a new Replacement set if your color or fonts will be different from the default colors you set up on your board originally. Template Set. You can set this to one your existing template sets or create a new template. Creating a new template set allows you to create and entirely new look and feel. User selectable. This comes into effect if you allow users to select the look and feel they want in their User Options Control Panel. If set to 'YES' users will be able to change the look and feel of your forums to this style.

    Using Style Sets
    By mixing and matching templates and replacements in styles you can come up with create and unique looks without touching the code.

    An example
    Let's say you want to make your forums available in red, blue, green and yellow but all have the same overall look.

    You can do this by simply creating four different replacements sets (one for each color) and assigning the proper values to the variables in that set. Using the images/vb2 replacement variable you can point the style to a new folder with images of the proper color.

    Once that is done you simply create a style set with the new color replacement set using your default templates. Repeat this for each color and you can have four different looks for your members to choose from.

    Custom Forums
    You can also create custom looks for individual forums or groups of forums. To do this you would create your look and feel and then assign the Style Set to the forum in question.

    To do this edit the forum and set the appropriate style in the drop down.

    Replacement Variables
    These are variables that you can put into your templates. As vBulletin is drawing your pages it will replace these variables with the actual value you enter. Common Replacement variables will inherit their properties from the original global set. There is no limit to the number of replacement variables you can create. These are organized in Replacement Sets.

    The replacement variables are basically a straight search and replace. For example, <largefont> could be replaced by <font size="10">. This is the best way to set global styles for the board. This can be accessed from the control panel under the replacements heading.

    Templates control the look and feel of your entire site. This are a combination of HTML, replacement variables and PHP variables. The PHP variables contain the actual content of your code and the information pulled out of the database. You can control everything about the look and feel of your forums through the templates. This gives you a high degree of control over your customizations without ever touching the code. These are organized in Template Sets. For more Information see the Template Resource Elsewhere in this document.

    You can edit these templates in the editor provider or copy and paste them into your favorite HTML editor. If you don't like a particular feature and want to remove it from the templates simply comment it out or delete that section from your templates.

    Several templates usually go together to make a vBulletin page. If there are a lot of repeated elements, these are often distinguished by a 'bit' suffix. Templates are also used to make some of the optional elements in pages. The best way to find out how the templates work is to look at them and fiddle with them. Most of the names of the templates and variables are fairly self-explanatory.
    This is how a page is put together:
    1. Individual templates for optional parts are parsed
    2. 'Bits' are parsed - any repeated piece of code on the page. For example on the home page, each of the forum lines is a bit. Several 'bits' are put together and then fed into the template for the page.
    3. All of the bits and individual templates are parsed into the final page
    4. Finally, the page is parsed for replacement variables - this is the very last thing done.

    The PHPInclude template is a general-purpose template that unlike the others is parsed as PHP code. This PHP Code can be used to enhance your vBulletin installation.

    When using the PHPInclude template you do not want to output anything with eval() or print(), instead you want to assign it to variables.

    If you were going to include a site header you would want to place everything in the $header variable.
    $header="This is my site header";

    You can also specifiy variables here for use in other templates.
    $time = time();

    In your phpinclude template and then access $time from any of your other templates.

    Once defined you will be able to use them everywhere. However actually programming in PHP is required and that is beyond the scope of this document. You can find out more about PHP by going to and reviewing the manual which is available in HTML and PDF formats.

    Since anything PHPINCLUDE is processed first and on every page, this template makes a great place to add in new functionality. This is almost like a modular system for hacks and will allow you to update your BBS simply and easily.

    Example phpinclude template:

    And in those files is the html code for the site's footer and header in the form of

    $header = "<table width(...)";

    You could also place the code from those files directly into your phpinclude template.

    You could also do:

    $header = implode('', file(""));

    or if you have php4 you could do:

    // This code is PHP4 ony:
    $header = ob_get_contents();
    Wayne Luke

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2001
    0 Post(s)
    0 Thread(s)

    Thanks for posting all of this! This is what I've been looking for in order to learn about co-branding. I just landed an opportunity to co-brand/setup separate forums for a newborn Corvette organization so I'm trying to learn how to implement new styles and colors for their Forums.

  3. #3
    SitePoint Evangelist
    Join Date
    Dec 2000
    0 Post(s)
    0 Thread(s)

    Thanks for writing all of that Wayne! I don't have the money to purchase vBulletin now, but it was very interesting to learn how vBulletin works.

    Thanks again!
    Corbb O'Connor
    Looking for quality website design or database programming?
    Contact me for more information and a FREE quote!

  4. #4
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    1 Post(s)
    0 Thread(s)
    Nice one Wayne - I'm setting up a vb community at the Mo - this is exactly what I needed to help me along
    ~The Artist Latterly Known as Crazy Hamster~
    Currently delving into Django, GIT & CentOS


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts