Changes: Help:Personal CSS and JS

Revision as of 22:31, 22 February 2021

Through personal CSS and JavaScript, you can change the way Fandom looks and behaves. Things like fonts, colors, and positions of page elements can be altered. However, it will only affect the way that you see Fandom when you're logged into your account, and you have to make alterations to a few, specific user pages, as well as one account preference.

CSS

To customize how the site looks for you using CSS, create and edit Special:MyPage/global.css on ucp.fandom.com. This will apply the changes wherever you go on Fandom.

If you want to apply personal CSS on just one community, visit Special:MyPage/common.css on that community.

JavaScript

You must manually enable personal JS in your preferences before you'll be able to see the effects of changing your personal JS. Please understand the implications of turning the feature on by reading all the notes below. The option can be found on the Appearance tab, under Skin.

The personal JS preference

To customize how site looks for you using JS, create and edit w:c:ucp:Special:MyPage/global.js on ucp.fandom.com. This will apply the changes wherever you go on Fandom.

If you want to apply personal JS on just one community, visit Special:MyPage/common.js on that community.

Before enabling personal JS on your account for the first time, please double-check any existing personal JS you have and make sure you are happy with it.
JS errors can break basic functionality - be careful! (But there may be an easy way out!)
Please avoid including JS that you do not understand and don't import from sources that you do not fully trust or that are not secure.
Fandom cannot be held responsible for any issues that occur as a result from the use of personal JS. It is your responsibility to maintain your personal JS (and CSS).
Note that "personal JS" pages are currently considered to be: /global.js on the UCP Wiki only, and /common.js, and /oasis.js on all wikis.

Additional notes

As noted on the customization policy, personal CSS and JS is an area in which you can make any tweaks you like (so long as they do not adversely affect any other users).
Only account owners can edit their own CSS and JS pages - other users on a community, including admins, cannot edit another user's personal CSS and JS pages.
You can also target specific communities in your global CSS and JS:
- CSS: a wiki-specific class is available on the <body> tag, based on the database name of a community. The format is: .wiki-[database name].
- JS: the wgDBName (database name) variable can be used to target a community.

Troubleshooting

If you come across an issue with your JavaScript or CSS, you can add ?safemode=1 to the end of your current URL. This disables all site and personal CSS and JS.

(The same can be done with community CSS and JS for individual wikis, using ?usesitecss=0 or ?usesitejs=0. However, this functionality is currently broken - use ?safemode=1 instead.)

More information about temporarily disabling your CSS and JS can be found here.

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 '''''personal'' CSS and JavaScript''', you can change the way Fandom looks and behaves. Things like fonts, colors, and positions of page elements can be altered. However, it will only affect the way that you see Fandom when you're [[Help:Logging in|logged into]] your account, and you have to make alterations to a few, specific user pages, as well as one [[Help:Preferences|account preference]].
-'''Personal CSS and JavaScript''' allows you to customize how Fandom looks and behaves in a way that affects your account only.
- advice
+== CSS ==
+To customize how the site looks for you using CSS, create and edit '''[[w:c:ucp:Special:MyPage/global.css|Special:MyPage/global.css]]''' on ucp.fandom.com. This will apply the changes wherever you go on Fandom.
-Any [[Special:UserLogin|logged in]] user can customize the site like this through a couple of user namespace subpages. This allows you to use your own choice of fonts, colors, positions of elements, and many other things. Note that CSS and JS customizations are not generally applied to the mobile skin.
-==CSS==
-To customize how the site looks for you using CSS, create and edit '''[[homepage:w:Special:MyPage/global.css|Special:MyPage/global.css]]''' on [[homepage:w:|Community Central]]. This will apply the changes wherever you go on Fandom.
 If you want to apply personal CSS on just one community, visit '''[[Special:MyPage/common.css]]''' on that community.
