Customizing Your vBulletin Board

In the next chapter 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 a 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.

CSS Modifications

Let's look at how to make a few forum changes. Specifically let's look at how to make the table title text bigger and tweak the color a little bit. The original table title is shown in the image below:

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.)

86

Chapter 4

To do this, first enter the vBulletin AdminCP. From here, click on Styles & Templates to expand that menu, and then click on Style Manager as shown below:

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

All Style Options page.

This loads up a massive page with a large number of options. Note how all the sections are clearly labeled as to what settings they control. At the top you have the settings for the Common Templates, including the generic page headers and footers. Below that you have the section that controls Sizes and Dimensions of elements within the forum (shown below):

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.

87

Customizing Your vBulletin Board

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:

•Background

•Font Color

•Font Style

•Font Size

•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 #.

88

Chapter 4

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.

89