Wikipedia:Customisation
This is an information page. It is not one of Wikipedia's policies or guidelines; rather, its purpose is to explain certain aspects of Wikipedia's norms, customs, technicalities, or practices. It may reflect differing levels of consensus and vetting. |
Customisation of Wikipedia allows a
Among many other things, registered users can customise the appearance of their
User name and signatures
Your username is displayed in the edit histories of all the articles you contribute to and is linked to your user and talk pages. You choose your name when you first register on Wikipedia and it is usual to stay with the same name throughout your time on the project, though it is possible to request a change of username.
You should always
You can use any wikitext as your signature (simply check the "Treat the above as wiki markup" box). If "Treat the above as wiki markup" is unchecked, the software treats this as your nickname and makes your signature "[[User:Name|Nickname]] ([[User talk:Name|talk]])" which is rendered as:
If something goes wrong and your signature stops working, see
Preferences
The
Skins
A MediaWiki skin is a style of page display. There are differences in the HTML code the system produces (but probably not in the page body), and also different style sheets (
The default is the Vector skin. There are a variety of user-made skins available for you to browse through.
The special page
To test other pages replace the pagename in title=Wikipedia:Customisation
in the URL. For modern browsers the default vector
offers a wide range of user customisations.
Here's a table linking the raw CSS and JS for various skins, see also Help:User style for the Wikipedia:Common.js and common.css.
Skin | Default CSS | Default JS | Personal CSS | Personal JS | ||
---|---|---|---|---|---|---|
Redirects to user's current skin | User:<username>/skin.css | User:<username>/skin.js | ||||
Common (all skins) | MediaWiki:Common.css | [1] | MediaWiki:Common.js | [2] | User:<username>/common.css | User:<username>/common.js |
MinervaNeue | MediaWiki:Minerva.css | [3] | MediaWiki:Minerva.js | [4] | User:<username>/minerva.css | User:<username>/minerva.js |
Modern | MediaWiki:Modern.css | [5] | MediaWiki:Modern.js | [6] | User:<username>/modern.css | User:<username>/modern.js |
MonoBook | MediaWiki:Monobook.css | [7] | MediaWiki:Common.js | [8] | User:<username>/monobook.css | User:<username>/monobook.js |
Vector Legacy (old default) | MediaWiki:Vector.css | [9] | MediaWiki:Vector.js | [10] | User:<username>/vector.css | User:<username>/vector.js |
Vector 2022 (current default) | MediaWiki:Vector-2022.css | MediaWiki:Vector-2022.js | ||||
Timeless | MediaWiki:Timeless.css | [11] | MediaWiki:Timeless.js | [12] | User:<username>/timeless.css | User:<username>/timeless.js |
These pages are named after the skins. The personal skin file names must be written in all lower-case and without any spaces to work properly, while the default skin files have the first letter in upper-case.
selectskin template
Placing {{
Gadgets
The special page My Preferences has a "Gadgets" tab with a list of custom features you may enable for your account. These gadgets require JavaScript to be enabled in your browser. These tools are not part of the core MediaWiki software, and are generally developed and maintained by users on Wikipedia. Additional gadgets can be added by admins. The page Special:Gadgets shows the underlying user script(s) and/or CSS code used for each gadget.
User scripts
There are many user-made tweaks that allow for easier and quicker editing. These often only work on specific skins. Almost all work on Monobook (the old default) and many have been tested on the new default (Vector), but exercise caution. If you're using a different skin, you should be aware that some user scripts may not work with that other skin.
Many user scripts can be implemented simply by checking a box in the Gadgets tab of "my preferences" (see above). For the remaining ones, you implement them by adding them to the appropriate personal JavaScript page. For example, for editor XYZ, using the default Vector skin, the page to be edited (and created, if necessary) would be User:XYZ/vector.js. Such pages can only be edited by the owner of that userspace (in this case, XYZ, regardless of who created the page) and by admins.
Incomplete list of pre-made customisations:
Name | Version | Description | Skins | Author |
---|---|---|---|---|
wikEd | A full-featured in-browser text editor for Wikipedia edit pages. Provides wikicode syntax highlighting, regular expression search and replace, MS Word and HTML to wikicode conversion, server-independent Show preview and Show changes, fullscreen editing mode, and single-click fixing of common mistakes. | Any | Cacycle | |
Edit Top
|
1.1.1 | Allows you to edit just the first section of an article. | MonoBook | pile0nades |
Navigation popups | When you hover over links, popups appear which let you quickly access many editing features and preview articles and images. | Any | Lupin |
Personal CSS
In addition to a personal JavaScript page, you can also have a personal page that uses
As with user scripts, the Gadgets tab of "my preferences" (see above) may include a personal CSS modification that you're interested in; if so, you can simply check a box rather than editing your personal .css page.
Hiding specific messages
A common use of a user's CSS file, requiring direct editing, is hiding certain template messages. For example, you can hide Template:Editnotices/Namespace/Category (which appears when editing a category page) by adding
#category-namespace-editnotice { display: none !important; }
into Special:Mypage/skin.css, which identifies your current skin's CSS file (open in new tab/window to see). If you use multiple skins, e.g. for a different desktop versus mobile look-and-feel, you can place that code in Special:Mypage/common.css so that it applies to all skins.
Note: you need to track down the specific id the relevant message uses; in this example, the ID is "category-namespace-editnotice". You may need to look at the wikitext of the message (e.g. the {{
See the below for a list of commonly hidden elements.
Infoboxes and user style
Users can have
To hide all infoboxes, add the following to Special:MyPage/common.css (for all skins, or Special:MyPage/skin.css for just the current skin), on a line by itself:
div.mw-parser-output .infobox { display: none; }
Alternatively, you can add the following code to your common.js or into a browser user script that is executed by an extension like Greasemonkey:
$('.infobox').hide();
Be aware that although, per
Tidying up the user interface
The following CSS code can be used to hide numerous user interface elements which may be of no use to some users :
#p-coll-print_export, /* Print/export */
#mw-history-searchform, /* Search for revisions at top of history page */
#pt-prefswitch-link-on,
#pt-prefswitch-link-anon,
#editpage-copywarn, /* By saving changes you agree to the terms of use... */
#editpage-copywarn2,
#wpSummaryLabel, /* Edit summary label */
#n-contents, /* link to Portal:Contents */
#n-shoplink, /* Wikipedia Store */
#n-featuredcontent, /* Portal:Featured content */
#n-currentevents, /* Portal:Current events */
#n-portal, /* Wikipedia:Community portal */
#n-aboutsite, /* Wikipedia:About */
#n-sitesupport, /* Donate to WP */
#n-randompage, /* Random Page */
#n-contactpage, /* Contact Us */
#n-mainpage-description, /* Visit Main Page */
#n-help, /* Help:Contents */
#t-upload, /* Upload link */
#t-wikibase, /* wikidata item */
#t-specialpages, /* Special Pages */
#t-recentchangeslinked, /* Recent Changes */
#t-cite, /* Information on how to cite this page */
#footer-info, /* Container for the next two */
#footer-info-lastmod, /* Last modified date */
#footer-info-copyright, /* Text is available under the... */
#footer-places, /* Privacy/About WP/... */
#footer-icons, /* WMF and MediaWiki icons */
#uploadtext, /* Tutorial on upload page (MediaWiki:Uploadtext) */
#pt-betafeatures, /* Beta tab */
#siteSub, /* From Wikipedia, the free encyclopedia */
#t-print, /* Printable version of this page */
#t-curationtoolbar, /* Page Curation */
#feedlinks, /* Atom/RSS */
.posteditwindowhelplinks, /* The (help) links for templates used, parser profiling data and hidden categories. */
.editpage-head-copywarn, /* Content that violates any copyrights... */
.cancelLink, /* Cancel button in edit box */
.editHelp /* Help button in edit box */ { display: none }
#pt-userpage { background: none } /* hides image next to userpage */
The following JS code can be used to hide the languages toolbar :
$('#p-lang').remove();
In VisualEditor, to remove the edit summary help and license warning from VisualEditor's confirmation window, use this in CSS :
.ve-ui-mwSaveDialog-summaryLabel,
.ve-ui-mwSaveDialog-license { display: none }
Replacing labels
To replace 'User page' with 'User', 'Talk' with 'Discussion', 'View history' with 'History' add in JS :
$( '#ca-nstab-user a' ).text( 'User' );
$( '#ca-talk a' ).text( 'Discussion' );
$( '#ca-history a' ).text( 'History' );
When using VisualEditor, if you wish to replace the edit links labels, use the following JS code, and change the labels to your preference :
$( '#ca-edit a' ).text( 'SourceEdit' );
$( '#ca-ve-edit a' ).text( 'VisualEdit' );
$( '.mw-editsection a' ).text( 'SourceEditSection' );
$( '.mw-editsection-visualeditor' ).text( 'VisualEditSection' ); // keep this line after the previous line