Creating new styles with vBulletin is actually a pretty straight-forward process. Thanks to the templating system in vBulletin 3.x all of the changes can be done through the Administrator Control Panel, or ACP for short. If you're new to vB you'll see ACP referenced often.

If you haven't seen the vBulletin template system in action yet the first thing I'd recommend is going to http://www.vbulletin.com/admindemo.php and signing up for a test account. That then will then give you a 24-hour account that you can use to play around with different settings and also to take a look at the various editors.

While you're in the ACP from the left hand column menu you want to choose Styles & Templates and then choose Style Manager. From there select the style that you want to work with. Generally choosing "All Style Options" will give you access to everything that you need to work with for basic color changes. To modify the actual appearance of the style, such as layout or new graphics, you'll need to instead choose "Modify Templates" and select the corresponding one you want to work with.

With vBulletin 3.x nearly every component of the output shown on the screen has been broken down into it's smallest component so it may take a while to get to exactly what is that you're trying to modify. Usually though the template groupings and names are clear enough to point you in the right direction.

The bulk of the "custom styles" out there available for free are simply color and/or CSS changes that can be done through the All Style Options screen. By contract most of the commercial styles from places like CinVin.com involve custom graphics to the "header", "footer", "postbit_legacy", and usually the "postbit_level..." templates.

Most of the commercial styles go through two different phases, the design and the coding. The "designer" is typically a graphics only person who is great with graphics but can't do the vBulletin coding. The "coder" then is typically somebody who knows HTML, CSS, and vBulletin style templates inside & out but can't handle the graphics. When a designer create a new style it is usually a giant single PSD that contains all of the elements of the new style.

The PSD is then taken over the by coder who will use a tool like Adobe Image Ready to then 'slice' the graphics down into their individual pieces to be used into the style.

After the coder slices the graphics he'll then copy the default vB3 style into a new style and do his changes. The color changes and CSS will be done through the All Style Options screen. To then make the changes to add, for example, the new graphics to the category headers and the navigation bar ("navbar" for short) he'll then go into the templates.

The rest of the templates were able to be left at the factory defaults but most of the options such as form width, colors, etcetera can all be changed through the All Style Options screen.

When all of the templates have been modified and the colors & CSS settings have been tweaked the only thing left then is to download the the style and package it up. vBulletin 3.x uses XML files for it's styles so when you 'download' a style from vBulletin it'll save the modified templates and settings in an XML file. The XML file and the sliced graphics that are to be used are then just zipped up and are ready to be distributed.

When the person is ready to install the file they just copy the folder with the images to their server and then 'upload' the XML file through their vB ACP and all of the modified templates and settings are then ready to go.

When it comes to CinVin I prefer making it easy for the customer to modify the graphics to their own liking so what I usually do is break the single large PSD into several smaller PSD file so that the header is self contained in it's own PSD file, the buttons are self contained, etcetera.

The process to create the style was what I outlined above.

__________________
Miner Skinz.com
Place for vB skins free & custom made
WPcube.comGallery of well designed wordpress
vBcube.comGallery of well designed vBulletins