Customization policy

As we continue transition our platform’s communities onto our new Unified Community Experience (UCX), you are now getting the chance to design and test how your community will look.

For many of you, beyond the basic theme and color pattern of the wiki, there will be other things to test and redesign. Tweaking your wiki’s appearance often goes well beyond the defaults and into the realms of deeper customization.

As we will explain, with the rollout of the UCX, we are also rolling out an updated Customization Policy - the rules for how and what you can customize in your community. Based on your feedback from the previous version of the Customization Policy, there are a few areas we believe we are able to offer a more open approach. However, there are still some hard and fast, black and white rules that we must lay out. Read on to learn more.

Striking a Balance
Customization and community identity have always been core to the Fandom experience. That’s why Fandom has developed the UCX 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, this new version of the customization policy will focus most strongly on the usability of a community. While we are allowing more parts of the design to be modified than in previous versions of this policy, we are going to 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 & 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 & 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.

Note: Mobile CSS is in limited testing.