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, common.js
- Minerva Neue (the default mobile theme): minerva.css, minerva.js
- Monobook: monobook.css, monobook.js
- Timeless: timeless.css, timeless.js
- Vector legacy (2010): vector.css, vector.js
- Vector (2022) (the default desktop theme): vector-2022.css, vector-2022.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).
The default style is with non-italic punctuation:
- (context qualifier like this, default style) a definition... (note..., default style).
The punctuation can display in italics:
- (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:
- (qualifier like this, non-italic) a definition... (note...).
.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...).
.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...).
.qualifier-brac, .qualifier-content, .sense-qualifier-colon { font-size:smaller; font-style-normal }
Parentheses can be hidden aggressively. (Warning: This setting creates ungrammatical sentences.)
- à 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
Sidebar
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
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:
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) {
allis[0].appendChild(document.createTextNode(':'));
break;
}
}
}
}
}
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');