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.


Use the Theme Designer

Theme designer

The Theme Designer in action

The simplest way to customize your community and ensure that any tweaks we make to the site layout is to use FANDOM's Theme Designer 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 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 colors, but 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 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 customizes 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

Further help and feedback