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
- 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!
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.
Tip
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!
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).
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=".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!