Wikipedia:Customisation
 | This is an information page. It is not an encyclopedic article, nor 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 registered user to tailor the user experience of Wikipedia according to the user's preferences. User customisation affects only the user's own experience of Wikipedia; it does not affect the reading or editing experience of others. Only registered users can customise their experience of Wikipedia, and the customisation is visible only when the user is logged in.
Among many other things, registered users can customise the appearance of their signature when posting a comment on a discussion (Talk) page. These signature customisations are visible to all users of Wikipedia.
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 sign your posts on talk pages. Signatures are the text that appears before the timestamp when you put ~~~~ on a page. Signatures are customised using "my preferences" under "User profile"; consider these guidelines when customising your signature.
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 Wikipedia:How to fix your signature.
Preferences
The preferences link, visible to logged-in editors, allows you to change a large number of options. There are 11 tabs (User profile, Math, Editing, etc.), of which two merit further discussion - the "Skin" tab and the "Gadgets" tab.
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 (CSS) are used.
The default is the Vector skin. There are a variety of user-made skins available for you to browse through.
The special page My Preferences offers a preview of the various skins for the Main page. This is not exactly interesting for typical articles, therefore here's a list of previews for this 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.
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 {{selectskin}} on a page adds links to switch between different skins easily. This is meant for test pages, not for articles (or other pages in the article namespace). Below is an example of the template's output:
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 Cascading Style Sheets (CSS) to modify the appearance of Wikipedia pages. As with JavaScript, the name of the page that the MediaWiki software will use depends on the skin you're using; the default is vector.css. So, for example, editor XYZ could add personal CSS code to the page User:XYZ/vector.css.
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 {{fmbox}} template, used to build many template messages, has two possible parameters you might see used, id and class). If you don't see it, try asking at the Helpdesk.
See the below for a list of commonly hidden elements.
Infoboxes and user style
Users can have user CSS that hides any infoboxes in their own browsers.
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 WP:Manual of Style/Infoboxes, all information in an infobox ideally should also be found in the main body of an article, there isn't perfect compliance with this guideline. For example, the full taxonomic hierarchy in {{Taxobox}}, and the OMIM and other medical database codes of {{Infobox disease}} are often not found in the main article content. The infobox is also often the location of the most significant, even only, image in an article. There is a userscript which removes infoboxes but moves the images contained to separate thumbnails: User:Maddy from Celeste/disinfobox.js.
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