Announcement

Collapse
No announcement yet.

The Basic Anatomy of a vBulletin Page

Collapse
X
Collapse

  • 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
      #1
      FireFish commented
      Editing a comment
      Nicely done

    • mclark
      #2
      mclark commented
      Editing a comment
      Nice work
    Posting comments is disabled.

About the Author

Collapse

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

Article Tags

Collapse

advanced (5) albums (1) android (2) api (29) array (17) attachment options (1) beginner (17) blog (4) calendar (2) cloud (1) cms (2) connect (1) forum (3) forums (4) Intermediate (5) iphone (3) mapi (30) methods (10) mobile (34) sections (1) style (2) thread (1) threads (4) vb5howto (5) vBulletin (5)

Latest Articles

Collapse

  • The Basic Anatomy of a vBulletin Page
    Wayne Luke
    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...
    Mon 11th Sep '17, 9:55am
  • Enabling Push Notifications in vBulletin 5.3.2 and Mobile Suite 1.16
    Wayne Luke
    vBulletin Mobile Suite 1.16 includes functionality for Push Notifications. One of the requirements to add this functionality is that you must be running vBulletin 5.3.2 Connect on your site and create a project with Google's Firebase Cloud Messaging (FCM) platform. The steps below will walk you through the process of enabling this functionality in vBulletin and in your Mobile Apps.

    Add a project to your Firebase account






    Setup Push Notifications...
    Thu 27th Jul '17, 9:56am
  • Enabling Two-Factor Authentication
    Wayne Luke
    vBulletin 5.3.0 and higher will allow site owners to enable Two-Factor Authentication for Administrator and Moderator functionality. This is an extra layer of security provided to make sure your user data remains as safe as possible. Two-Factor Authentication works in conjunction with an app on the user's smartphone, tablet, or computer. These apps provide a security token that lasts a limited time before expiring. The security token is created using industry standard algorithms and a unique string...
    Tue 4th Apr '17, 9:38am
  • How to moderate the posts of new users only
    Wayne Luke
    To help combat spam, many users opt to have new user’s posts moderated until they’ve made a specific number of posts. This allows the Admin/Moderator team to keep potentially malicious posts out of the public eye until a user has effectively passed a ‘probationary period’ as a member of the site.

    In order to do this, you will need to create a custom usergroup and a promotion.

    Creating a Custom Usergroup
    First, you need to setup the usergroup for your non-Moderated...
    Wed 22nd Feb '17, 10:13am
  • Rebuilding the Sphinx index
    Wayne Luke
    From time to time, we will need to update the indexing schema for the Sphinx server. In order for this fix to take effect, you will need to update the sphinx schema for the index. Follow these steps to rebuild your Sphinx Search Schema.
    1. Stop the Sphinx service on your server.
    2. Replace your existing Sphinx configuration file (vbulletin-sphinx.php) with the one provided in the current version of vBulletin 5 Connect. You can find this file in the do_not_upload directory.
    3. Update the file as provided
    ...
    Fri 3rd Feb '17, 2:01pm
  • Using the Search JSON
    Dominic
    Using the advanced editor you can create powerful search modules. Following you find possible filters / parameters for using within these modules:
    The search JSON parameter has the following format:

    :
    { "filter": <value>, "filter": <value>, ... }
    <value> may be any valid string, number or JSON structure and will be interpreted by the specified filter. Filters not listed below are ignored.

    Filters

    The valid filters...
    Wed 28th Jan '15, 1:51pm
Working...
X