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. That's not to say there can't be customization and individuality, those are always important to a wiki, but the visitors should be able to rely on the interface and features being in expected places as they move around Fandom.
To customize the view your visitors see, we recommend you use the theme designer. This helps you by automatically selecting text and shading colors based on your chosen scheme. You can also upload a background image and a wordmark.
If you want to go further, then there is a CSS page for each community. This can be used to add formatting to tables and infoboxes, or to control the colors more specifically. It can also be used to add decoration, including borders and font changes to almost any part of the page. It should not be used to change the layout of the frame around the content, to remove, move or reformat the ads or Fandom bar, or to change the wiki's features and functionality.
It's also possible to change the wording of many aspects of the site via MediaWiki messages. However, we recommend care in doing this—for example, if you rename the edit button to "Blah," no one will know what it does!
We encourage experienced users to modify the wiki for themselves rather than adding a high level of variability from the default for their users. You can do this by editing your personal CSS and JS pages—in this space, anything goes!
It's impossible to create an exhaustive list of "do's" and "don'ts" for CSS, there are so many variations! But there are some examples below to help show the key elements.
|Removal, changed placement or changed functionality of ads, spotlights, standard Fandom features||The user interface and advertisements are the basic, expected functions of the site, and must remain in place. A visitor should always see the “Edit” button or the "Recent Changes" button in the same place, and it should work as they expect. Some features are optional, but these should be managed via the settings, rather than being removed via CSS. This helps us to track the features and get accurate data on how they are being used across Fandom.|
|Style and layout changes to Fandom-branded portions of the page||Most notably the global navigation bar (top) and the footer at the bottom of every page. This is the basic framework of the site, containing useful links for all types of visitors, and must retain a consistent appearance across the network. You may not change the color or formatting of the Fandom logo.|
|Site content pushed down for extra banner or logo space||Please don't add anything that will change the position of the article's page title and anything above it. If you want to add a banner, you can do this in the article area, but remember that this will make your content show lower on the page.|
|Changes to the local navigation, page header and article header||The local navigation (excluding setting the 312 allowed menu links), page header and article header are key elements of the Fandom site design. Navigation menu content may only be added via modification of the navigation system message. Other customization may only be implemented via Theme Designer, with the following exceptions:
|Changes to the page width and right sidebar||The variable width and breakpoints (including the minimum and maximum widths) and right sidebar are key elements of the Fandom site design.|
|Added decoration to buttons, boxes, backgrounds, fonts||Formatting and decoration for your wiki is a great way to personalize and customize it. This is easiest to do via the Theme Designer, but can also be done via CSS. Please do not change the color or formatting of the Fandom logo.|
|Wording on buttons and other elements changed||It's possible to change many aspects of the site using MediaWiki messages, including the wording on many features. We recommend against this—it's best to have a consistent and less confusing interface—but you may have wording tweaks that suit your specific community more closely.|
|Personal CSS/JS to changes ads/features/layout||Any changes are permitted in your personal CSS and JS. These are available for you to personalize your experience as much as your code knowledge allows! You can find help from many of our most experienced users on the Community Central discussions.|
- Learn more about the Theme Designer
- Learn more about CSS and JS customization on Fandom