Customizing Your vBulletin Board
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.
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.)
Adding a FORUMHOME Sidebar
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.
Two Changes
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 -->
104
Chapter 4
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>
105
Customizing Your vBulletin Board
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:
106
Chapter 4
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.
107