Help:CSS best practices

{|width="100%" style="border:2.8px solid #bca1a3; border-radius: 1em"
 * valign="top" width="50%" style="background: transparent; border: 3px; padding: .5em 1em; border-radius: 1em"|

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

Use the Theme Designer
The simplest way to customise your community and ensure that any tweaks we make to the site layout is to use Wikia's Theme Designer feature.


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

Avoid clashing or lurid colours
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 colour blindness.
 * Different device screens also behave differently. The colours 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 the Theme Designer includes a simple transparency slider 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 community with icons, animations and colours, but this can be very distracting for someone visiting the community.

Additionally, remember that Wikia has a fluid width. What you see might not exactly match what another user sees on a differently sized screen. For example, investigate specifying widths as percentages instead of as absolute values. This will reduce the likelihood of large gaps or overlapping elements appearing.

Write readable code
Don't forget that you might not be the only person who ever customises the community, so try to ensure that the code you write can 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:

/* I am a comment */

Useful links

 * Help:Customisation policy - Wikia's policy on allowed customisations.
 * W3Schools - an online guide to CSS.
 * CSS-Tricks - an online CSS code library of supported codes.
 * The W3C CSS Validation Service - this helps check for code errors, similar to Special:CSS itself.