Changes: Help:Community CSS and JS

Revision as of 10:54, 11 June 2021

Through community CSS and JavaScript, local administrators can affect the way all visitors—logged in or not—see their wikis on desktop and tablets.

Local customization offers great challenge and satisfaction to many editors, so we at Fandom encourage you to try your hand at it. But there are two important things to keep in mind as you do:

Use the Theme designer first, before attempting any CSS customization - it'll likely make your life a lot easier.
There are some limits as to what and how you can customize things, as both our customization policy and Terms of Use explain in greater detail.

CSS

CSSsyntaxHL — Editing a light-themed community's CSS.

To customize your community's CSS, simply edit MediaWiki:Common.css. You can also access this page from the Admin Dashboard via the CSS link. Note: The "CSS" link in the admin dashboard should not be used for now, as it still leads to MediaWiki:Wikia.css which is retired and not loaded on the new FandomDesktop skin.

The Community Central Technical Updates board contains periodic updates about changes that might affect your customizations. Another board, Designing Your Wiki, is a great place to get help from other users if needed.

CSS pages

MediaWiki:Common.css along with MediaWiki:Fandomdesktop.css and MediaWiki:Wikia.css are both used for Fandom's layout. The usage of Wikia.css belongs to the Oasis skin which is going to be removed, while Fandomdesktop.css belongs to the new FandomDesktop skin. Common.css affects both.

MediaWiki:Common.css is loaded first, so the contents will be applied before the other CSS page. For most communities this doesn't matter, but if you use both pages and @import rules (like for importing custom fonts), then these rules must be added at the top of MediaWiki:Common.css to function.

JavaScript

With the exception of imported scripts from the Fandom Developers Wiki through ImportJS, you cannot add custom community JS until you ask Fandom to turn it on for you. After it's enabled, you can add freeform JS, rather than only imports. Whatever JS is there will be loaded for all visitors to your community, whether they're logged in or not. The main pages for adding custom JS are MediaWiki:Common.js and either MediaWiki:Fandomdesktop.js for the new FandomDesktop skin or MediaWiki:Wikia.js for the old Oasis skin.

Be aware of the following:

For security reasons, edits to community JS must go through an approval process.
- Using ImportJS to import existing scripts bypasses the need for the review process.
JS errors can break basic functionality in your community. Please be careful to avoid introducing errors.
Please do not include JS that you do not understand, nor import from sources that you do not fully trust. Additionally, do not import JS from personal JS pages, or from insecure pages.
As with the CSS pages, both Common.js and Fandomdesktop.js or Wikia.js affect the whole wiki.

Some technicalities

Changes you make to either CSS or JS are usually not immediately seen upon publication. This is because of a concept called "caching". If you're in the middle of a lengthy period of editing your CSS and JS, you may have to frequently bypass your cache to see your changes.

Also, Fandom's load order—the priority given to each of the various pages used to customize your wiki—is crucial for administrators to understand. A common reason that some customizations aren't seen is because a later-loading page effectively cancels a declaration made on an earlier-loading page.

Further help and feedback

Browse and search other help pages at Help:Contents
Check Fandom Community Central for sources of further help and support
Check Contacting Fandom for how to report any errors or unclear steps in this article

@@ Line 1: / Line 1: @@
 {{tocright}}
