Help:CSS best practices

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

Guidelines

Use ThemeDesigner!

The simplest way to customize your community and ensure that any tweaks we make to the site layout is to use FANDOM's ThemeDesigner feature.

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

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 community with icons, animations and colors - however, this can be very distracting for someone visiting the community.

Additionally, remember that FANDOM 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 likely reduce the likelihood of large gaps or overlapping elements appearing.

Write readable code

Don't forget, you might not be the only person who ever customizes the community - 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:

/* I am a comment */

Useful links

• Help:Customization policy - FANDOM's policy on allowed customizations
• Help:Wikitext/CSS - Local help page about Inline CSS modifications. (note: generally recommended against, but could help to understand or build templates.)
• 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.

Further Help & Feedback

• Browse and search other help pages at Help:Contents
• Check FANDOM Community Central for sources of further help and support
• Check Contacting FANDOM for how to report any errors or unclear steps in this article
• Learn how to use Fandom in FANDOM University: short how-to videos for all levels of experience