Published on 09/21/2005

Together with Disjunto we have an indepth experience with the vBulletin forum software Style and Templates section which is one of the bigger assests that makes the forum product and eventually your site. The difference with this indepth feature and the on-line manual is 'how we experience it' rather then 'explaining what it means'.

Indepth Feature Experience: Using a forum 'Styles & Templates' Section

For those who do not know what the Styles and Templates section is for, a small explanation:

Most forum softwares, like vBulletin are so dynamic that you don't need to have any PHP knowledge in order to create a unique look and feel to your forum. No file or database changes are required. With a few changes in XHTML/CSS related options one could make a new color, font or HTML setup that makes it easier for the visitors of your site to return and recognize where they are. A bit more experience and knowledge in HTML is helpful to change the templates that power each style to adapt the look and feel of your community with the other sections of your site. You can have more then one style, and you can optionally let your visitors change to any of them at any time.

What I especially like was the build in feature that you could make a parent style and add child styles below it which inherit all the template changes - and you could still change the font or colors, and make additional changes without losing the setup. (This way you can make a parent style in (for example) black and provide alternative like blue, yellow, red or white. Hopefully to please all your visitors). I use this feature to make a default style, with alternatives 'lite' for dailup users and 'enhanced' for broadband users.

Another strong point of the Styles and Templates section that I found quite useful is that the templates are able to take phrases, so even if you modify the colors, the tables or enter a complete redisign, as long as you use the phrases it will still translate to every language. This makes it not only very pleasing for your members but also for sharing the style with other sites who have another language then English.

The last element that makes the Styles and Templates feature a winner is the Import and Export section. Distributing, sharing and backing up your styles is very easy.

We will go indepth on each of these strong points and hopefully it is useful (or at least a fun read) for both novice as well as experienced vBulletin users.

Now for the most important part

Our indepth experience of this important forum software feature

The Styles & Templates section contains the following five groups:

1.    The Style Manager
2.    Search in Templates
3.    Replacement Variable Manager
4.    Download / Upload Styles
5.    Find Updated Templates

1. The Style Manager

This is what I use when I want to modify the layout and/or design of my style(s). It will let you control the fonts, css, html, and other aspects of you style. You can make new styles, new templates, change their order - make the styles visible for your members or hidden.

The first part of the style manager will let you order your style, change its options and settings and let you add new styles or delete them. It also has a drop down menu from where you can change or modify your template, fonts, css, html or style settings:

Template Options

- Edit your templates
I use this feature the most to modify my templates to get a unique look for my forum!

- Add a new custom template
When I have custom work, I use this to add my own templates.

- Revert all your templates
This is a tricky one, use with care! I hardly ever use this, unless there is a big upgrade and I want to do everything from scratch.

- Edit Fonts / Colors, etc.

- Common Templates
The common templates give you control over the header/footer phpinclude and other most used templates.

- Stylevars
Several specific elements that are important for the overal look of your style. Image locations, widths of fields and forms, etc. Very usefull and powerfull and gets the job done for about 50%!

- Main CSS
Control the fonts, size, colors, etc of the elements that appear on your styles. As important as the stylevars and shouldn't be missed.

- Replacement Variables
A quick entry for replacement variables (replacing {x} with X)

- Toolbar Menu Options
The overal look of the editor and toolbar options can be found here, don't forget this to optimize and tweak the way your users input new threads and posts!

Indepth Feature Experience: Using a forum 'Styles & Templates' Section (continued)

Edit Style Options

- Edit your Style Settings
Need to change the style details? This is the place, I always check to see if I don't miss anything.

- Add a Child Style
A quick way to add a new style without having to re-apply all my custom work. After adding a child style I can quickly change the colors and provide my members with an alternative.

- Download this Style
When I need to make a bacup, I use this option - a simple way to share or backup my work.

- Delete this Style
When a style is outdated, obsolete or just very ugly, I finally take a deep sigh and delete the style using this option.

When I am done with my style changes and template changes, I browse my site and see how it looks and feels. I then try to tweak and optimize my templates where it feels out of place. Switching back and forward between browsers and test accounts helps me speed work up!

On-line manual and more detailed information about the Style Manager can be found on vBulletin.com's vB3 Manual > The Style Manager > (http://www.vbulletin.com/docs/html/stylemanager)

