Help:Customizing your skin

From Wiktionary, the free dictionary
Jump to navigation Jump to search

A guide to Wiktionary-specific skin customizations for logged-in users.

The files needed to be edited will depend on your current skin (which can be edited at Special:Preferences → "Appearance"):

To preview a page in a different skin, use a URL such as (link).

To preview a page in a mobile theme, add the ?useformat=mobile parameter: (link).

CSS customization


You can customize your CSS file in order to change a few things in your interface. This is simply done by dropping lines of code in that page, saving it and then clearing your cache or perhaps even restarting your browser in order to make them work. Below are a handful of these codes. If these don't suffice, you can guess at them, which might work, or, alternatively, search Meta or Wikipedia to find more.

Wiktionary-specific CSS


Hide translations


Not interested in translations?

.translations { display:none }

The section heading will remain visible, though.

Hide extra horizontal lines between language sections


If you hate seeing this:


add this code to your CSS file:

.ns-0 #bodyContent hr { visibility: hidden }

Note that all horizontal lines in the standard (entry) namespace will be hidden. If you do have problems with any other kinds of pages, please report them so that a solution can be sought.

Sister project boxes


To hide (or manipulate) all sister project boxes:

.sister-project { display: hide }

To hide (or manipulate) certain sister project boxes only:

.sister-wikipedia { display: hide }
.sister-wikiquote { display: hide }

Project Gutenberg rankings


If you find these too intrusive, add this to your CSS file:

#rank { display: none }

Qualifiers and italicized parentheses


Readers can customize the style of the context qualifiers that precede definitions; sense gloss qualifiers that precede synonyms, antonyms, related terms, etc.; and parentheses around italic text within non-italic sentences. Your current style is this:

  1. (context qualifier like this, your current style) a definition... (note..., your current style).
  • (Sense gloss like this, your current style): synonym, synonym, (qualifier like this, your current style) synonym

The default style is with non-italic punctuation:

  1. (context qualifier like this, default style) a definition... (note..., default style).

The punctuation can display in italics:

  1. (context qualifier like this, all italic) a definition... (note..., all italic).
.ib-brac, .ib-comma, .sense-qualifier-colon { font-style: italic }

Qualifiers can display without italics:

  1. (qualifier like this, non-italic) a definition... (note...).
.qualifier-content { font-style:normal }

Qualifiers can display in small caps with no parentheses:

  1. qualifier like this, small caps with no parentheses: a definition... (note...).
  • Sense gloss like this, small caps with no parentheses: synonym, synonym, qualifier like this, small caps with no parentheses synonym
.qualifier-brac { display:none }
.qualifier-content { font-variant: small-caps; font-style:normal }

Qualifiers can display in a smaller font:

  1. (qualifier like this, smaller font) a definition... (note...).
.qualifier-brac, .qualifier-content, .sense-qualifier-colon { font-size:smaller; font-style-normal }

Parentheses can be hidden aggressively. (Warning: This setting creates ungrammatical sentences.)

  1. countable: A domesticated species Felis silvestris of feline animal commonly kept as a house pet.
à le “to the” is never used: contracted into au.
.ib-brac, .term-tr-gloss-paren, .term-gloss-paren { display:none }

“Disambiguation” See also


In the Beer parlour there is a current discussion on the preferred format of the See also section at the top of many pages. To achieve some of the various hard-coded formats:

  1. Indent the section (as if it were preceeded by a colon)
    .disambig-see-also, .disambig-see-also-2 { text-indent: 2em }
  2. Prevent links being bolded:
    .disambig-see-also b, .disambig-see-also-2 b { font-weight: normal }
  3. Add a bottom margin to prevent the the "see also" and the TOC to join.
    .disambig-see-also, .disambig-see-also-2 { margin-bottom:0.5em; }
Selecting the kind of list
  1. azza, bzzb, czzc
    .disambig-see-also .serial-comma, .disambig-see-also-2 .serial-comma { display: inline }
    .disambig-see-also .serial-and, .disambig-see-also-2 .serial-and { display: none }
  2. azza, bzzb, and czzc
    .disambig-see-also .serial-comma { display: inline }
    .disambig-see-also-2 .serial-comma { display: none }
    .disambig-see-also .serial-and, .disambig-see-also-2 .serial-and { display: inline }
  3. azza, bzzb and czzc
    .disambig-see-also .serial-comma, .disambig-see-also-2 .serial-comma { display: none }
    .disambig-see-also .serial-and, .disambig-see-also-2 .serial-and { display: inline }

Gender abbreviation periods


If you prefer gender abbreviations like this:


over this:


add this to your CSS file:

.gender-period { display: inline }

At this time, this feature is used in the gender annotations through Module:gender and number. These are currently hidden by default.

Serial commas


If you prefer lists like this:

One, two, and three

over this:

One, two and three

add this to your CSS file:

.serial-comma { display: inline }

Currently serial commas are hidden by default.

Russian stress marks


Since with current common fonts, the optional stress marks used with Russian by dictionaries can be ugly, they are hidden by default in the places they are of less importance.

