Community Central
Register
Community Central

Customization and community identity have always been core to the Fandom experience. That's why Fandom has developed FandomDesktop with further user customizations in mind. While we tested, explored, and iterated upon the "default" look, we also examined heavily-customized communities and tried to understand how additional layers of user-created customizations would affect the final look.

Yet, while customization is important, there must be logical limits in place of what can and can not occur. As people move from one community to another, evolving from reader to editors to founders, it's important that they are able to take what they learn from one wiki and build on that. A key part of this learning experience is having the user interface and features be consistent — visitors should be able to rely on the interface and features being in expected places as they move around Fandom.

The Customization Policy below exists to maintain this critical balance — customization and creative expression on one side and consistency and usability on the other. In particular, the customization policy will focus most strongly on the usability of a community. While various parts of the design are allowed to be modified, we will be more aggressive about ensuring readers with varying levels of technological and physical abilities will be able to use your community.

General Guidelines

Simply because you "can" do something doesn't mean you "should". While there are some specific things we allow and don't allow listed further down the page, it's always a good idea to consider a few things before moving forward with a customization.

Theme Designer. We've built a lot of customization options into our Theme Designer tool. It's designed to allow you to quickly and easily make changes to your design without having to mess with CSS/JS code, which could have unexpected consequences. The Theme Designer should ideally be the starting point for each design, as the effects can immediately be previewed on desktop and mobile, with custom code being an add-on to make additional tweaks here and there.

Discuss changes with your community. It's always important to ensure your community is on board with a site design change. What looks good to you may not look as good to others. It's also important to consider if the proposed change solves a problem or limitation with your current design. If it doesn't, is the change actually necessary?

Consider usability. Critically, remember there are individuals that use your site that may have physical differences that could make a customization detrimental to their reading or editing experience. Avoid a reliance on color coding to be inclusive of colorblind individuals. Make sure any custom fonts or font-sizes can be read by those with a wide range of visual acuities, Test on a screen reader when possible. Be mindful of how opacity and other customizations affect contrast ratios. The Theme Designer checks for accessibility and readability, but custom code does not, so you should be extra cautious with those changes.

Consider desktop versus mobile needs. CSS editing is available on both desktop and mobile (whereas JS editing is only available on desktop). However, just because something works on your desktop CSS files does not mean it will work on the mobile skin or even is permitted! (see below) If you haven't added mobile CSS to your wiki yet, we ask that you start completely fresh with your mobile CSS files rather than copying over your desktop files — copy and paste only what you need a little bit at a time.

Consider desktop screen sizes. Remember that the FandomDesktop design has a fluid width, so how a customization appears on your screen may look different on others. This is especially true if you have a larger-than-average monitor. Hardcoding a CSS change to space things out a certain way on your screen may unexpectedly compress or distort the viewing experience for other users.

Consider performance. It's also important to consider the CSS and JS files take up computational and rendering time, especially if you are loading up an image. Poor speeds can hurt your wiki's SEO, and therefore the ability for readers to find your wiki on search engines. It can also affect users with lower-bandwidth connections or contribute to taking up users' mobile data.

Consider whether a JS script already exists. Fandom's Dev Wiki has a number of pre-written and pre-reviewed JS scripts that you can easily import onto your wiki via the MediaWiki:ImportJS page. Because they're pre-reviewed, that means they don't have to go through Fandom's JavaScript Review process. And by importing them, you're helping the performance of your wiki by relying on pre-written code rather than an entirely new set of code on your wiki.

What Is & Is Not Permitted

It is important to note that all the following policies apply to site-level JavaScript and CSS (i.e. code stored on your wiki's MediaWiki namespace). You may continue to use your personal JavaScript/CSS however you would like as long as it does not affect any other user. Also please note that if a customization makes a part of the community unusable, regardless of what "area" that customization affects, we will ask you to modify or remove it.

Basic Interface Elements & Advertisements The user interface and advertisements are the basic, expected functions of the site, and must remain in place and unaltered. For example, a visitor should always see the "Edit" button or the "Recent Changes" button in the same place, and it should work as they expect. Additionally, custom cursors are not permitted. Some features are optional, but these should be managed via the settings or with staff help, rather than being removed via CSS.
Article Content Space Communities may customize the content area of their community (that is to say the area of the page where user-submitted content is displayed) as desired. On the mobile skin, the content area is compressed due to the limited screen size - you may only modify the written, user-generated text and images that are part of the article. Native in-content placements, like content recommendation modules, should be respected as Basic Interface Elements (see previous section).
Article Page Header The page header may be modified through the use of properly-licensed fonts. However, Fandom staff will be particularly proactive in addressing any issues that negatively impact the usability of this part of the page and will ask you to change it if we deem it unusable.
Background & Theming On the desktop skin, you may override or complement Theme Designer background and themes in so long as you do not break the fluidity of the layout. You may not use CSS to override the warnings for contrast and other accessibility concerns presented via Theme Designer. If you have any questions or concerns about whether a change is allowed, feel free to contact Fandom staff.

On mobile, you may adjust the alignment of the background image, but you may not override or otherwise modify the theme beyond what is available in ThemeDesigner.

Light Mode Vs. Dark Mode Wikis may not use the same theme for light mode and dark mode. The light theme needs to be a properly light theme and the dark theme needs to be properly dark. This is for usability reasons: Fandom automatically defines the text color based on the chosen article background color, with the idea being that a light theme has dark text on a lighter background, and dark theme has light text on a darker background.
Right Rail Additional elements and modules are allowed to be placed in the right rail, below the default elements. However, they may not push down the placement of the advertisement module in that space.
Site Navigation Additional top-level menus may not be added to the local navigation beyond the functionality allowed through the navigation tool. Additional items on all other child menus may be appended as necessary.
Global Navigation We consider this a core element of the site due to both its value to cross-wiki discovery and as the entry point to the user's personalized experience. As such, the global navigation bar may not be altered, repositioned, obscured, or otherwise affected in any way.

See also

Further help and feedback