> Creating New Styles
> Editing Style Settings
> Deleting a Style
> Editing Fonts, Colors etc.
> Editing the Templates

2. Search in Templates

At least once per style edit I use the powerful search feature for templates. It is a handy tool to find which template is used for what element on the page. It gives you a great overview of the styles that have the template modified and not. Additionally it lets you find and replace.

Besides this tool I also use the great option from the vBulletin Options group that shows the  in html comment in the source. This way I can speed up my work while developing a style and working on templates.

If you have not used this yet, please try it out. You will see how easy and fast it is to find that little template and it has learned me which templates are used for which type of page.

On-line manual and more detailed information about the valued Search in Templates feature can be found on vBulletin.com's vB3 Manual > Search in Templates > (http://www.vbulletin.com/docs/html/style_search)

> Search Templates
> Find and Replace in Templates

3. Replacement Variable Manager

Don't you just hate it when your members keep mixing up your name with the name of the competition? They type in CompanyName instead of CompanyTitle and now what! No worry, you can set up a replacement variable for your styles. This way you can fix those little nasty errors.

From the manual: "Replacement variables are useful in representing commonly used values in templates."

As mentioned earlier you can use the option in the style manager to add replacement variables, but you can also use this replacement variable manager. It lists all the replacements from all the styles. You can add new ones, modify existing one, or delete the ones that are no longer needed.

I hardly ever use it, but in some situations it might be handy to set this up. A great example of how powerful this is: You could have a word like CompanyName replaced with your company logo. Or custom markup.

On-line manual and more detailed information about the Replacement Variable Manager group can be found on vBulletin.com's vB3 Manual > Replacement Variable Manager > (http://www.vbulletin.com/docs/html/style_replacement)

> Replacement Variables Introduction
> Add New Replacement Variable
> Customizing a Replacement Variable

Indepth Feature Experience: Using a forum 'Styles & Templates' Section (continued)

4. Download / Upload Styles

There are two methods of importing a style, uploading the .xml file to the admincp folder or selecting the file from the hard drive, each will have the same outcome. I recommend selecting the file from hard drive.

Step 1)
Select the location of the file (will be a .xml document), either on your hard drive on in the admincp.

Step 2)
Select if you wish to overwrite an existing style or if you would like to create a new style using this.

Step 3)
Select if you would like to ignore style version, I would only recommend doing this if the style is made for something along the same lines, not importing a vB3 RC4 style onto Beta7 or Gamma.

Step 4)
If overwriting style or keeping settings as stated in .xml document for new style then click import, other wise fill in the details for the new style (title, parent style, display order and if a user can select it) although these can be changed at a later point.

Exporting a file is just as simple.

Step 1)
Select the style you wish to download from the drop-down selection box.

Step 2)
Choose a title for the style

Step 3)
Choose a filename for the style, anything will work as long as it ends in .xml

Step 4)
Select whether you want only the styles own customizations or the customizations of the parent style as well. I recommend using the parent styles customizations as well if the style is a child otherwise it may not look correct.

Step 5)
Select Download and save it to your hard drive

On-line manual and more detailed information about the Download / Upload Styles group can be found on vBulletin.com's vB3 Manual > Download / Upload Styles > (http://www.vbulletin.com/docs/html/style_files)

> Downloading a Style
> Uploading a Style

When you share your .xml files- don't forget to include your images! They are not in the database, but in the web server!

5. Find Updated Templates

The final group that we will go through is almost as important as any of the others. I use this at least once each time I upgrade my vBulletin. I revert what requires to get reverted and re-apply my customizations to the templates again. Don't ignore this feature for it can help debug errors that occur after upgrading from one version to another. Keeping your templates up to date is important to avoid problems with loading pages or scripts.

The page that loads will show which templates from which style are changed. You can choose to edit them or revert to original. A great way to see what requires attention.

On-line manual and more detailed information about the Find Updated Templates group can be found on vBulletin.com's vB3 Manual > Find Updated Templates. (http://www.vbulletin.com/docs/html/style_findupdates)

Well, that is about it, I hope it gives some insight on how we experienced this important section from the Admin Control Panel and shows you where to look for what - with additional resources you can use on-line to improve your skills to let the forum work for you!