If you prefer this:


over this:


add this to your CSS file:

.ru-stress { display: inline }

Different font for definitions


To change all text that is in an ordered list of #, add the following:

.ns-0 ol { font-family: Times New Roman; font-size:125%; }

Or specify as you wish. Some people are fond of italics:

.ns-0 ol { font-style:italic; }

You can also change link styles in definitions:

.ns-0 ol a { font-weight:bold }

And so forth...


defines the main namespace of articles. Other namespaces are:


for Talk:,


for User:, etc. (see Help:Namespace for numbers).

Highlighting the inflection line


To highlight the inflection line (most of the time) add the following to your skin CSS file:

.infl-inline { background-color: #ADFFD6; }

“Form of” definitions


Definitions for non-lemma entries (e.g. the inflected forms of lemma entries) indicate that the term is a special form, such as the plural, of another word. Customize the format of such definitions by adding any of the following:

  • For “form of” definitions with plain (wikilinked only) lemma:
    1. Form of word.
    .use-with-mention { font-style: normal; }
    .use-with-mention .mention { font-style: normal; font-weight: normal; }
  • For “form of” definitions with a bold lemma:
    1. Form of word.
    .use-with-mention { font-style: normal; }
    .use-with-mention .mention { font-style: normal; font-weight: bold; }
  • For “form of” definitions with an italic definition (“qualifier”):
    1. Form of word.
    .use-with-mention { font-style: italic; }
    .use-with-mention .mention { font-style: normal; font-weight: normal; }
  • For “form of” definitions with an italic lemma:
    1. Form of word.
    .use-with-mention { font-style: normal; }
    .use-with-mention .mention { font-style: italic; font-weight: normal; }
  • For “form of” definitions with an italic definition (“qualifier”) and bold lemma:
    1. Form of word.
    .use-with-mention { font-style: italic; }
    .use-with-mention .mention { font-style: normal; font-weight: bold; }



The template {{term}} allows readers to customize the way mentioned terms and phrases appear.

By default, Latin-script (i.e. Roman script, French, German, etc., not just Latin-language) terms and phrases mentioned through {{term}} appear in italics. Readers can toggle the output from italics to bold with browser cookies by selecting “Show other Latin (Roman) script mentions in bold” from WT:PREFS. Alternatively, or for more advanced customization, readers can add any of the following to their style sheets:

  • For plain format (e.g.: From mot + ...):
    .mention-Latn { font-style: normal; }
  • For bold format (e.g.: From mot + ...):
    .mention-Latn { font-weight: bold; }
  • For italicized format (e.g.: From mot + ...):
    .mention-Latn { font-style: italic; }

Further, the default style of the subsequent sense glosses (short definitions) is in double quotes. Readers can easily change the output to single quotes with browser cookies by selecting “Show English glosses for mentioned terms in single quotes” from WT:PREFS. Alternatively, readers can styles to their style sheets:

  • To show English translation glosses in single quotes (e.g.: From mot (‘word’) + ... with word (‘unit of speech’) + ...):
    .mention-gloss-double-quote { display: none; }
    .mention-gloss-single-quote { display: inline; }

The parentheses around transliterations and glosses can be hidden. (Warning: this creates some ungrammatical sentences.)

  • To remove parentheses around all transliterations and glosses (e.g.: From colloquial Arabic عالمة ‘ālima, originally a feminine adjective meaning ‘learned, knowledgeable’, from علم (‘alima, to know).):
    .term-tr-gloss-paren, .term-tr-paren, .term-gloss-paren { display: none }


  1. Show parenthesized plain (non-italic) transliterations.
    .mention-tr-paren, .mention-tr {font-style:normal!important}
  2. Put the [show] checkbox onto the left of the translation bars.
    .NavToggle {float: left!important; position: static!important;
    right: inherit; margin-top: 0.1em; margin-right: 5px;}
  3. Display words in quotations that have been emboldened with Customizing your skin with a square box instead
    .citedterm {border:#333 1px solid; padding: 1px 2px;
    margin: -2px 0px;font-weight: normal;}

CSS that is the same on all wikis


You can customize the sidebar (navigation box, search box, toolbox etc.) in any thinkable way, but the most useful fact is probably that you can get rid of the links you're not using. This is done by adding


after any of the following codes that define the links.

Code Sidebar link
#n-mainpage Main Page
#n-portal Community portal
#n-wiktprefs Wiktionary preferences
#n-requestedarticles Requested entries
#n-recentchanges Recent changes
#n-randompage Random page
#n-help Help
#n-sitesupport Donations
#n-contact Contact us
#t-whatlinkshere What links here
#t-recentchangeslinked Related changes
#t-contributions User contributions
#t-upload Upload file
#t-specialpages Special pages
#t-print Printable version
#t-permalink Permanent link

For example,

#n-sitesupport {display:none}

hides the Donations link from the Navigation box. You can also group these together, saying

#n-sitesupport, #n-mainpage, #n-portal {display:none}

which works for them all.

With JavaScript, you can do the reverse and append links that you often use but are not in the sidebar by default.


Don't like the logo and/or its pronunciation? Hide it.

#p-logo { display: none }

The following will move the sidebar into its place for monobook skins.

#column-one { padding-top: 0; }

The following will move the sidebar into its place for vector skins.

#mw-panel {top:0!important;}

Enlargen diffs


Annoyed by the small letters when viewing diffs in page histories?

td.diff-addedline { font-size: 100%; }
td.diff-deletedline { font-size: 100%; }
td.diff-context { font-size: 100%; }

Change headers


Level 1 headers?

h1 { font-weight: bold }

Level 2?

h2 { font-size: 140%; color: purple; font-weight: bold; }

Level 3?

h3 { font-style:italic; margin-left:1em }

Pagetitle header only?

.firstHeading { font-family: Courier New }

Highlight active reference


Highlight references when clicked, making it easier to find which one you clicked in a long list.

/* Highlight clicked reference in blue to help navigation */
ol.references > li:target {
  background-color: #DEF;

sup.reference:target {
  background-color: #DEF;


  1. Redirects have a black color in Special:Allpages
    .allpagesredirect a { color:#000000 }
  2. Redirects are struck through in Special:Allpages
    .allpagesredirect { text-decoration:line-through }
  3. Hide categories
    #catlinks { display: none }
  4. Make <pre> boxes scrollable
    pre { overflow: auto; }
  5. Hides MediaWiki:Sitenotice
    #siteNotice { display:none }
  6. Hide everything but language headers in the main namespace
    .ns-0 .toclevel-2,.ns-0 .toclevel-3,.ns-0 .toclevel-4,.ns-0 .toclevel-5,.ns-0 .tocnumber {display:none}
  7. Hides the New messages box on the Watchlist (count still displayed in header)
    .lqt_watchlist_messages_notice {display:none}
  8. Hides the "Take me back" and "New features" links in the header.
    #pt-prefswitch-link-on, #pt-prefswitch-link-anon { display: none }
  9. Hide the special character input beneath the edit field.
    .mw-editTools { display: none }
  10. Make the second half of the heading of Special:RecentChanges smaller
    #bodyContent .minifont {font-size: 75%;.mw-editTools}
  11. Change the bullets in unordered lists to be round.
    ul { list-style-image:none; list-style-type:disc; }

Active CSS pages


JavaScript customization


User JavaScript files are loaded often before other elements, such as the page contents, that we want to edit. The standard way to deal with this is to define functions in a User skin file and then have them run once the page is loaded. For example, to run customizeMyPage() write the following:

function customiseMyPage() {
 //will be run once the page is done loading


The function importScript() allows the use of code in other JavaScript files. For example, the following can be used outside of any function:

//Use wikipedia javascript to add and edit link for the section above the first header
importScript('MediaWiki:Gadget-edittop.js', '');

//Allow watch/unwatch links for pages that are being transcluded (common on WT:Votes)

For a more thorough guide, see w:Wikipedia:WikiProject User scripts/Guide. It details how to add elements to a User's sidebar.

Wiktionary-specific JavaScript


No sense number when there is only one sense


If you've always wanted to see this:


A kind of thing.

instead of the usual:


  1. A kind of thing.

add this to your CSS file:

.ns-0 ol.single-entry-list { margin-left: 0; padding-left: 1em }<br/>
.ns-0 ol.single-entry-list li { list-style-type: none }

And this function to your JavaScript file:

function singleSenses() {
 $("#bodyContent ol").each(function()
  if ($(this).find("li").length == 1) {

Add a colon after disambiguation “See also”


If you prefer this:

See also:

To this:

See also

And this function to your JavaScript file:

function disambigSeeAlsoColon() {
 var alldivs = document.getElementById('bodyContent').getElementsByTagName('div');

 if (alldivs!= -1) {
  for (var i = 0; i < 3; i++) { //alldivs.length; i++) {
   if (alldivs[i].className.match("^disambig-see-also(-2)?$")) {
    var allis = alldivs[i].getElementsByTagName('i');
    if (allis!= -1) {

Hide TTBC categories


If you find all those "Translations to be checked" categories distracting, add this to your CSS file:

.cat-ttbc { display: none }

And this function to your JavaScript file:

// give CSS class to TTBC categories
function ttbcCSS() {
 var catlinks = document.getElementById('catlinks');

 if (catlinks) {
  var allspans = catlinks.getElementsByTagName('span');

  if (allspans!= -1) {
   for (var i = 0; i < allspans.length; i++) {
    if (allspans[i].getElementsByTagName('a').item(0).title.match("Translations to be checked")) {
     allspans[i].className = 'cat-ttbc';

Show interwikis for non-existing words


User:Stratoprutser/404_native.js queries other wiktionaries if a certain word is not found on the current Wiktionary, and displays found interlanguage entries as interwiki links.

To install it, add to your to Special:MyPage/common.js:


Example: User:Stratoprutser/common.js.

For other language versions you'd use:


See also