+== JavaScript ==
-You can even get more specific and apply your code to a single skin on a single community: [[Special:MyPage/wikia.css]] for the default skin, and [[Special:MyPage/monobook.css]] for Monobook users.
+::''You must '''manually enable''' personal JS in your [[Help:Preferences|preferences]] before you'll be able to see the effects of changing your personal JS. Please '''understand the implications''' of turning the feature on by reading all the notes below. The option can be found on the [[Special:Preferences#mw-prefsection-rendering|'''Appearance''' tab]], under '''Skin'''.''<br />
-==JavaScript==
 [[File:PersonalJSPreference.png|thumb|The personal JS preference]]
+To customize how site looks for you using JS, create and edit '''[[w:c:ucp:Special:MyPage/global.js]]''' on ucp.fandom.com. This will apply the changes wherever you go on Fandom.
-'''Note: as a security checkpoint, you must manually enable personal JS in your [[Help:Preferences|preferences]] before it will run on your account. Before doing so, please make sure to read all the notes below. The option can be found on the [[Special:Preferences#mw-prefsection-under-the-hood|'Under the Hood' tab]], under "Advanced display options".'''
-To customize how site looks for you using JS, create and edit '''[[homepage:w:Special:MyPage/global.js|Special:MyPage/global.js]]''' on [[homepage:w:|Community Central]]. This will apply the changes wherever you go on Fandom.
 If you want to apply personal JS on just one community, visit '''[[Special:MyPage/common.js]]''' on that community.
+* Before enabling personal JS on your account for the first time, please double-check any existing personal JS you have and make sure you are happy with it.
-You can even get more specific and apply your code to a single skin on a single community: [[Special:MyPage/wikia.js]] for the default skin, and [[Special:MyPage/monobook.js]] for Monobook users.
+* JS errors can break basic functionality - be careful! ([[#Troubleshooting|But there may be an easy way out!]])
+* Please avoid including JS that you do not understand and don't import from sources that you do not fully trust or that are not secure.
-Notes:
-* Before enabling personal JS on your account for the first time, please double-check any existing personal JS you have, and make sure you are happy with it.
-* JS errors can break basic functionality - be careful!
-* Please avoid including JS that you do not understand, nor import from sources that you do not fully trust or that are not secure.
 * Fandom cannot be held responsible for any issues that occur as a result from the use of personal JS. It is your responsibility to maintain your personal JS (and CSS).
-* Note that 'personal JS' pages are currently considered to be: global.js, common.js, wikia.js, chat.js, monobook.js, and uncyclopedia.js. Any other .js pages in the user namespace are <em>not</em> currently editable due to security concerns, with only those listed being unlocked for editing.
+* Note that "personal JS" pages are currently considered to be: '''/global.js''' on [[w:c:ucp|the UCP Wiki]] only, and '''/common.js''', and '''/oasis.js''' on all wikis.
-==Additional notes==
+== Additional notes ==
+* As noted on the [[Help:Customization policy|customization policy]], personal CSS and JS is an area in which you can make any tweaks you like (so long as they do not adversely affect any other users).
-If you normally use the [[Help:VisualEditor|VisualEditor]], these pages may open in that editor by default. You will want to use the classic editor instead, linked from the 'Edit' button dropdown.
+* Only account owners can edit their own CSS and JS pages - other users on a community, including admins, cannot edit another user's personal CSS and JS pages.
+*You can also target specific communities in your global CSS and JS:
+** CSS: a wiki-specific class is available on the <code>&lt;body></code> tag, based on the ''database name'' of a community. The format is: <code>.wiki-[database name]</code>.
+** JS: the <code>wgDBName</code> (database name) variable can be used to target a community.
+== Troubleshooting ==
-As noted on the [[Help:Customization policy|customization policy]], personal CSS and JS is an area you can make any tweaks you like (so long as they do not adversely affect any other users).
+If you come across an issue with your JavaScript or CSS, you can add <code>?safemode=1</code> to the end of your current URL. This disables all site and personal CSS and JS.
+(The same can be done with [[Help:Community CSS and JS|community CSS and JS]] for individual wikis, using <code>?usesitecss=0</code> or <code>?usesitejs=0</code>. However, this functionality is currently broken - use ?safemode=1 instead.)
-Only account owners can edit their own CSS and JS pages - other users on a community, including admins, cannot edit another user's personal CSS and JS pages.
+More information about temporarily disabling your CSS and JS can be found [[Help:Advanced CSS and JS#Temporarily disabling CSS.2FJS|here]].
-You can also target specific communities in your global CSS and JS:
-* CSS: a wiki-specific class is available on the <code>&lt;body></code> tag, based on the ''database name'' of a community. The format is: <code>wiki-[database name]</code>.
-* JS: the <code>wgDBName</code> (database name) variable can be used to target a community.
+== See also==
-==
-*[[Help:Community CSS and JS]] (how to create customizations for your community)
+* [[Help:Community CSS and JS|How to customize your community]]
-*[[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 customization|The hub page]] for all CSS and JS details
-==Further help and feedback==
+== Further help and feedback ==
 {{Help and feedback section}}
 [[ca:Ajuda:Estil d'usuari]]
 [[de:Hilfe:Persönliches CSS und JS]]
@@ Line 60: / Line 53: @@
 [[pt:Ajuda:CSS e JS pessoal]]
 [[ru:Справка:Персональный CSS и JavaScript]]
+[[tr:Yardım:Kişisel CSS ve JS]]
 [[uk:Довідка:Персональний CSS і JavaScript]]
 [[vi:Trợ giúp:CSS và JS cá nhân]]