Customizing Your vBulletin Board
Most of the best discussion boards on the Web have been customized in one way or another. Some have only basic customizations to give the place a specific look and feel, while others have been heavily modified and customized to look, feel, and work exactly how the owners want them to.
At this stage you probably want something in the middle you want a certain level of customization but don't want to take on too much too soon, right? That's fine the great thing about customizing vBulletin is that you can start small and keep on adding to it until you get what you want.
In this article we will look at:

1. • Modifying CSS stylesheets
2. • Editing the default text on the board
3. • Modifying templates
4. • Changing the board's PHP code
5. • Hacks

Warning make sure you have a backup!!!
Remember that anything you do can have consequences that you might not expect! If you make a change to something, then there are things that can (and sometimes will) go wrong. Usually just undoing the changes will fix the problem, but this isn't always the case.
The data is the most important thing on your website, so make sure you take care of it! Most web hosts allow you to do this easily though the control panel.
Also, don't just have a backup have up-to-date backups. If your site is important, try to make a backup at least once a week. If your site is very important, then do it daily, and make sure you keep at least the last three backups in case the most recent carries the problem you are trying to fix. This way, if something does go wrong, you just reload the backup, and you are away again in minutes rather than days.

In the next article we will cover in detail how to recover your site from a disaster, but for now just be aware that it's a good idea to have a backup of both your website and the database just in case!
Types of Customization
By now you're probably well aware of the fact that vBulletin is very versatile, and in keeping with this, you won't be surprised to learn that there are several different ways you can customize vBulletin installation. In fact, there are five different types of change you can make.
These are:

• CSS stylesheets CSS stands for Cascading Style Sheets, and it is a technology that enables web developers to decide how their web pages are displayed. This style information is stored in a stylesheet, which controls the way that things look on the final page outputted to the browser (and other devices such as printers).

• Phrases Nearly all the default text strings that are displayed by vBulletin are stored in the database as distinct phrases.

• Templates Templates control the layout and structure of almost every different page that vBulletin can show the end user.

• PHP code You can edit and add to the underlying PHP code of the vBulletin installation.

• Hacks Finally, you can modify the board using a 'hack'.

Sometimes you will find yourself only needing to make a change in one area. Other times you will want to make several changes in order to accomplish what you desire. Either way, the power is there for you to use.
Let's take a look at how to modify your forum using each of these.

Changing the Table Title Text
Practice makes perfect, and it also gives you the confidence to make bigger changes later, so we suggest that you work through this quick exercise with us. (You can easily revert the changes back to the default at the end.)

Now click on the button in the right-hand window marked Go (shown below). This brings up the All Style Options page.

To change the table header, scroll down to the section marked Table Header.

This is the section that controls the CSS settings relating to all the table headers that are marked within the code with the CSS selector thead and displayed within the vBulletin forum. The appropriate selector is shown at the bottom of the relevant section as overleaf.

In the code of the page a selector is shown as follows:
<tr><td class="thead">Quick Links</td></tr> Any table header containing this CSS selector will be affected by the changes we are going to make.
OK, we are going to change the font size and tweak the color a little. This is controlled by the settings stored in the Standard CSS Attributes section.
Settings available for change here are:

1. • Background
2. • Font Color
3. • Font Style
4. • Font Size
5. • Font Family

To tweak the font size, just change the value in the textbox labeled Font Size. Don't remove the px at the end, as this refers to the unit of size (px is short for pixel). To make the text bigger enter a bigger number; to make the text smaller, enter a smaller number. In the screenshot below we have changed this to 16px.

Let's also tweak the color a little. The colors are entered as hexadecimal RGB values with FFFFFF being white and 000000 being black. The font color is currently set to white. Notice how these values are prefixed by the hash character #.

