Chapter 7
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.
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.)
159
Changing the Look of vBulletin
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:
160
Chapter 7
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!
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.
Fonts
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!
161
Changing the Look of vBulletin
Save Often!
Remember, save your changes often!
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).
Downloading the Style
The Style Manager page is the place to go when you want to download your style. In the dropdown 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.
162
Chapter 7
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, sansserif";}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, sansserif";}s:5:"EXTRA";s:0:"";s:6:"LINK_N";a:3:{s:10:"background";s:0:"";s:5:"col or";s:0:"";s:15:"textdecoration";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, sansserif";}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:"si ze";s:3:"9pt";s:6:"family";s:70:"verdana, geneva, lucida, 'lucida grande', arial, helvetica, sansserif";}s:5:"EXTRA";s:0:"";s:6:"LINK_N";a:3:{s:10:"background";s:0:"";s:5:"col or";s:7:"#ffffff";s:15:"textdecoration";s:4:"none";}s:6:"LINK_V";a:3:{s:10:"background";s:0:"";s:5:"color" ;s:7:"#ffffff";s:15:"textdecoration";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!
163