Help:CSS best practices

Thinking of customizing your wiki's design via the wonders of CSS? Here are a few guidelines to help you do so with a minimum of fuss.

Use ThemeDesigner!
The simplest way to customize your wiki an ensure that any tweaks we make to the site layout is to use Wikia's ThemeDesigner feature.


 * ThemeDesigner gives you quick and easy customization abilities, such as letting you change the logo, colors, and background of your wiki.
 * Read more about it on Help:Theme designer, and visit Special:ThemeDesigner on your wiki.

Avoid clashing or lurid colors
This especially applies to the content area.


 * Not everyone's eyesight works the same as yours might - a significant number of people have issues with degraded eyesight and color blindness.
 * Different device screens also behave differently - the colors you see on your own might not work quite as well on another.

Of course, this is not easy to judge when you're working on your theme, so a few particular ideas to follow are:
 * Try to ensure good contrast between text and the background - such as dark text on a light background.
 * Background images are cool - but not if you can't read the text on top of them! note that ThemeDesigner includes a simple transparency setting if you want some of the overall background to show through the skin.
 * Try not to make anything too small, especially the main text area.

Keep the design simple
There may be a temptation to cover your wiki with icons, animations and colors - however, this can be very distracting for someone visiting the wiki.

Write readable code
Don't forget, you might not be the only person who every customizes the wiki - try and ensure that the code you write could be read and understood by someone else. Spacing and clear names are great methods to help with this.

Additionally, add comments to code that may not be easily identifiable as to what it does - you can do this by wrapping some explanatory text in /* and */ markers above the relevant CSS. For example:

Useful links

 * Help:Customization policy - Wikia policy on allowed customizations on Wikia
 * W3Schools - an online guide to CSS
 * The W3C CSS Validation Service - this helps check for code errors, similar to Special:CSS itself.