Help:Customizing your skin

Shortcut:
WT:CUSTOM

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"):

All skins: common.css
Chick: chick.css/.js
Classic: standard.css/.js
Cologne Blue: cologneblue.css/.js
Minerva (the default mobile theme): minerva.css
Modern: modern.css/.js
Monobook: monobook.css, monobook.js
MySkin: myskin.css/.js
Nostalgia: nostalgia.css/.js
Simple: simple.css/.js
Vector (the default desktop theme): vector.css/.js

To preview a page in a different skin, use a URL such as https://en.wiktionary.org/w/index.php?useskin=monobook&title=apple (link).

To preview a page in a mobile theme, add the ?useformat=mobile parameter: https://en.wiktionary.org/w/index.php?useformat=mobile&title=apple (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:

English

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:

(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:

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

(Sense gloss like this, default style): synonym, synonym, (qualifier like this, default style) synonym

The punctuation can display in italics:

(context qualifier like this, all italic) a definition... (note..., all italic).

(Sense gloss like this, all italic): synonym, synonym, (qualifier like this, all italic) synonym

.ib-brac, .ib-comma, .sense-qualifier-colon { font-style: italic }

Qualifiers can display without italics:

(qualifier like this, non-italic) a definition... (note...).

(Sense gloss like this, non-italic): synonym, synonym, (qualifier like this, non-italic) synonym

.qualifier-content { font-style:normal }

Qualifiers can display in small caps with no parentheses:

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:

(qualifier like this, smaller font) a definition... (note...).

(Sense gloss like this, smaller font): synonym, synonym, (qualifier like this, smaller font) synonym

.qualifier-brac, .qualifier-content, .sense-qualifier-colon { font-size:smaller; font-style-normal }

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

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:

Indent the section (as if it were preceeded by a colon)

.disambig-see-also, .disambig-see-also-2 { text-indent: 2em }

Prevent links being bolded:

.disambig-see-also b, .disambig-see-also-2 b { font-weight: normal }

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

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 }

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 }

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:

m.

over this:

m

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...

.ns-0

defines the main namespace of articles. Other namespaces are:

.ns-1

for Talk:,

.ns-2

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:

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:

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”):

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:

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:

Form of word.

.use-with-mention { font-style: italic; }

.use-with-mention .mention { font-style: normal; font-weight: bold; }

Mentions

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 }
```

More

Show parenthesized plain (non-italic) transliterations.

.mention-tr-paren, .mention-tr {font-style:normal!important}

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;}

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

{display:none}

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.

Hide the Wiktionary logo

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;
}

More

Redirects have a black color in Special:Allpages
```
.allpagesredirect a { color:#000000 }
```

Redirects are struck through in Special:Allpages

.allpagesredirect { text-decoration:line-through }

Hide categories
```
#catlinks { display: none }
```
Make <pre> boxes scrollable
```
pre { overflow: auto; }
```
Hides MediaWiki:Sitenotice
```
#siteNotice { display:none }
```

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}

Hides the New messages box on the Watchlist (count still displayed in header)
```
.lqt_watchlist_messages_notice {display:none}
```

Hides the "Take me back" and "New features" links in the header.

#pt-prefswitch-link-on, #pt-prefswitch-link-anon { display: none }

Hide the special character input beneath the edit field.
```
.mw-editTools { display: none }
```
Make the second half of the heading of Special:RecentChanges smaller
```
#bodyContent .minifont {font-size: 75%;.mw-editTools}
```

Change the bullets in unordered lists to be round.

ul { list-style-image:none; list-style-type:disc; }

Active CSS pages

JavaScript customization

Main article: Wiktionary:User scripts

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
}

$(customiseMyPage);

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', 'en.wikipedia.org');

//Allow watch/unwatch links for pages that are being transcluded (common on WT:Votes)
importScript('MediaWiki:SectionWatchLinks.js');

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:

foo

A kind of thing.

instead of the usual:

foo

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) {
   $(this).addClass("single-entry-list");
  }
 });
}

Add a colon after disambiguation “See also”

If you prefer this:

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:

importScript('User:Stratoprutser/404_native.js');

Example: User:Stratoprutser/common.js.

For other language versions you'd use:

mw.loader.load('//en.wiktionary.org/w/index.php?title=User:Stratoprutser/404_native.js&action=raw&ctype=text/javascript');

Help:Customizing your skin

Contents

CSS customization

Wiktionary-specific CSS

Hide translations

Hide extra horizontal lines between language sections

Sister project boxes

Project Gutenberg rankings

Qualifiers and italicized parentheses

“Disambiguation” See also

Selecting the kind of list

Gender abbreviation periods

Serial commas

Russian stress marks

Different font for definitions

Highlighting the inflection line

“Form of” definitions

Mentions

More

CSS that is the same on all wikis

Sidebar

Hide the Wiktionary logo

Enlargen diffs

Change headers

Highlight active reference

More

Active CSS pages

JavaScript customization

Wiktionary-specific JavaScript

No sense number when there is only one sense

Add a colon after disambiguation “See also”

Hide TTBC categories

Show interwikis for non-existing words

See also

Navigation menu

Help:Customizing your skin

CSS customization

Wiktionary-specific CSS

Hide translations

Hide extra horizontal lines between language sections

Sister project boxes

Project Gutenberg rankings

Qualifiers and italicized parentheses

“Disambiguation” See also

Selecting the kind of list

Gender abbreviation periods

Serial commas

Russian stress marks

Different font for definitions

Highlighting the inflection line

“Form of” definitions

Mentions

More

CSS that is the same on all wikis

Sidebar

Hide the Wiktionary logo

Enlargen diffs

Change headers

Highlight active reference

More

Active CSS pages

JavaScript customization

Wiktionary-specific JavaScript

No sense number when there is only one sense

Add a colon after disambiguation “See also”

Hide TTBC categories

Show interwikis for non-existing words

See also

Navigation menu

Search