+Through '''''community'' CSS and JavaScript''', local [[Help:Administrators' how-to guide|administrators]] can affect the way '''all''' visitors—[[Help:Logging in|logged in]] or not—see their wikis on '''desktop''' and '''tablets'''.
+Local customization offers great challenge and satisfaction to many editors, so we at Fandom encourage you to try your hand at it. But there are two important things to keep in mind as you do:
-'''Community CSS and JavaScript''' allows local administrators to customize how their wiki looks and behaves for visitors, beyond the abilities provided by the [[Help:Theme designer|Theme Designer]].
+* Use the [[Help:Theme Designer|Theme designer]] '''first''', before attempting any CSS customization - it'll likely make your life a lot easier.
-If you plan on doing this, please be aware of [[Help:Customization policy|Fandom's policy on allowed customizations]] and the {{#NewWindowLink:http://www.wikia.com/Terms_of_Use|Terms of Use}}. Note that CSS and JS customizations cannot be applied to the mobile skin.
+* There are some limits as to what and how you can customize things, as both our [[Help:Customization policy|customization policy]] and [[homepage:terms-of-use|Terms of Use]] explain in greater detail.
 == CSS ==
-[[File:CSSsyntaxHL.png|thumb|Editing a dark-themed community's CSS]]
+[[File:CSSsyntaxHL.png|thumb|300px|Editing a light-themed community's CSS.]]
-To customize your community's CSS, simply edit '''[[MediaWiki:Wikia.css]]'''. You can also access this page from the Admin Dashboard via the 'CSS' link.
+To customize your community's CSS, simply edit '''[[MediaWiki:Common.css]]'''. You can also access this page from the [[Help:Admin Dashboard|Admin Dashboard]] via the '''CSS''' link.
+'''Note:''' The "CSS" link in the admin dashboard should not be used for now, as it still leads to '''MediaWiki:Wikia.css''' which is retired and not loaded on the new FandomDesktop skin.
+The Community Central [[w:Board:Technical Updates|Technical Updates board]] contains periodic updates about changes that might affect your customizations. Another board, [[w:Board:Support Requests - Designing Your Wiki|Designing Your Wiki]], is a great place to get help from other users if needed.
-Each week we release notes on upcoming changes that might affect your community's customizations: {{#NewWindowLink:http://community.wikia.com/index.php?title=Blog:Wikia_Technical_Updates|Technical Update blog posts}}
+=== CSS pages ===
-The Community Central {{#NewWindowLink:http://community.wikia.com/index.php?title=Board:Support_Requests_-_Designing_Your_Wikia|Designing Your Wikia}} forum board is a great place to get help from other users, if needed. See also [[homepage:w:File:Intro to CSS & Your Wiki Webinar|this webinar]] to learn more about custom community CSS.
+[[MediaWiki:Common.css]] along with '''MediaWiki:Fandomdesktop.css''' and '''MediaWiki:Wikia.css''' are both used for Fandom's layout. The usage of Wikia.css belongs to the Oasis skin which is going to be removed, while Fandomdesktop.css belongs to the new FandomDesktop skin. Common.css affects both.
+[[MediaWiki:Common.css]] is loaded first, so the contents will be applied before the other CSS page. For most communities this doesn't matter, but if you use both pages ''and'' <code>@import</code> rules (like for importing custom fonts), then these rules must be added at the top of [[MediaWiki:Common.css]] to function.
-Note: if you want to target the MonoBook skin, edit [[MediaWiki:Monobook.css]].
-=== Common.css ===
+== JavaScript ==
+With the exception of imported scripts from the [[w:c:dev|Fandom Developers Wiki]] through [[Help:Including additional CSS and JS#ImportJS|ImportJS]], you cannot add custom community JS until you [[Special:Contact|ask Fandom]] to turn it on for you. After it's enabled, you can add freeform JS, rather than only imports. Whatever JS is there will be loaded for all visitors to your community, whether they're logged in or not. The main pages for adding custom JS are [[MediaWiki:Common.js]] and either '''MediaWiki:Fandomdesktop.js''' for the new FandomDesktop skin or '''MediaWiki:Wikia.js''' for the old Oasis skin.
-;On all wikis created after July 2014
-:[[MediaWiki:Common.css]] is loaded for the main Fandom skin ''and'' MonoBook. The contents will be applied before [[MediaWiki:Wikia.css]] and [[MediaWiki:Monobook.css]]. For most communities this doesn't matter, but if you use <code>@import</code> rules (like for importing custom fonts), it is best they are added to the top of [[MediaWiki:Common.css]].
+Be aware of the following:
-;On most wikis created before July 2014
-:[[MediaWiki:Common.css]] is loaded for the MonoBook skin but '''not''' the main Fandom skin. If you want to use MediaWiki:Common.css to create rules for both the Fandom and MonoBook skins, [[Special:Contact/general|ask Fandom Staff to enable this]]. If you do so, make sure to clean up any old CSS in MediaWiki:Common.css beforehand, otherwise it may cause unexpected effects.
+* '''For security reasons, edits to community JS must go through [[Help:JavaScript review process|an approval process]]'''.
-== JavaScript ==
+** Using ImportJS to import ''existing'' scripts bypasses the need for the review process.
-To customize your community's JS, simply edit '''[[MediaWiki:Common.js]]'''. This code will be loaded for all visitors to your community.
+* JS errors can break basic functionality in your community. Please be careful to avoid introducing errors.
+* Please do not include JS that you do not understand, nor import from sources that you do not fully trust. Additionally, do not import JS from personal JS pages, or from insecure pages.
+* As with the CSS pages, both '''Common.js''' and '''Fandomdesktop.js''' or '''Wikia.js''' affect the whole wiki.
+== Some technicalities ==
-Notes:
+Changes you make to either CSS or JS are usually not immediately seen upon publication. This is because of a concept called "caching". If you're in the middle of a lengthy period of editing your CSS and JS, you may have to frequently [[Help:Bypass your cache|bypass your cache]] to see your changes.
-* '''For security reasons, edits to community JS must go through an approval process, which is explained in more depth on [[Help:JavaScript review process]]. This may need to be manually enabled for your community - it can be requested via [[Special:Contact/general|Special:Contact]].'''
-* JS errors can break basic functionality on your community - please be careful to avoid introducing errors.
+Also, Fandom's [[Help:Advanced CSS and JS#Load order|load order]]—the priority given to each of the various pages used to customize your wiki—is crucial for administrators to understand. A common reason that some customizations aren't seen is because a later-loading page effectively cancels a declaration made on an earlier-loading page.
-* Please do not include JS that you do not understand, nor import from sources that you do not fully trust. Additionally, do not import JS from personal JS pages, or from insecure pages. The full list of rules are listed on [[Help:JavaScript review process]].
-* If you want to target a specific skin, edit [[MediaWiki:Wikia.js]] for the default skin, and [[MediaWiki:Monobook.js]] for the MonoBook skin.
 == See also ==
-* [[Help:CSS best practices]] - some best practice suggestions for CSS customization
+* [[Help:CSS best practices]] – some best practice suggestions for CSS customization
-* [[Help:Personal CSS and JS]] - creating customizations that only affect you
+* [[Help:Personal CSS and JS]] – creating customizations that only affect you
-* [[Help:Advanced CSS and JS]] - more info for those delving further into the world of CSS and JS editing
+* [[Help:Advanced CSS and JS]] – more info for those delving further into the world of CSS and JS editing
-* [[Help:CSS and JS customization]] - the hub page for all CSS and JS details
+* [[Help:CSS and JS pages]] - an overview of the CSS and JS pages that can be customized at Fandom
+* [[Help:CSS and JS customization]] – the hub page for all CSS and JS details
+* [[Help:Including additional CSS and JS]] – Importing CSS and JS onto your wiki
 == Further help and feedback ==
-{{Help and feedback section}}
+{{Help and feedback section}}[[de:Hilfe:CSS und JS einer Community]]
-[[de:Hilfe:CSS und JS einer Community]]
 [[es:Ayuda:CSS y JS comunitario]]
 [[fi:Ohje:Yhteisön CSS ja JavaScript]]
@@ Line 48: / Line 50: @@
 [[ja:ヘルプ:コミュニティのCSSとJavaScript]]
 [[pl:Pomoc:CSS i JS społeczności]]
-[[pt:Ajuda:CSS e JS locais]]
+[[ru:Справка:CSS и JS локальные]]
+[[pt:Ajuda:CSS e JS da comunidade]]
+[[tr:Yardım:Topluluk CSS ve JS]]
+[[uk:Довідка:CSS і JS локальні]]
 [[vi:Trợ giúp:CSS và JS cộng đồng]]
 [[zh:Help:社區CSS與JS]]