profile skin wizard

Follow this list of tips to get the best out of the wizard!

1. Start by importing your current skin or choose from the dropdown of prefab skins.
2. Change anything you want from colours (dropdowns appear next to places you can use colours), alignments, images etc
3. If you need to add some extra CSS click the button and you select your custom css from the dropdown.

« Launch the wizard »

The profile wizard is meant to be easy to use, even for the CSS virgin, but if you are having trouble you can always look through our CSS links and find out how to do something yourself, or post in our forums for more help.

Saying that, a mini reference of the common CSS elements you will want to change is listed below

Background Images

All background images should be specified in the form url(http://www.site.com/image.gif). Do not forget the url and brackets!

Occasionally all background properties can be specified in so called short-hand #4a2110 url(images/duckisland.jpg) no-repeat left top This specifies background colour, background image, background repeat, background position in that order.

Background Colours

This specifies the colour of the background of an object. If the object has a background image as well, then the colour only shows while the picture loads, or if the picture doesnt load at all.

Colour

color in CSS specifies the colour of a font, not the background colour. You can use a limited number of named colours such as red, blue, cyan, or hex values such as #cc0000 etc. Droppers appear next to colour and background colour values so you can choose a suitable colour easily

Borders

Borders are generally specified like this 1px solid #800000. This specifies that the border is to be 1 pixel thick, solid and a dark red. Other styles apart from solid are inset outset ridge dotted dashed

Display

This property is only really set when you want to hide something in your profile, in which case you set display to a value of none. If something is not showing when you think it should be, then check your code for a display: none

Margins

The margin is the spacing around an object and is usually specified by 4 numbers such as 2px 5px 2px 5px and these numbers are in the order top right bottom left. You can use the keyword auto as any of those values

Padding

The padding is the spacing inside an object between the border and the content, and is usually specified by 4 numbers such as 2px 5px 2px 5px and these numbers are in the order top right bottom left. You can use the keyword auto as any of those values