Hexadecimal color primer
Once you know how hexadecimal colors work, it becomes a lot easier. White is represented as FFFFFF, but this is in turn a shorthand way of representing how much red, green, and blue are in the final color. Values range from 00 (hexadecimal for 0) to FF (hexadecimal for 255). The first two hexadecimal numbers represents the amount of red in the color, the third and fourth the amount of green, and the final two the amount of blue. Red, green, and blue are all set to maximum for white, while they are all at zero for black.
Red alone would be FF0000, green would be 00FF00, and blue would be represented by 0000FF.
Remember to prefix this with the hash character (#) otherwise things might not work properly.
Let's change the font to a silver color. This color is represented in hexadecimal as C0C0C0, and so what you need is to change the FFFFFF to C0C0C0, remembering to use the # prefix.
Did you notice?
The colors used are shown in the color tile next to the setting. This feature can be very handy indeed, as it lets you see instantly what you have chosen. Clicking on the color tile opens up a color chart so that you can choose the color you want from a range of palettes.

To save the settings that you have changed, scroll down to the bottom of the screen (it's a long way down to the bottom!), and click on the button marked Save as shown below. Alternatively, click on Reset to revert the settings back to what they were and cancel any changes.

Viewing Changes
Once you save the changes, the All Style Options page will be reloaded. A quick and easy way to get back to the forum is to click on the Forum Home Page link at the top of the browser window that is at the top of every page in the AdminCP and ModCP.

This takes you to the forum, where you will see the changes you made to the table headers.

These changes aren't just present on the front page. A quick look around will show you everywhere that uses the thead CSS selector, such as the example below, which shows the tops of posts made in the forum.

Because of this widespread use of specific CSS selectors, you should examine the forum thoroughly after making changes to ensure that only the changes you want appear. When we look at making changes to the templates themselves, you will see how you can control this and make much more specific changes to the way the forum looks.

Undoing the Changes

This allows you to find the changes easily so that you can re-tweak the settings you made. If, however, you don't like the changes and want to reverse the changes you made to a section, then there is a quick way to do this. At the bottom of each section that's been changed, there is a checkbox as shown below.

Reversing the changes made to a section is done by checking the box and clicking the Save button at the bottom of the page.
Phrase Modifications
There is very little built-in text in the forum. By "built-in text" we mean text that is hard-coded into pages and can only be changed by making changes to the source files. In fact, almost all the text that you see (apart from forum text and titles and such) is stored as phrases, and there is a great deal of logic behind separating the code of the forum from the text.
To begin with, it makes it easy to create language packs for the forum that customize the base language of the forum. There are in fact a number of language packs that have been created for vBulletin, including French, Spanish, Arabic, and Hebrew. Links to a number of these can be found on the official vBulletin site at http://www.vbulletin.com/forum/ showthread.php?t=99151.
Another major advantage is that, in order to make a change to the text in the forum, an administrator does not need to change critical files containing PHP code, where a single error could bring down the forum. It is far safer and easier to have the text separated from the code (just as the code is separated from the CSS styling information as we saw above).
Making changes to phrases is easy there's an interface that handles the searching for the right phrase to change, making the change, and also reverting any changes back to the original phrase.

Let's examine how to make changes to phrases by looking at how to change the forum rules page (shown below) that is shown to all new members who sign up for registered status on the forum.

Follow along with us as we show you how to make changes to the forum rules phrase in vBulletin. Feel free to make different changes to those we make it's not the change that you make that's important, but the concept.
Searching for Phrases
Begin again in the AdminCP, and choose Languages & Phrases in the left-hand menu to expand it. From there you can click on Phrase Manager and look for the phrase you want to change, but there are a lot of phrases, so you may prefer to search for a phrase using Search in Phrases (shown below). As you get more experience with vBulletin, you will eventually get a feel for where phrases are, but for now use the search feature.

This will bring up the search interface, which contains a number of options.
This interface gives us the option to search for:

• Text in the phrases

• Variable names (we'll come to these in a moment)

• Text and variable names

We can now take a small portion of the text from the rules and use this as a search parameter, and then click on Find. We will use "Registration to this forum is free" and search for phrase text only (detailed in the image below).

vBulletin then searches through all the phrases for the appropriate string and displays all phrases that contain it. In this case there is only the one, as you can see in the image below. To aid you in spotting the search string, it is underlined and displayed in yellow.

Search tips
You might not always find the phrase you are looking for on your first search. The main reason for this is that the phrases can contain HTML formatting tags (such as <p> and <p/>) which form part of the phrase but you might not notice them otherwise. For example, if we had searched for the string "Forum Rules Registration to this forum is free" we wouldn't have had a match because the actual HTML is "Forum Rules</strong></p> <p>Registration to this forum is free" (as you can see in the image opposite).

The old saying is as relevant today as ever if at first you don't succeed, try, try, and try again!
Making Changes
Now that you've found the phrase that you want, you can go about editing it. To get the ball rolling, click on the Edit button that appears next to the phrase.

This will bring up the phrase editing page allowing you to make changes to the text (shown below).

This screen contains a lot of information and features, so let's take a moment to familiarize ourselves with the information.
At the top, is the phrase description and title (shown below). This is a standard phrase (that is, it appears in the standard phrase category), and has the title forum_rules_description.

Below that, is the variable name assigned to the phrase (see below). Here this is $vbphrase[forum_rules_description]. Knowing the variable name for a particular phrase is really useful, because it allows you to have control over which phrases are displayed. If this is placed into a vBulletin template then the text of the phrase will be shown in that location. Don't worry if this doesn't make any sense right now it will shortly! Similarly, if you remove the phrase variable from the code, then the text is removed from the displayed page.

Finding phrases
Navigating the code by phrases can be a good way to work through the vBulletin code. If you can find a bit of text in the code, you can then search for the phrase that contains that text. Later we'll show you how to search through the templates for phrase variables.
Below this, appears the existing phrase text, as you can see in the image below. This is there as a safeguard so that you know for sure what you are editing as well as the current wording of the phrase.
Below this, comes the box that does the work this is where we enter new text. This can be confusing for newcomers to vBulletin, because the edit box is labeled as Translations. However, this is the right way to go about editing the phrases.
You can also choose to copy the existing text into the edit box by clicking on the Copy Default Text button, which means that you don't have to bother retyping it or messing around with cut and paste.

We can customize this a little further if you want. Take a look through the text of the phrase, and you will find the following lines:
If you would like to cancel the registration, click <a href="{1}">here</a>

and
<p>Although the administrators and moderators of {2} will attempt to
and
All messages express the views of the author, and neither the owners of {2},
and
<p>The owners of {2} reserve the right to remove,

Undoing Changes
Be careful when making changes to phrases, as there is no automatic undo or revert feature available. The best thing to do is to keep a backup of any of the text that you change in case you change your mind and want to go back to the original wording.

Recovering phrases
If you didn't keep a backup of the phrases that you changed, all is not lost. They are all stored in the file \install\vbulletin-language.xml. If you search this file, you'll find all the phrases that vBulletin uses.