Help:Advanced CSS and JS

Creating some custom code for your community, or for your own account? This page has more background details to help you with both.

For a more basic overview, see Help:CSS and JS customization.

Note: Community JavaScript is enabled on demand by contacting Fandom Support. Visit Help:JavaScript review process for more information.

CSS and JS cheatsheet
The tables below are summarized guides to most of CSS and JS customization pages. The most common choices are highlighted in green.

Note: the default Fandom skin is sometimes referred to as 'Oasis', the original codename for that layout, or 'Wikia' after the company.

CSS and JS editor error checking
The CSS and JS editors have active error checking ("linting") and syntax highlighting:
 * As you type code, the page will let you know about any errors in the syntax that might have occurred.
 * Note that not every flagged issue has to be solved; CSS (and even JS) technology is ever evolving, and browsers do not all behave identically: some messages may not require action.

Advanced notes

 * Applying CSS to specific pages
 * Using CSS classes, you can apply CSS to specific pages. The  HTML element on articles includes a unique identifier based on the name of the page. For example, on this help page, the class is:
 * The general format is, and spaces, colons, and other special characters are replaced by underscores.
 * There are other classes on the body tag that allow you to apply code by namespace, and more. A browser's "inspect" or "view source" functionality will let you see what is available.
 * There are other classes on the body tag that allow you to apply code by namespace, and more. A browser's "inspect" or "view source" functionality will let you see what is available.


 * Applying JS to specific pages
 * In MediaWiki:Common.js, use a switch to apply JavaScript to certain pages:


 * Applying CSS and JS to specific communities
 * If you prefer to keep most of your personal CSS in one location (global.css), there is a class on the body tag that will let you target specific wikis.
 * It is based on the database name of a community, not the URL - these often match, but not always. The format is:
 * For JS,  can be used to identify a specific community.
 * For JS,  can be used to identify a specific community.


 * Load orders
 * The general load order is the core code, then local community code, then personal code.
 * Within each level, the load order is the "common" code, then skin-specific code.


 * !important in CSS
 * Due to CSS load orders, you may sometimes need to make use of the !important property to ensure a CSS rule is applied.


 * Caching issues
 * Every file you download from the internet gets cached. Normally that's great because it reduces traffic both for your own device and for Fandom's servers, but it can be a problem when it comes to testing design changes. It may take a while before your changes to take effect unless you use the following tricks:


 * You may need to refresh each page you recently opened manually to see the change there.


 * Popular JavaScript snippets
 * To get an idea of some scripts others have written that you might find useful or would like to try, take a look at the list of JS Enhancements on the Fandom Open Source Library.


 * Duplicate JavaScript
 * Many scripts can have problems if they are run multiple times on the same page. Make sure write the code such that a particular piece of code runs only once. Avoid pasting the same JS in multiple files as it will likely conflict and cause confusing errors for you and other visitors.

Further help and feedback
de:Hilfe:Fortgeschrittenes CSS und JS es:Ayuda:CSS y JS avanzado fi:Ohje:Edistynyt CSS ja JavaScript fr:Aide:CSS et JS avancés it:Aiuto:CSS e JS avanzati ja:ヘルプ:CSSとJavaScriptに関する高度な情報 ko:도움말:자바 스크립트 및 CSS 목록 pl:Pomoc:Zaawansowane CSS i JS pt:Ajuda:CSS e JS Avançados ru:Справка:Шпаргалка по CSS и JS uk:Довідка:Шпаргалка по CSS і JS vi:Trợ giúp:CSS và JS nâng cao zh:Help:進階JS和CSS