The Basic Anatomy of a vBulletin Page


  • The Basic Anatomy of a vBulletin Page

    vBulletin 5's user output is created using a system of pages that are customizable by the site administrator. This system is called Site Builder. By breaking the system down into pages, a lot of control is given to the system administrator. By using Site Builder, you can create a unique site without any knowledge of HTML or CSS.

    vBulletin's pages are created using layers built upon a grid layout. Each page starts with a layout which defines the content areas of the page. Layouts define the number of columns that will appear on the page. Currently, vBulletin offers layouts that contain one to four columns. Each page can have a single layout.

    Next, modules are placed within the module to create areas for content to be displayed. Once placed a page, modules will expand their width to fill the column it is placed in and accounts for padding and margins that are applied automatically. The height of the module will be determined by the content it contains and it will grow vertically as needed. This is something to keep in mind if you want to keep a balanced page.

    Once this is done, the page is stored. During the storage process, a page template is created. Page Templates are used to easily duplicate a page. However, a change made to one page on the template affects all pages created with that template.

    Each vBulletin page will also include your Site Builder Menu, Header, Footer, Navigation Bar and space for breadcrumbs and notices. You cannot remove these sections from the page and their settings are global within the style. The basic vBulletin page looks like the image below.

    Click image for larger version  Name:	basic_page_structure.png Views:	1 Size:	24.5 KB ID:	4377074

    Pages and Style Variables

    Style Variables are the core component to customizing vBulletin. There are many available and they cover all the sections above. Using Style Variables allow you change fonts, backgrounds, colors, borders, etc... without knowing CSS. They are a good tool for beginners.

    You will find a list of all Style Variables within the AdminCP. To get there go to Styles -> Style Manager. Find the Style that you wish to edit and choose "Style Variable Editor" from the Style Options menu. The Style Variable Editor is available in both the Core (download) and Cloud versions of the product.

    Finding the right Style Variables.
    Style Variables are grouped by the areas of the page they affect. For instance, all of the header style variables will be in the Header group. They are also defined by the sub-area they affect. Style Variables that change the navigation bar will be in the header_tabbar list of style variables. Those that change the sub-navigation will be in the header_subtabbar list of variables.

    Fixing Style Variable Mistakes
    If you make a mistake in a style variable, just click the revert link to return it to its default state.

    Beyond Style Variables
    If the Style Variables do not fit your needs, you can use CSS to customize your site. CSS is beyond the scope of this article but will be covered in a future article.

    This article is part one of a series of creating custom vBulletin Styles.

    • FireFish
      FireFish commented
      Editing a comment
      Nicely done

    • mclark
      mclark commented
      Editing a comment
      Nice work

    • tommynacc
      tommynacc commented
      Editing a comment
      Is this the same for VBulletin Cloud?
    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) beginner (3) channels (1) cloud (1) connect (1) Custom (1) Google (1) how to (1) howto (1) https (1) Intermediate (2) MYSQL (1) passwords (1) recovery tools (1) security (2) seo (1) sftp (1) ssl (1) ssl certificate (1) style (1) tls (1) tutorial (2) users (1) vb5howto (5) vbcloud (1)

Latest Articles


  • Changing your site's favicon
    by Wayne Luke
    The favicon allows you to extend your brand identity to the browser tab. This can often be the only thing a user sees if they have many tabs open. The favicon is a special 16 X 16 icon that the browser automatically looks for in the root directory of your site. vBulletin also ships with one in its root directory. If vBulletin is installed in the root directory of your site, you can overwrite the provided icon to change it for your users. However, you will need to remember to do this with every version...
    Tue 21 Nov '23, 11:39am
  • About .htaccess
    by Wayne Luke
    .htaccess is a configuration file for the Apache Web Server. It allows you to customize how your server works. Depending on how your hosting provider has the server configured, you can redirect people to different locations, secure directories and files, tell browsers how long to cache files, update PHP variables, and more. vBulletin comes with a pretty extensive .htaccess file that does a these things for you. Location vBulletin comes with a file named htaccess.txt in the original download. When ...
    Mon 11 Sep '23, 12:57pm
  • Answered Topics
    by Mark.B
    In vBulletin 5.6.5, we added a new feature - Answered Topics.

    Topics can now be marked as "Answered." This is a special status applied to a specific post within the topic. The post that is marked as the Answer will be highlighted and show directly under the starting post in the topic.

    The ability to mark posts as the Answer in a topic is controlled by permissions. There are three different permissions to control this.
    Usergroup and Channel Permissions both...
    Sun 8 Jan '23, 12:43pm
  • Custom Node Fields
    by Mark.B

    In 5.7.2, we have added a new feature - Custom Node fields.

    This new feature allows Administrators to define text and text area fields that are assigned to channels (eg forums).
    When a user creates a new topic, defined custom node fields will be available.
    1. The Administrator will create Field Categories in the AdminCP. Each category is assigned to one or more channels.
    2. Within each category, the Administrator can create one or more fields that will get assigned
    Thu 29 Dec '22, 3:19am
  • Using User Ranks
    by Wayne Luke

    User ranks allow the administrator to set up image and HTML rewards for their users once they reach specific goals. In versions before vBulletin Connect 5.7.1, ranks could only be triggered by the number of posts and the usergroups assigned to the user. In vBulletin Connect 5.7.1, User Ranks have been expanded to allow more flexibility in creating individual ranks. Now you can build combinations of different criteria to create unique ranks for your site.

    ‚Äč Ranks can be created using th...
    Tue 25 Oct '22, 1:04pm
  • Excluding Custom Files from Suspect File Diagnostic
    by Wayne Luke
    If you have custom files, you can create an md5 sums for your smilie directory if you want. Inside the /do_not_upload folder of your download package is a checksum sub-folder. That will create custom md5_sums files.
    1. Copy the included sample_checksum_config.php file to smilies_config.php.
    2. Enter in your forum root.
    3. Give it a product id like 'smilies'.
    4. Delete the existing directories and files in the scanpaths.
    5. Add in '/core/images/smilies', under the directories comment.
    6. Run the command
    Mon 24 Aug '20, 9:48am