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:
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.)
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.
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 #.
Tip
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.
Tip
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.
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.
If you scroll down to the location where you made the changes in the All Style Options page, you will notice that the attributes you changed are highlighted in red as shown below:
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.