FANDOM

Community Central
Community Central
27,613 Pages
Add new page
in:
Help, CSS

Help:CSS best practices

View source
Share

Thinking of customizing your community's design? When mapping out a CSS strategy, you want to make choices that are broadly appealing and welcome the largest possible range of editors and readers. Here are a few best practices that will help.

Before you start, please also read our article Customization policy.

Guidelines

Start with the theme designer

The simplest way to customize your community is to use Fandom's theme designer. It lets you easily change your site's base color palette, wordmark, favicon and background. Anything that can be changed with theme designer should be changed with it. So start there before moving on to CSS.

Colors

Avoid low-contrast, clashing or lurid colors — especially in the content area. You want people to be able to easily read your articles so that they'll stick around longer.

Theme designer

Start with the theme designer before writing any CSS.

Remember:

  • Not everyone's eyesight works the same as yours. A significant number of people have issues with degraded eyesight and color blindness.
  • Different devices behave differently. The colors you see on your own display might not work quite as well on another.
  • Have good contrast between text and the background.
  • Background images are cool, but not if you can't read the text on top of them. Use the Theme Designer's transparency slider with care, especially with a busy background. Add also an appropriate background color.
  • Try to avoid busy backgrounds.
  • Try not to make font sizes too small, especially in the main text area.

Fonts

  • Custom fonts are welcome, but less is often more. Avoid a strain on the eyes. Watch out where you are allowed to change the font type: Customization policy.
  • You can find many free fonts which allow commercial use. You might like to have a look at Google Fonts. If you need help, please follow this guide: Import Google Fonts.

Keep it simple

CSS offers you a cornucopia of possible effects to make a site really to stand out. But you should not overdo it. The goal of CSS is to make the community broadly appealing, and your flashy custom cursor may be turning off new readers.

  • Use decorative elements only where necessary.
  • Avoid anything too "flashy" on the pages. You may add some hover effects e.g to make icons stand out, but keep in mind that Wikis mostly are about information. The Wiki of course should represent the topic you are writing about in a visually appealing way but also in a manner of reducing anything which could distract or repel the viewer.

Responsive design

Fandom pages have fluid widths. That means they change a bit according to the size of the browser window. Make sure your design fully works by varying the width of your browser during testing. If you can, test your design on an actual tablet, as well.

Write readable code

Write code that can be read and understood easily. Since your CSS will almost certainly be read by others at some point:

  • annotate it with comments like /* This code does x, y and z */
  • give your custom classes and IDs understandable names. If it makes a box around something, consider calling it .box, not .tlk328
  • add in spacing and indentation to your community's tastes — but pick one format and stick with it
  • organize the code logically, keeping code that affects the same part of the wiki together.

Useful links

Further help and feedback

Retrieved from "https://community.fandom.com/wiki/Help:CSS_best_practices?oldid=3234289"
Community content is available under CC-BY-SA unless otherwise noted.