Changing the look of vBulletin
From ThemesWiki
| Official Page |
| Project Documentation |
| Download |
|
In this tutorial we're going to examine ways to change how your vBulletin installation looks to the outside world.
The sky's pretty much the limit with what you can do with vBulletin, and there's no point going through the process of building a custom style here, because what you will want to do will be different to what we will do. So, instead, we'll offer you some hints, tips, and insights into style manipulation and creation for vBulletin.
In this tutorial we will look at:
- The role of styles and templates in vBulletin
- How to modify the default style
- How to add and edit a new style
- How to distribute a style that you have created
- How to upload a new style to your server and install it
Contents |
[edit] Styling vBulletin
There are two ways that styles get created for vBulletin:
- Modification of the default style
- Creation of Custom styles
By far the most common method of creating styles for vBulletin is to start off with the default style (the blue and white style that you've seen so far in this book) and to make modifications to this style. You can think of this as a sort of 'feature-creep' or 'style-creep' of the original. This method is much easier and more straightforward than creating a style completely from scratch, and by using the default style as a starting point, you are making certain you haven't forgotten something or left something important out of the template.
[edit] Template Lifecycles
A discussion board can go through one of two distinct template lifecycles. Which one it follows depends a lot on the administrator of the forum and what they are trying to achieve with it.
[edit] Lifecycle 1 Constant Change
This lifecycle is probably the more common of the two and probably accounts for many of the customized vBulletin boards you've come across.
This is where the administrator installs their copy of vBulletin and gets their forum going as quickly as possible. So, in order to minimize any delay between getting the discussion board installed and getting it working, they simply open up the forums for discussion using of the default style (or download and use another style that they fancy).
Then, with the board open and operational, the administrator sets about making incremental changes to the discussion board. They start off small, perhaps adding their logo, or changing a font color or table background. Then they start to make bigger, more significant changes. Then, at some point they probably install a hack or two onto the board.
By now the board is looking significantly different from the default that they installed maybe only a few weeks earlier. The cycle of development continues until one of three things happen:
- A new version breaks the customized template.
- The administrator wants to completely change the look of the site.
- The administrator is happy with the end result. (Hmmm, don't think that ever happens!)
[edit] Lifecycle 2 Working Behind the Scenes
This is where the administrator installs the forum and then either opens it with a default skin or keeps it closed while they work on a brand new skin for the site. This is a little bit like the magician's trick where they pull away the curtain. Tada a dramatic unveiling.
There are several drawbacks associated with this method. The first, and most significant, is the forum downtime involved. If you only planning a few small tweaks to the default style, then you could be up and running in a reasonable period of time, ranging from a few minutes (for quick hacks and tweaks) to a few days (for something more involved).
Prolonged, unnecessary downtime is bad for a discussion board old members start to look for somewhere new to go, new members can't sign up, and your ranking in the search engine listings start to drop. Keep downtime to an absolute minimum.
[edit] Editing the Default Style
You've seen what you start with, so let's take a look at how to make some serious changes to the default style for the vBulletin template.
To carry out these modifications, click on Styles & Templates in the left-hand menu, and then click on Style Manager. This brings up the Style Manager window, which we first met in Tutorial 3.
As we saw in Tutorial 3, if you click on the Go button, then you are taken to a very large window called All Style Options window. (In Tutorial 3 we saw how to use this page to change your board's logo.)
[edit] Changing Image Paths
There are a lot more images in a vBulletin installation than just the main logo. There are, in fact, over 200 images contained in 13 folders within the main images folder.
You can change the default location of eight of these folders:
- images/buttons This folder contains all the button images.
- images/statusicon This folder contains all the icons that are used to represent the status of forums, threads, and posts.
- images/attach This folder contains the various icons that are used to represent different attachment file types.
- images/misc This folder contains miscellaneous images.
- images/editor This folder contains the button and interface images for the vBulletin editor.
- images/polls This folder contains the images used to build the bars in the poll voting results page.
- images/rating This folder contains the images used to illustrate the rating applied to a thread.
- images/reputation This folder contains the small images used to display a user's current reputation.
Upload the new images to new folders on the web server. You can move forward some of the defaults if you've not made an entire set of new images. However, if your new images are dramatically different from the old ones, you should make an effort to change all the images odd styling of images can be confusing for the user.
Once the new images are uploaded, change the paths, and click on Save. The new images will immediately appear on the board.
[edit] Other Editable Elements
Much of the default style can be edited through the All Style Options page. Here are the categories that the different sections have been grouped into:
- Common Templates
- Sizes and Dimensions
- Image Paths
- Miscellaneous
- Body
- Page Background
- <td>, <th>, <p>, <li>
- Table Border
- Category Strips
- Table Header
- Table Footer
- First Alternating Color
- Second Alternating Color
- WYSIWYG Editor
- Input Fields
- Buttons
- <select> Menus
- Small Font
- Time Color
- Navbar Text
- Highlighted Font
- Panel Surround
- Panel (Forms)
- <legend>
- Popup Menu Controls
- Popup Menu Body
- Popup Menu Option Row
- Popup Menu Highlighted Option
- Forum Jump Menu
- Additional CSS Definitions
- Text Editor Control Styles
- Toolbar Menu Options
Each one of these categories is home to several changes and tweaks that you can make to the styling of your board.
For example, let's change the background color of the body of the forum page. In the Body section, type #aa0016 (a dark red) into the Background box. You'll see the color of the tile change when you do this. Then click Save CSS for the Body section. (Alternatively, you can click Save at the very bottom of the Style Manager page to save changes to multiple sections). Notice that the text you entered for the background attribute is now shown in red indicating that you've made a customization to that style. To undo the change, you can either type the original value in the box, or you can use the revert option at the bottom of the Body section.
You can change further elements of the page by editing the CSS attributes for those sections of the board. (You can also use the CSS selector at the bottom left of each section of the Style Manager page and then use a CSS editor to locate that section in the HTML source code.)
[edit] Some Tips about Editing Styles
When you are making changes to a style, two things are paramount:
- That the changes you think you've made are actually carried out
- That the changes you've made to the style haven't been detrimental to the discussion board as a whole
In order to make sure that things work smoothly, it's recommended that you follow these simple rules:
- Make a note of any changes you make. Keep a text file open and list the changes there.
- Make the minimal number of changes needed at any one time. Making lots of changes at once makes undoing a specific change tricky.
- Browser crashes, losing Internet connectivity, or power outages can cause you to lose any unsaved changes you've made. So, to prevent such losses, save your changes often.
- Check the effect that your changes have had on the discussion board. Are the changes what you expected them to be? Are you getting nearer to your goals or further away?
- If you make changes that have an adverse effect on the discussion board, stop what you are doing immediately, and check the changes you made did you make a mistake, or is something unexpected happening? If you can't solve the problem quickly, then undo the changes using the revert option for that section in the style manager, and try again.
- The best place to experiment with changes and modifications to your discussion board is on your test installation you can then migrate the changes to the live discussion board.
[edit] Adding a New Style
So far, we've looked at modifying the existing default style, but what about creating a whole new style?
Easy!
Again, start off at the All Style Options page. Take a look at what's below the buttons. Do you see the link marked Add New Style?
It's amazing how many people miss that altogether and simply cannot find a way to make a new style. (Many people resort to using the Add Child Style option in the drop-down box instead.)
Click on the Add New Style link. This takes you to the Add New Style page shown below:
You can now fill in the following details of the new stylesheet:
- Parent Style This allows you to choose whether the new style has a parent style or is itself a parent style. (A parent style has child styles based upon it.)
- Title This is the name of the new style.
- Allow User Selection This determines whether the new stylesheet is selectable by the board users from the main forum page and the UserCP. Set this to No initially if you don't want others to see your 'work in progress'.
- Display Order This lets you choose the display order of the styles as displayed in Style Manager and the Quick Style Chooser in the forum.
The Add New Style window should now look like this:
In case you are wondering, the radio buttons just below the style name indicate whether it is selectable by the end users.
OK, now you have your new style, it's time to do something with it!
[edit] Editing the Style
The Style Manager window now looks a little different with two styles in there waiting to be edited.
Another interesting feature is that, when you hover the cursor over the name of one of the styles, it gives you the ability to view the discussion board using that particular style.
This is done using a carefully crafted hyperlink:
http://www.example.com/vb/index.php?s=&styleid=4
You can now edit the new style in the same way that you edited the old one. What you will notice initially is that your new style is in fact the old style it's just a rendition of the default style. However, this allows you to work on the style and keep the changes separate from the style in use on the discussion board.
( Note - Be careful about making too many changes to the fonts used remember that fonts need to be installed on the user's computer too. By default, a number of fonts are specified, and if the first one is unavailable, another is used. Font types are also specified to cover a broad range of different fonts. Be careful with fonts if the font you specify is not available and you don't specify alternatives, your forum can end up looking very strange indeed!)
[edit] Saving the Style
Right, you've made some changes to your new style. The next thing you need to do is back up the changes just in case something goes wrong. You don't believe that things can go wrong? You think your forum is safe on the server? Think again! A whole host of things can, and do, go wrong:
- A cataclysmic failure of the server
- A vanishing web host
- A corrupted database
- A hacker attack
- Accidental deletion
- Wipe-out by installing a new version
- The unexpected fire, flood, aliens
The best place to keep a backup is not on the server but on your PC or an external storage medium, so make a copy and keep it safe (perhaps on a USB flash memory device or a CD).
[edit] Downloading the Style
The Style Manager page is the place to go when you want to download your style. In the drop-down box next to the style you want to download, you'll find Download.
You will then be presented with a message box like this:
If you click on Cancel, then a file that contains all the changes to the style will be downloaded.
If you click OK to access the advanced options, you get the ability to change the name of the file and what is downloaded.
The XML file contains all the changes that have been made to the style. Here's a small sample of an XML file:
<?xml version="1.0" encoding="ISO-8859-1"?>
<style name="NewStyle" vbversion="3.5.4" type="custom">
<templategroup name="CSS Special Templates">
<template name=".button" templatetype="css" date="1117789818" username="Administrator" version="">
<![CDATA[a:4:{s:10:"background";s:0:"";s:5:"color";s:0:"";s:4:"font";a:3:
{s:5:"style";s:0:"";s:4:"size";s:4:"10px";s:6:"family";s:70:"verdana, geneva, lucida, 'lucida grande', arial,
helvetica, sans-serif";}s:5:"EXTRA";s:0:"";}]]></template>
<template name=".navbar" templatetype="css" date="1117789818" username="Administrator" version="">
<![CDATA[a:7:{s:10:"background";s:0:"";s:5:"color";s:0:"";s:4:"font";a:3:{s:5:"style";s:0:"";
s:4:"size";s:4:"10px";s:6:"family";s:70:"verdana, geneva, lucida, 'lucida grande', arial, helvetica,sans-serif";}
s:5:"EXTRA";s:0:"";s:6:"LINK_N";a:3:{s:10:"background";s:0:"";s:5:"color";s:0:"";s:15:"text-decoration";
s:0:"";}s:6:"LINK_V";a:3:{s:10:"background";s:0:"";s:5:"color";s:0:"";s:15:"text-decoration";s:0:"";}s:6:"LINK_M";
a:3:{s:10:"background";s:0:"";s:5:"color";s:0:"";s:15:"text-decoration";s:0:"";}}]]></template>
<template name=".smallfont" templatetype="css" date="1117789818" username="Administrator" version="">
<![CDATA[a:4:{s:10:"background";s:0:"";s:5:"color";s:0:"";s:4:"font";a:3:{s:5:"style";s:0:"";s:4:
"size";s:4:"10px";s:6:"family";s:70:"verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif";}
s:5:"EXTRA";s:0:"";}]]></template>
<template name=".tcat" templatetype="css" date="1117789818" username="Administrator" version="">
<![CDATA[a:7:{s:10:"background";s:65:"#869BBF url(images/gradients/gradient_tcat.gif) repeat-x top
left";s:5:"color";s:7:"#FFFFFF";s:4:"font";a:3:{s:5:"style";s:4:"bold";s:4:"size";s:3:"9pt";s:6:"family";
s:70:"verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif";}
s:5:"EXTRA";s:0:"";s:6:"LINK_N";a:3:{s:10:"background";s:0:"";s:5:"color";s:7:"#ffffff";
s:15:"text-decoration";s:4:"none";}s:6:"LINK_V";a:3:{s:10:"background";s:0:"";s:5:"color";s:7:"#ffffff";
s:15:"text-decoration";s:4:"none";}s:6:"LINK_M";a:3:{s:10:"background";s:0:"";s:5:"color";s:7:"#FFFF66";
s:15:"text-decoration";s:9:"underline";}}]]></template>
This file is a plain text file, and it is editable using a text editor, but as you can see, it isn't a place where you would want to go and make many changes!
[edit] Making the New Style into the Default
OK, you've created a new style, and you want to make it available as the default. How do you do this?
Easy! You may have noticed some checkboxes at the top left of the Style Manager window.
The style currently in use is checked. To change the style in use, just swap the check marks around, and click on the button marked Save Display Order.
The new style will now be available, and the old style won't be available. If you want to make both styles available, check both options and click on Save Display Order.
This will now make both styles available to the users of the board, and they can choose which one they want to use.
[edit] Distributing a Style
You've made a great style, and you think that others might like to use it. You can choose to make it available for free, or you could decide to sell it. (Remember though that selling a style usually means having to provide the buyer with installation support.)
But how do you package it?
A style consists of the following elements:
- An XML file containing the changes
- All the custom images that go with it
To create a distribution package for a style, first take the custom XML file that you created and place it in a folder. (Call the folder the same name as the style.)
Then, download all the folders that contain custom images for the style from the web server. Make sure that you get the folders and the images. So, for our earlier example, we'd need to download the following folders:
-
images/custom/buttons -
images/custom/statusicon -
images/custom/attach -
images/custom/misc -
images/custom/editor -
images/custom/polls -
images/custom/rating -
images/custom/reputation
Place these folders and their contents into the folder containing the XML file and you're done. You can package up the whole thing into a zip file for convenience if you want it also helps to keep all the files together in one place.
[edit] Installing a New Style
Installing a new style is simple. Follow these simple steps:
- First, find the style that you want to use.
- If the style has been packaged, extract the contents of the zip file.
- Upload the folders containing images into the
imagesfolder on the web server. Do not upload the XML file. - Next, click on Styles & Templates in the left-hand menu, and then click on Download/Upload Styles.
- This takes you to the interface that you saw earlier when downloading the XML file. This time, we're interested in uploading it.
- Click on the Browse button, and go in search of the XML file.
- Make sure that (Create New Style) is selected in the Merge Into Style drop-down box.
- Scroll to the bottom of the page and click on Import.
- The import process will run and import the style into vBulletin.
And that's all there is to it!
[edit] Additional References
For instructions on Installing VBulletin, click here
[edit] Source
The source of this content is Chapter 7: Changing the Look of vBulletin of vBulletin: A Users Guide by Adrian Kingsley-Hughes, Kathy Kingsley-Hughes (Packt Publishing], 2006).
