So far we've looked at how to modify CSS stylesheet information, which controls how vBulletin looks, and the phrases, which control the text. Both of these modifications allow you to radically change how your vBulletin board looks and feels. Template modifications allow you to do a lot more and to make much more radical changes to your vBulletin installation. In fact, templates control nearly every aspect of a vBulletin board. Each page that the end user sees is the result of one or more templates coming together and displaying information.
Let's take a closer look at templates in vBulletin.
Tip
Templates are powerful yet complicated
Just a note about templates though, before we go further. Templates are quite complicated, and you need a good knowledge of how HTML works to make small changes. To make bigger changes you need to have an understanding of how the templates work. Work methodically and make notes of the changes you make. That way, if something goes wrong, you can undo it. If things go drastically wrong, you can always reverse all the changes made.
To access the templates, first click on Styles & Templates in the left-hand navigation pane to expand the menu. From there, click on Style Manager as shown below.
It's the next stage that many people find confusing—finding the templates! The way to get the right-hand frame to display the templates is to click on the 'expand templates' button on the right of the screen. It looks like << >> (shown below).
This now displays some of the templates used by vBulletin, some of which are shown below. Most of the pages that you see when using a vBulletin board are made up of one or more of these templates. (Generally, a page is made of three: a header, a footer, and the main body.)
Here, templates are grouped. Headings are in blue, and template names are in white. As you will see later, edited templates appear in red text to make finding them easier.
To display all the templates, you have to click on another button, again marked << >>, to expand all the template groups.
You will now see a full listing of the vBulletin templates available. There are a significant number, and they are grouped into 34 categories:
- BB Code Layout Templates
- Buddy List Templates
- Calendar Templates
- Editor Templates
- FAQ Templates
- Forum Display Templates
- Forum Home Templates
- Help Templates
- Instant Messaging Templates
- Member Info Templates
- Modify User Option Templates
- Navigation / Breadcrumb Templates
- New Posting Templates
- Page Navigation Templates
- PHP Include Code Templates
- Private Message Templates
- Poll Templates
- Postbit Templates
- Post Icon Templates
- Printable Thread Templates
- Registration Templates
- User Reputation Templates
- Search Templates
- Show Groups Templates
- Show Thread Templates
- Smilie Popup Templates
- Subscribed Thread Templates
- Paid Subscriptions Templates
- Thread Administration Templates
- User Control Panel Templates
- User Profile Field Templates
- User Note Templates
- Who Posted? Templates
- Who's Online Templates
Let's take a close-up look at a template. We're going to examine the FORUMHOME template, which is the main template that controls the look and operation of the forum homepage. To find this template, scroll down the Forum Home Templates section and double-click on FORUMHOME to open it. The template opens in vBulletin's template editor as shown below:
Tip
In-built template editing
By now you're probably noticing how little you have to use any external editors when working with vBulletin—most features can be edited through vBulletin's own editing interface. This saves the administrator a lot of time and effort, as well as reducing the time it take to make changes—the changes are done directly to the data on the server, and no FTP program is required!
You might not believe it, but the code shown is the code that underlies the main vBulletin forum page that you see when viewing the forum.
Let's take a quick look at the structure of the FORUMHOME template before we go on to make some changes to it.
Right at the top of the template is the beginning of the HTML code for the actual page displayed in the browser.
$stylevar[htmldoctype]
<html dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
<!-- no cache headers -->
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />
<!-- end no cache headers -->
<title><phrase 1="$vboptions[bbtitle]">$vbphrase [x_powered_by_vbulletin]</phrase></title>
$headinclude
</head>
There are a number of vBulletin variables in this small section of code. Variables can be easily spotted because they are all prefixed with the $ character. Some of these variables refer to phrases that we looked at earlier while others control the running for the forum. For example, $vbphrase[x_powered_by_vbulletin] refers to a phrase in vBulletin—this is the phrase that adds the—powered by vBulletin to the menu bar of the browser, while the $vboptions[bbtitle] variable extracts the forum title from the vBulletin options settings and displays it. Both of these are shown below. All the templates follow this format—HTML combined with vBulletin-specific variables.
The other variables, such as $stylevar[htmldoctype] and $stylevar[languagecode], control settings outputted to the HTML header, shown below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" lang="en"> <head> <!-- no cache headers --> <meta http-equiv="Pragma" content="no-cache" /> ..<meta http-equiv="Expires" content="-1" /> ..<meta http-equiv="Cache-Control" content="no-cache" /> ..<!-- end no cache headers --> ..<title>The Example Forums Forum - powered by vBulletin</title> ..<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="generator" content="vBulletin 3.5.2" /> <meta name="keywords" content="vbulletin,forum,bbs,discussion,jelsoft,bulletinboard" /> <meta name="description" content="This is a discussion forum powered by vBulletin. To find out about vBulletin, go to http://www.vbulletin.com/ ." />
These settings are stored and edited through the vBulletin Style Manager.
Further along in the code, you will find other variables, and you might be able to guess at what some of them do—for example, $navbar. The code that controls the display of the navbar is stored in a separate template, which is inserted into the main page. This allows different parts of the forum to be stored (and edited) separately. Because the navbar is used extensively in vBulletin discussion boards, it makes sense to store that code in one place—this results in less code overall and also means that, if you want to make a change to the navbar, you need do so only once. So, when the FORUMHOME template is used to display the front page of the forum, all the variables are processed at the server, and the final page outputted to the browser for display.
Tip
Similarities to PHP and ASP includes
If you are used to using PHP or ASP, you will more than likely be familiar with the concept of includes—this is where one section of code is inserted into another so that they are combined server-side before being displayed. This is exactly what is happening here.
If you carry on looking at this template (or any other template), you will see a combination of HTML and variables coming together to create a forum page. Sometimes the relationship between the two is clear, other times it's not so clear, and you might need to experiment with the code before figuring it out. (We will get a clearer understanding of working with templates in Chapter 8.)
Now you've had a chance to get acquainted with the FORUMHOME template, let's look at how we can make changes to it, by adding a sidebar to the forum. A sidebar is a place where you can add your own content to be displayed on the front page of your forum. This is a change that vBulletin administrators often want to make because it gives them a place to make specific additions to the forum, such as important announcements, links, or advertisements.
Making changes to templates generally requires you to have at least a basic understanding of HTML. The more HTML you know, the more easily you will be able to make changes and customizations to your forum.
All the changes here are going to be to the FORUMHOME template, but don't worry about damaging your forum—if things go wrong, you can always undo the changes later. However, if you follow these instructions, then things will be fine.
You only need to make two changes to the FORUMHOME template. These two changes involve the addition to two sections of HTML code.
Firstly, scroll down the FORUMHOME template to the section of code shown below:
<body> $header $navbar <!-- main -->
Between the $navbar variable and the <!-- main --> comment tag, add a couple of hard returns to make space for the code you want to add.
<body> $header $navbar <!-- main -->
Now, when you make modifications to a template, you might need to find these changers later in order to edit or delete them. If you just add modifications directly to the code, then it's easy for them to get lost. We suggest that you add some comment tags and place your changes within these. To the comment tags, we usually add a description of the change we're making and the date. Also, if we know how many changes we are going to make, we add that information too. These comments will also be very useful to you later on when upgrading to a new version of vBulletin because it makes your modifications easy to spot.
<body>
$header
$navbar
<!-- Start sidebar code / Jan 06 / change 1 of 2 -->
<!-- End sidebar code / Jan 06 / change 1 of 2 -->
<!-- main -->
Now we can add the code. Here this is the beginning of an HTML table. The table will be 150 pixels wide.
<body>
$header
$navbar
<!-- Start sidebar code / Apr 05 / change 1 of 2 -->
<table width="$stylevar[outertablewidth]" border="0" cellpadding="$stylevar[cellpadding]" cellspacing="0" align="center">
<tr>
<td width="150" valign="top">
ADD CONTENT HERE
</td>
<td valign="top">
<!-- End sidebar code / Apr 05 / change 1 of 2 -->
<!-- main -->
These are all the changes we need to make at the top for now. Now scroll to near the bottom of the FORUMHOME template to the point shown below:
</table> <!-- / icons and login code --> $footer </body>
Now again add a few returns between the <!-- / icons and login code --> comment tag and the $footer variable.
</table> <!-- / icons and login code --> $footer </body>
Next, add the comment tags that will later allow you to find the change you made.
</table>
<!-- / icons and login code -->
<!-- Start sidebar code / Jan 06 / change 2 of 2 -->
<!-- End sidebar code / Jan 06 / change 2 of 2 -->
$footer
</body>
Now it's time to add the code. This is simply the HTML code that closes the table we opened above.
</table>
<!-- / icons and login code -->
<!-- Start sidebar code / Jan 06 / change 2 of 2 -->
</td>
</tr>
</table>
<!-- End sidebar code / Jan 06 / change 2 of 2 -->
$footer
</body>
With the final change made, all that is left to do is to save the template by clicking on the Save button at the bottom (or Save & Reload, which combines saving the template with reloading it into the editor).
Having done that, you can view the changes you made to the forum in a browser. The result is shown below:
If you were doing this for real, you could now go back to the FORUMHOME template and add the content you want to appear in the sidebar. If you return to the Style Manager, you will notice that the entry for FORUMHOME is highlighted in red and that beside it appear the details of when the change was made and who made it. We've shown this below for the FORUMHOME template that we have just modified.
In the image above, you will see two buttons that are very useful once you have templates that have been modified. These are the View Original button and the Revert button. Clicking on the View Original button allows you to view the original template without any of the modifications added. Viewing the original template does not alter the content of the altered template—both are stored separately.
The Revert button does exactly what you'd expect. It reverts the template back to original and eliminates any changes made. Use this with care, as there is no undo feature and your changes will be lost!