Help:User style
From Wikipedia, the free encyclopedia
 |
This is a copy of the master help page at Meta. Do not edit this copy. Edits will be lost in the next update from the master page. See below for more information. |
The user can customize fonts, colors, positions of links in the margins, and many other things! This is done through custom Cascading Style Sheets stored in subpages of the user's "User" page.
E.g. To create your own css modifications for the default monobook skin, create a page at Special:Mypage/monobook.css containing the CSS you want to use.
Contents |
General
Note: In the default configuration, any User Style code will be ignored. To enable User Style, the following two settings have to be enabled through LocalSettings.php:
$wgAllowUserJs = true; $wgAllowUserCss = true;
For each user-definable style, a skin is first selected, and a corresponding Cascading Style Sheet (CSS). For each skin, the user can make various choices regarding fonts, colors, positions of links in the margin, etc. CSS is specified with reference to selectors [1]: HTML elements, classes and id's specified in the HTML code. Accordingly, what the possibilities are for each skin can be seen by looking at the HTML source code of a page, in particular looking at these classes and id's: the more there are, the more versatility there is.
The defaults for all skins are in MediaWiki:Common.css. Other CSS pages are separate per skin. For example, in the English Wikipedia the defaults are in
- http://en.wikipedia.org/style/monobook/main.css and en:MediaWiki:Monobook.css
- http://en.wikipedia.org/style/wikistandard.css and en:MediaWiki:Standard.css
- http://en.wikipedia.org/style/cologneblue.css and en:MediaWiki:Cologneblue.css
- http://en.wikipedia.org/style/nostalgia.css and en:MediaWiki:Nostalgia.css
- en:MediaWiki:Myskin.css
and here on Meta we have:
- http://meta.wikimedia.org/style/monobook/main.css and MediaWiki:Monobook.css
- http://meta.wikimedia.org/style/wikistandard.css and MediaWiki:Standard.css
- http://meta.wikimedia.org/style/cologneblue.css and MediaWiki:Cologneblue.css
- http://meta.wikimedia.org/style/nostalgia.css and MediaWiki:Nostalgia.css
- MediaWiki:Myskin.css
The files in the style directory are for a given skin probably the same in each project. The name of the style directory is set on installation, see LocalSettings.php#Stylesheet_Location.
In the monobook skin, you can change any aspect of the UI specified in http://en.wikipedia.org/style/monobook/main.css and en:MediaWiki:Monobook.css or similar using your own JavaScript or CSS. The changes are in subpages of your user page, which, e.g. for Monobook on this project, can be reached through the links Special:Mypage/monobook.css and Special:Mypage/monobook.js.
Also you can change the classic skin; your subpages should be named User:username/ standard.css and User:username/ standard.js (and similar for the other skins).
Just enter some css/js in that page. The preview of JS does not work, and that of CSS works in a special way: it allows viewing of the margins of the page (not the contents) on the basis of the style info in the page, provided that the skin used is the skin for which the page applies. This has limitations. E.g., one can preview how links in the margin will look, but these may not be of all the types one would want to check. After saving, while still on the page or while on any other page, do a forced reload (shift-reload/ctrl-f5) to get the new files.
The HTML source contains lines like
<script type="text/javascript" src="/w/wiki.phtml?title=User:username/standard.js&action=raw&ctype=text/javascript"> </script> @import "/style/wikistandard.css"; @import "/w/wiki.phtml?title=User:username/standard.css&action=raw&ctype=text/css";
for the project-wide CSS for the particular skin (in this case here on Meta referring to http://en.wikipedia.org/style/wikistandard.css ) and the personal JS and CSS for a particular skin.
Thus the server provides HTML referring to the CSS and JS files, but it does not do any interpretation of their content. Hence, for example, [[a]] is not interpreted as a link. The interpretation is done by the browser, depending on its capabilities and settings.
For "MySkin" there is no main.css applicable. The applicable personal css page is User:username/ myskin.css (all lowercase!).
CSS
CSS in user subpages vs. css in a local file
In addition to the above, or alternatively, a local CSS can be set on the browser. If one uses multiple browsers, each can be set to a different CSS. Each applies to the whole world wide web, not just a MediaWiki project (and does not depend on being logged in). However, a setting only affects other webpages if they use the same CSS selector; e.g. a setting for the selector a.extiw affects fewer pages on the web than one for h2 (but it affects at least all MediaWiki projects, not just one).
For lines of CSS which should be different on different MediaWiki projects, e.g. for a different background color for easy distinction, clearly the local CSS can not be used; at least these lines should be put in the user subpages.
Some computers, e.g. in internet cafes, do not allow users to set preferences for the browser. In that case the user subpages allow the setting of a user style anyway.
When the browser has been set to the option to ignore the font size specified in the webpage or external CSS, CSS lines regarding font size have to be put in the local CSS.
CSS selectors
The CSS selectors, expressed in terms of elements, classes and id's, relevant for the style of the page body include the following. As far as possible, examples are given, which show the result for the current style settings:
- :link - links - example: help:index ; default: help:index (See a vs :link)
- :link:link
- :link:visited
- :link#contentTop
- :link.external - http://example ; default: http://example
- :link.extiw – interwiki link in page body - en:example ; default: en:example
- :link.image – link from full image to image description page
- :link.internal – link to file itself (Media:), and links from thumbnail and magnifying glass icon to image description page (note that color and font size specified for a.internal are only applicable in the first case) -
- :link.new example ; default: example
- .allpagesredirect - abc - redirects in Special:Allpages and Special:Prefixindex
- body.ns-0, ..., body.ns-15 (namespaces)
- div#bodyContent
- div#column-content
- div#editsection
- div#globalWrapper
- div#tocindent
- div.tocline
- h1.firstHeading
- h2
- h3
- img.tex TeX image
- small - example
- table.toc
a vs :link - It's a common mistake to use "a" instead of ":link" to style links. Whereas ":link" applies only to links, "a" applies to both links and named anchors (e.g. <a name="bookmark">).
Normal internal links are not in class internal (they used to be, and still are on sites that use an older version of the software, e.g. [2]); they can be styled referring to :link and :link:visited, in general, after which styling of :link.extiw etc. can provide for exceptions to this general style for links.
For interlanguage links:
- #p-lang a
One may also have the style depend on the value of an attribute, e.g. with the selectors:
- :link[title ="User:username"]
- :link[title ="pagename"]
- :link[href ="full url "]
to color-code or highlight particular users (including oneself) and/or links to particular pages (like the bolding of watched pages on Recent Changes). This works in Opera, but not in IE. See also Help:Watching pages#CSS.
The watchlist and Recent Changes use two classes:
- autocomment
example
- new (see below)
The page history has classes autocomment and:
- user
- minor
Thus the font specified for user applies in the page history, but not in the watchlist or Recent Changes.
Edit page
- Edit box: textarea#wpTextbox1
- Edit summary box: input#wpSummary
Major style blocks
See Customization:Explaining_skins#Major_style_blocks_by_name
Non-display
One extreme "style" for a text is not displaying it, with
.classname {display: none}
#id {display: none}
etc.
Non-displayed links do not work (as opposed to links in a very small font).
It cannot be used to remove text in expressions for template names, parameter names, parameter values, page names in links, etc.
On Meta MediaWiki:Common.css contains
".hiddenStructure {display: none}".
Style depending on a parameter or variable
Variable class or id
A class or id can depend on the result produced by a template or on a template parameter, e.g. class="abc{{{1|def}}}". For one or more of the possible class names the style of that class can be defined. If the class is undefined it is ignored, so the standard style is used.
In the simplest case we have e.g. class="abc{{{1}}}" and define class abcdef. If the parameter value is "def" it applies.
If a page for general use only makes sense when styles are defined for certain classes, then these have to be specified in the page MediaWiki:Common.css, which applies for all users and all skins, as far as not overridden. In this project:
/* ATTENTION ADMINISTRATORS:
This is the CSS for all skins. Any major changes to this page or Monobook.css should be first proposed on the Village pump.
Testing can be done on your own user Monobook.css. In Mozilla and Opera, you can also test style changes dynamically with the test styles bookmarklet from squarefree.com. It pops up a window for adding style rules, and updates the page as you type.
Always check with the W3C CSS Validation Service (CVS version) before and after any changes.
See also: catalogue of CSS classes.
Thank you.
- /
/*
*/
/* Main page fixes */
#interwiki-completelist {
font-weight: bold;
}
body.page-Main_Page #ca-delete {
display: none !important;
}
/* Add space below the toolbar */
#toolbar {
margin-bottom: 6px;
}
/* make the list of references look smaller */
ol.references {
font-size: 100%;
}
.references-small { font-size: 90%;}
/* VALIDATOR NOTICE: the following is correct, but the W3C validator doesn't accept it */
/* -moz-* is a vendor-specific extension (CSS 2.1 4.1.2.1) */
/* column-count is from the CSS3 module "CSS Multi-column Layout" */
/* Please ignore any validator errors caused by these two lines */
.references-2column {
font-size: 90%;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.same-bg { background: none; }
/* Highlight clicked reference in blue to help navigation */
ol.references > li:target {
background-color: #DEF;
}
sup.reference:target {
background-color: #DEF;
}
/* Styling for citations */
cite {
font-style: normal;
word-wrap: break-word;
}
/* If there is an inline link to a full citation, the full citation will turn blue when the inline link is clicked */
cite:target {
background-color: #DEF;
}
/* Do not expand URLs within citations for printing. The URLs should be included explicitly, to avoid confusion */
@media print {
#content cite a.external.text:after {
display: none;
}
}
/* For linked citation numbers and document IDs, where the number need not be shown on a screen or a handheld, but should be included in the printed version */
@media screen, handheld, projection {
cite *.printonly {
display: none;
}
}
/* wikitable/prettytable class for skinning normal tables */
table.wikitable,
table.prettytable {
margin: 1em 1em 1em 0;
background: #f9f9f9;
border: 1px #aaa solid;
border-collapse: collapse;
}
table.wikitable th, table.wikitable td,
table.prettytable th, table.prettytable td {
border: 1px #aaa solid;
padding: 0.2em;
}
table.wikitable th,
table.prettytable th {
background: #f2f2f2;
text-align: center;
}
table.wikitable caption,
table.prettytable caption {
margin-left: inherit;
margin-right: inherit;
font-weight: bold;
}
table.prettytable code,
table.wikitable code {
background-color: transparent;
}
/* default skin for navigation boxes */
table.navbox { /* navbox container style */
border:1px solid #aaa;
width:100%;
margin:auto;
clear:both;
font-size:88%;
text-align:center;
padding:1px;
}
table.navbox + table.navbox {
margin-top:-1px; /* single pixel border between adjacent navboxes (doesn't work for IE6, but that's okay) */
}
.navbox-title, .navbox-abovebelow, table.navbox th {
text-align:center; /* title and above/below styles */
padding-left:1em;
padding-right:1em;
}
.navbox-group { /* group style */
white-space:nowrap;
text-align:right;
font-weight:bold;
padding-left:1em;
padding-right:1em;
}
.navbox, .navbox-subgroup {
background:#fdfdfd; /* Background color */
}
.navbox-list {
border-color:#fdfdfd; /* Must match background color */
}
.navbox-title, table.navbox th {
background:#ccccff; /* Level 1 color */
}
.navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title {
background:#ddddff; /* Level 2 color */
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
background:#e6e6ff; /* Level 3 color */
}
.navbox-even {
background:#f7f7f7; /* Even row striping */
}
.navbox-odd {
background:transparent; /* Odd row striping */
}
@media print {
.navbox {
display: none;
}
}
/* Infobox template style */
.infobox {
border: 1px solid #aaa;
background-color: #f9f9f9;
color: black;
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
float: right;
clear: right;
}
.infobox td,
.infobox th {
vertical-align: top;
}
.infobox caption {
font-size: larger;
margin-left: inherit;
}
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #aaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}
.infobox.sisterproject {
width: 20em;
font-size: 90%;
}
@media print {
.infobox.sisterproject {
display: none;
}
}
.infobox.standard-talk {
border: 1px solid #c0c090;
background-color: #f8eaba;
}
.infobox.standard-talk.bordered td,
.infobox.standard-talk.bordered th {
border: 1px solid #c0c090;
}
/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
border: 0;
border-top: 1px solid #aaa;
border-right: 1px solid #aaa;
}
.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
border: 0;
border-right: 1px solid #aaa;
}
/* Styles for geography infoboxes, e.g. countries, country subdivisions, cities, etc. */
.infobox.geography {
text-align: left;
border-collapse: collapse;
line-height: 1.2em;
font-size: 90%;
}
.infobox.geography td,
.infobox.geography th {
border-top: solid 1px #aaa;
padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
border-top: solid 1px #aaa;
padding: 0.4em 0.6em 0.2em 0.6em;
}
.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th {
border: 0;
padding: 0 0.6em 0.2em 0.6em;
}
.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th {
border-top: 0;
border-bottom: solid 1px #aaa;
padding: 0 0.6em 0.4em 0.6em;
}
.infobox.geography .maptable td,
.infobox.geography .maptable th {
border: 0;
padding: 0;
}
/* Style for "notices" */
.notice {
margin: 1em;
padding: 0.2em;
}
#disambig {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.spoiler {
border-top: 2px solid #ddd;
border-bottom: 2px solid #ddd;
}
/* Standard talk template style */
.Talk-Notice {
border: 1px solid #C0C090;
background-color: #F8EABA;
margin-bottom: 3px;
width: 85%;
border-spacing: 3px;
margin-left: auto;
margin-right: auto;
}
.Talk-Notice:after {
content: "The CSS for this template should be changed. See [[Wikipedia:Template Standardisation]].";
}
/* Make template background appear correctly on all browsers */
.Talk-Notice td {
background: inherit;
}
/* Persondata and other (future) metadata */
table.InChI, /* temporary */
table.persondata {
border: 1px solid #aaa;
display: none;
speak: none;
}
.InChI-label, /* temporary */
.persondata-label {
color: #aaa;
}
/* Makes redirects appear in italics in categories and on [[Special:Allpages]] */
.redirect-in-category, .allpagesredirect {
font-style: italic;
}
/* Class for links with loudspeaker icon next to them */
/* (Used in [[Template:Audio]] and the like to make the speaker clickable) */
.audiolink a {
background: url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Loudspeaker.svg/11px-Loudspeaker.svg.png") center left no-repeat !important;
padding-left: 16px !important;
padding-right: 0 !important;
}
/* Icons for medialist templates [[Template:Listen]], [[Template:Multi-listen_start]], [[Template:Video]], [[Template:Multi-video_start]] */
div.listenlist {
background: url("http://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Gnome-speakernotes.png/30px-Gnome-speakernotes.png");
padding-left: 40px;
}
div.videolist, div.multivideolist {
background: url("http://upload.wikimedia.org/wikipedia/en/thumb/2/20/Tango-video-x-generic.png/40px-Tango-video-x-generic.png");
padding-left: 50px;
}
/* Style rules for media list templates */
div.medialist {
min-height: 50px;
margin: 1em;
background-position: top left;
background-repeat: no-repeat;
}
div.medialist ul {
list-style-type: none;
list-style-image: none;
margin: 0;
}
div.medialist ul li {
padding-bottom: 0.5em;
}
div.medialist ul li li {
font-size: 91%;
padding-bottom: 0;
}
/* Change the external link icon to an Adobe icon for all PDF files */
/* (in browsers that support these CSS selectors, like Mozilla and Opera) */
#bodyContent a[href$=".pdf"].external,
#bodyContent a[href*=".pdf?"].external,
#bodyContent a[href*=".pdf#"].external,
#bodyContent a[href$=".PDF"].external,
#bodyContent a[href*=".PDF?"].external,
#bodyContent a[href*=".PDF#"].external,
#mw_content a[href$=".pdf"].external,
#mw_content a[href*=".pdf?"].external,
#mw_content a[href*=".pdf#"].external,
#mw_content a[href$=".PDF"].external,
#mw_content a[href*=".PDF?"].external,
#mw_content a[href*=".PDF#"].external {
background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Icons-mini-file_acrobat.gif/15px-Icons-mini-file_acrobat.gif) center right no-repeat;
padding-right: 16px;
}
/* Change the external link icon to an Adobe icon anywhere the PDFlink class */
/* is used (notably Template:PDFlink). This works in IE, unlike the above. */
span.PDFlink a {
background: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Icons-mini-file_acrobat.gif/15px-Icons-mini-file_acrobat.gif) center right no-repeat !important;
padding-right: 17px !important;
}
span.geolink a {
background: url(http://upload.wikimedia.org/wikipedia/en/a/a7/Monobook-globe.png) center right no-repeat !important;
padding-right: 11px !important;
}
/* Content in columns with CSS instead of tables [[Template:Columns]] */
div.columns-2 div.column {
float: left;
width: 50%;
min-width: 300px;
}
div.columns-3 div.column {
float: left;
width: 33.3%;
min-width: 200px;
}
div.columns-4 div.column {
float: left;
width: 25%;
min-width: 150px;
}
div.columns-5 div.column {
float: left;
width: 20%;
min-width: 120px;
}
/*Add formatting to make sure that "external references" from [[Template:Ref]] do
not get URL expansion, not even when printed. The mechanism up to MediaWiki 1.4 was
that the HTML code contained a SPAN following the anchor A; this SPAN had the class
"urlexpansion", which was not displayed on screen, but was shown when the medium was
"print". The rules below ensure (a) that there is no extra padding to the right of
the anchor (displayed as "[<number>]"), (b) that there is no "external link arrow" for
the link, and (c) that this SPAN of class "urlexpansion" is never shown.
~~~~
*/
.plainlinksneverexpand {
background: none ! important;
padding: 0 ! important;
}
.plainlinksneverexpand .urlexpansion {
display: none ! important;
}
/* Make sure that ext links displayed within "plainlinksneverexpand" don't get
the arrow...
*/
.plainlinksneverexpand a {
background: none !important;
padding: 0 !important;
}
/* With MediaWiki 1.5, the mechanism has changed: instead of a SPAN of class "urlexpansion"
following the anchor A, the anchor itself now has class "external autonumber" and the
expansion is inserted when printing (see the common printing style sheet at
http://en.wikipedia.org/skins-1.5/common/commonPrint.css) using the ":after" pseudo-
element of CSS. We have to switch this off for links due to Template:Ref!
*/
.plainlinksneverexpand a.external.text:after {
display: none !important;
}
.plainlinksneverexpand a.external.autonumber:after {
display: none !important;
}
/* Messagebox templates */
.messagebox {
border: 1px solid #aaa;
background-color: #f9f9f9;
width: 80%;
margin: 0 auto 1em auto;
padding: .2em;
}
.messagebox.merge {
border: 1px solid #c0b8cc;
background-color: #f0e5ff;
text-align: center;
}
.messagebox.cleanup {
border: 1px solid #9f9fff;
background-color: #efefff;
text-align: center;
}
.messagebox.standard-talk {
border: 1px solid #c0c090;
background-color: #f8eaba;
}
.messagebox.nested-talk {
border: 1px solid #c0c090;
background-color: #f8eaba;
width: 100%;
margin: 2px 0 0 0;
padding: 2px;
}
.messagebox.small {
width: 238px;
font-size: 85%;
float: right;
clear: both;
margin: 0 0 1em 1em;
line-height: 1.25em;
}
.messagebox.small-talk {
width: 238px;
font-size: 85%;
float: right;
clear: both;
margin: 0 0 1em 1em;
line-height: 1.25em;
background: #F8EABA;
}
/* Article message box styles */
table.ambox { /* 10% = Will not overlap with other elements */
margin: -1px 10%; /* -1px = Single border between stacked boxes in all browsers */
border: 1px solid #aaa;
border-left: 10px solid #1e90ff; /* Default "notice" blue */
background: #fbfbfb;
}
th.ambox-text, td.ambox-text { /* The message body cell(s) */
border: none;
padding: 0.25em 0.5em; /* 0.5em left/right */
width: 100%; /* Make all templates the same width regardless of text length */
}
td.ambox-image { /* The left image cell */
border: none;
padding: 2px 0 2px 0.5em; /* 0.5em left, 0px right */
text-align: center;
}
td.ambox-imageright { /* The right image cell */
border: none;
padding: 2px 0.5em 2px 0; /* 0px left, 0.5em right */
text-align: center;
}
table.ambox-notice {
border-left: 10px solid #1e90ff; /* Blue */
}
table.ambox-speedy {
border-left: 10px solid #b22222; /* Red */
background: #fee; /* Pink */
}
table.ambox-delete,
table.ambox-serious {
border-left: 10px solid #b22222; /* Red */
}
table.ambox-content {
border-left: 10px solid #f28500; /* Orange */
}
table.ambox-style {
border-left: 10px solid #f4c430; /* Yellow */
}
table.ambox-move,
table.ambox-merge {
border-left: 10px solid #9932cc; /* Purple */
}
table.ambox-protection {
border-left: 10px solid #bba; /* Gray-gold */
}
table.ambox.ambox-mini { /* Small floating box variant */
float: right;
clear: right;
margin: 0 0 0 1em;
width: 25%;
}
@media print { /* Do not print article message boxes */
.ambox {
display: none;
}
}
/* Image message box styles */
table.imbox {
margin: 4px 10%;
border-collapse: collapse;
border: 3px solid #1e90ff; /* Default "notice" blue */
background: #fbfbfb;
}
.imbox-text .imbox { /* For imboxes inside imbox-text cells. */
margin: 0 -0.5em; /* 0.9 - 0.5 = 0.4em left/right. */
}
.mbox-inside .imbox { /* For imboxes inside other templates. */
margin: 4px;
}
th.imbox-text, td.imbox-text { /* The message body cell(s) */
border: none;
padding: 0.25em 0.9em; /* 0.9em left/right */
width: 100%;
}
td.imbox-image { /* The left image cell */
border: none;
padding: 2px 0 2px 0.9em; /* 0.9em left, 0px right */
text-align: center;
}
td.imbox-imageright { /* The right image cell */
border: none;
padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */
text-align: center;
}
table.imbox-notice {
border: 3px solid #1e90ff; /* Blue */
}
table.imbox-speedy {
border: 3px solid #b22222; /* Red */
background: #fee; /* Pink */
}
table.imbox-delete {
border: 3px solid #b22222; /* Red */
}
table.imbox-content {
border: 3px solid #f28500; /* Orange */
}
table.imbox-style {
border: 3px solid #f4c430; /* Yellow */
}
table.imbox-move {
border: 3px solid #9932cc; /* Purple */
}
table.imbox-protection {
border: 3px solid #bba; /* Gray-gold */
}
table.imbox-license {
border: 3px solid #88a; /* Dark gray */
background: #f7f8ff; /* Light gray */
}
table.imbox-featured {
border: 3px solid #cba135; /* Brown-gold */
}
/* Category message box styles */
table.cmbox {
margin: -1px 10%;
border: 1px solid #aaa;
background: #DFE8FF; /* Default "notice" blue */
}
th.cmbox-text, td.cmbox-text { /* The message body cell(s) */
border: none;
padding: 0.25em 0.5em; /* 0.5em left/right */
width: 100%;
}
td.cmbox-image { /* The left image cell */
border: none;
padding: 2px 0 2px 0.5em; /* 0.5em left, 0px right */
text-align: center;
}
td.cmbox-imageright { /* The right image cell */
border: none;
padding: 2px 0.8em 2px 0; /* 0px left, 0.8em right */
text-align: center;
}
table.cmbox-notice {
background: #DFE8FF; /* Blue */
}
table.cmbox-speedy {
margin-top: 1px;
margin-bottom: 1px;
border: 4px solid #b22222; /* Red */
background: #FFDBDB; /* Pink */
}
table.cmbox-delete {
background: #FFDBDB; /* Red */
}
table.cmbox-content {
background: #FFE7CE; /* Orange */
}
table.cmbox-style {
background: #FFF9DB; /* Yellow */
}
table.cmbox-move {
background: #F1D0FF; /* Purple */
}
table.cmbox-protection {
background: #EFEFE1; /* Gray-gold */
}
/* Put a checker background at the image description page only visible if the image has transparent background */
#file img {
background: url("http://upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png") repeat;
}
/* Support for Template:IPA, Template:Unicode and Template:Polytonic. The inherit declaration resets the font for all browsers except MSIE6. The empty comment must remain. Please copy any changes to [[Template:IPA fonts]] and [[Template:Unicode fonts]]. */
.IPA {
font-family: "Charis SIL", "Doulos SIL", Gentium, GentiumAlt, "DejaVu Sans", Code2000, "TITUS Cyberbit Basic", "Arial Unicode MS", "Lucida Sans Unicode", "Chrysanthi Unicode";
font-family /**/:inherit;
}
.Unicode {
font-family: Code2000, Code2001, "Free Serif", "TITUS Cyberbit Basic", "Doulos SIL", "Chrysanthi Unicode", "Bitstream Cyberbit", "Bitstream CyberBase", Thryomanes, Gentium, GentiumAlt, "Lucida Grande", "Free Sans", "Arial Unicode MS", "Microsoft Sans Serif", "Lucida Sans Unicode";
font-family /**/:inherit;
}
.latinx {
font-family: Code2000, Code2001, "TITUS Cyberbit Basic", "Microsoft Sans Serif";
font-family /**/:inherit;
}
.polytonic {
font-family: "Athena Unicode", Gentium, "Palatino Linotype", "Arial Unicode MS", "Lucida Sans Unicode", "Lucida Grande", Code2000;
font-family /**/:inherit;
}
.mufi {
font-family: Alphabetum, Cardo, LeedsUni, Junicode, "TITUS Cyberbit Basic", ALPHA-Demo;
}
/* Pseudo-classes in support of [[Template:lang]]. */
:lang(he) {
font-family: "SBL Hebrew", "Ezra SIL SR", "Ezra SIL", Cardo, "Chrysanthi Unicode", "TITUS Cyberbit Basic", "Arial Unicode MS", Narkisim, "Times New Roman";
font-family /**/:inherit;
}
:lang(fa) {
font-family: "Nafees Nastaleeq", "Pak Nastaleeq", PDMS_Jauhar;
font-family /**/:inherit;
}
:lang(ps) {
font-family: "Nafees Nastaleeq", "Pak Nastaleeq", PDMS_Jauhar;
font-family /**/:inherit;
}
:lang(ur) {
font-family: "Nafees Nastaleeq", "Pak Nastaleeq", PDMS_Jauhar;
font-family /**/:inherit;
}
:lang(sux-Xsux) {
font-family: Akkadian;
font-family /**/:inherit;
}
:lang(ja) {
font-family: Code2000, "Arial Unicode MS", "Bitstream Cyberbit", "Bitstream CyberCJK", IPAGothic, IPAPGothic, IPAUIGothic, "Kochi Gothic", IPAMincho, IPAPMincho;
font-family /**/:inherit;
}
:lang(ko) {
font-family: "Adobe Myungjo Std M", AppleMyungjo, "Baekmuk Batang", "Baekmuk Gulim", Batang, Dotum, DotumChe, Gulim, GulimChe, HYGothic-Extra, HYMyeongJo-Extra, "New Gulim", UnBatang, UnDotum, UnYetgul, UWKMJF;
font-family /**/:inherit;
}
:lang(zh-Hans) {
font-family: "Adobe Song Std L", "AR PL ShanHeiSun Uni", "AR PL ShanHeiSun Uni MBE", "MS Hei", "MS Song", SimHei;
font-family /**/:inherit;
}
:lang(zh-Hant) {
font-family: "Adobe Ming Std L", "AR PL New Sung", "AR PL ZenKai Uni", "AR PL ZenKai Uni MBE", MingLiU, PMingLiU;
font-family /**/:inherit;
}
:lang(grc) {
font-family: "Athena Unicode", Gentium, "Palatino Linotype", "Arial Unicode MS", "Lucida Sans Unicode", "Lucida Grande", Code2000;
font-family /**/:inherit;
}
#wpSave {
font-weight: bold;
}
/* class hiddenStructure is defunct. See [[Wikipedia:hiddenStructure]] */
.hiddenStructure {
display: inline ! important;
color: #f00;
background-color: #0f0;
}
/* suppress missing interwiki image links where #ifexist cannot be used due to high number of requests */
/* use restricted to rail icon management pages */
/* see .hidden-redlink on http://meta.wikimedia.org/wiki/MediaWiki:Common.css */
.check-icon a.new {
display: none;
speak:none;
}
/* Removes underlines from links */
.nounderlines a {
text-decoration: none;
}
/* Remove underline from IPA links */
.IPA a:link, .IPA a:visited {
text-decoration: none;
}
/* Removes useless links from printout */
@media print {
#privacy, #about, #disclaimer {display:none;}
}
#EnWpMpBook { background-image: url(http://upload.wikimedia.org/wikipedia/en/7/7e/MP-open-book.png); }
#EnWpMpSearch { background: url(http://upload.wikimedia.org/wikipedia/en/a/ae/MP-magnifying-glass.png) no-repeat top right; }
#EnWpMpSearchInner { float: right; width: 20em; text-align: center; }
#EnWpMpBook2 { background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/8e/MP-open-book2.png); }
/* Standard Navigationsleisten, aka box hiding thingy from .de. Documentation at [[Wikipedia:NavFrame]]. */
div.Boxmerge,
div.NavFrame {
margin: 0;
padding: 4px;
border: 1px solid #aaa;
text-align: center;
border-collapse: collapse;
font-size: 95%;
}
div.Boxmerge div.NavFrame {
border-style: none;
border-style: hidden;
}
div.NavFrame + div.NavFrame {
border-top-style: none;
border-top-style: hidden;
}
div.NavPic {
background-color: #fff;
margin: 0;
padding: 2px;
float: left;
}
div.NavFrame div.NavHead {
height: 1.6em;
font-weight: bold;
background-color: #ccf;
position:relative;
}
div.NavFrame p {
font-size: 100%;
}
div.NavFrame div.NavContent {
font-size: 100%;
}
div.NavFrame div.NavContent p {
font-size: 100%;
}
div.NavEnd {
margin: 0;
padding: 0;
line-height: 1px;
clear: both;
}
a.NavToggle {
position: absolute;
top: 0;
right: 3px;
font-weight: normal;
font-size: 90%;
}
/* Coloured watchlist numbers */
.mw-plusminus-pos {
color: #006400; /* darkgreen */
}
/* .mw-plusminus-null currently at developer default */
.mw-plusminus-neg {
color: #8B0000; /* darkred */
}
.dablink {
font-style: italic;
padding-left: 2em;
}
.dablink i {
font-style: normal;
}
/* Style for horizontal UL lists */
.horizontal ul {
padding: 0;
margin: 0;
}
.horizontal li {
padding: 0 0.6em 0 0.4em;
display: inline;
border-right: 1px solid;
}
.horizontal li:last-child {
border-right: none;
padding-right: 0;
}
/* Geographical coordinates
To display coordinates using the notation in the source code, write this in your User:Username/monobook.css:
.geo-default { display: inline } .geo-nondefault { display: none }
.geo-dec { display: inline } .geo-dms { display: inline }
To display coordinates using decimal notation, write this in your User:Username/monobook.css:
.geo-default { display: inline } .geo-nondefault { display: inline }
.geo-dec { display: inline } .geo-dms { display: none }
To display coordinates using DMS notation, write this in your User:Username/monobook.css:
.geo-default { display: inline } .geo-nondefault { display: inline }
.geo-dec { display: none } .geo-dms { display: inline }
To display coordinates in both decimal and DMS notation, write this in your User:Username/monobook.css:
.geo-default { display: inline } .geo-nondefault { display: inline }
.geo-dec { display: inline } .geo-dms { display: inline }
.geo-multi-punct { display: inline }
See [[Template:Coor link]] for how these are used.
Note that the classes "geo", "longitude", and "latitude" are not just styles but also used by the [[Geo microformat]], so the names should not be changed.
*/
.geo-default { display: inline; }
.geo-nondefault { display: none; }
.geo-dms { display: inline; }
.geo-dec { display: inline; }
.geo-multi-punct { display: none; }
.longitude, .latitude {
white-space: nowrap;
}
/* This is used for the Geo microformat, but no style is needed for now other than .geo-dec. */
.geo { }
/***** end Geo-related */
/* When <div class="nonumtoc"> is used on the table of contents, the ToC will display without numbers */
.nonumtoc .tocnumber { display:none; }
.nonumtoc #toc ul,
.nonumtoc .toc ul {
line-height: 1.5em;
list-style: none;
margin: .3em 0 0;
padding: 0;
}
.nonumtoc #toc ul ul,
.nonumtoc .toc ul ul {
margin: 0 0 0 2em;
}
/* Allow limiting of which header levels are shown in a TOC; <div class="toclimit-3">, for
instance, will limit to showing ==headings== and ===headings=== but no further (as long as
there are no =headings= on the page, which there shouldn't be according to the MoS). */
.toclimit-2 .toclevel-2 {display:none;}
.toclimit-3 .toclevel-3 {display:none;}
.toclimit-4 .toclevel-4 {display:none;}
.toclimit-5 .toclevel-5 {display:none;}
.toclimit-6 .toclevel-6 {display:none;}
.toclimit-7 .toclevel-7 {display:none;}
/* Allow transcluded pages to display in lists rather than a table. Compatible in Firefox; incompatible in IE6. */
.listify td {display:list-item;}
.listify tr {display:block;}
.listify table {display:block;}
/* Styling for Template:Quote */
blockquote.templatequote { margin-top: 0; }
blockquote.templatequote div.templatequotecite {
line-height: 1em;
text-align: left;
padding-left: 2em;
margin-top: 0;
}
blockquote.templatequote div.templatequotecite cite {
font-size: 85%;
}
div.user-block {
padding: 5px;
border: 1px solid #A9A9A9;
background-color: #FFEFD5;
}
/* Prevents line breaks in links; see docs at Template:Nowraplinks */
.nowraplinks a {
white-space: nowrap;
}
/* For template documentation */
.template-documentation {
clear: both;
margin: 1em 0 0 0;
border: 1px solid #aaa;
background-color: #ecfcf4;
padding: 5px;
}
.thumbinner {
min-width: 100px;
}
/* Inline div's in ImageMaps (code borrowed from de.wiki) */
.imagemap-inline div {
display: inline;
}
/* Increase the height of the image upload box */
#wpUploadDescription {
height: 13em;
}
/* Reduce line-height for <sup> and <sub> */
sup, sub {
line-height: 1em;
}
/*
*/
This is applied in m:Template:m to ft css (backlinks, edit).
Variable HTML attribute name
A HTML attribute name can be made variable. HTML Tidy removes attributes with invalid names at the server side, so the result does not depend on a browser capability to ignore invalid attribute names, and the amount of data sent is reduced. For a variable with possible value "class", see w:en:Wikipedia:HiddenStructure and en:Template:Infobox (backlinks, edit).
Variable style parameter value
Wikitext like
<span style="display:{{{3|none}}}">Wed</span>
displays "Wed" if parameter 3 is defined, but not "none", and displays nothing if parameter 3 is undefined or "none". If the value of parameter 3 is a display style other than "none", that style is applied.
Samples
/* make the background behind the content area and the tabs a light grey */
#content, #content table
#p-cactions ul li a { background: #f5f5f5; }
/* stop background image from scrolling with content area */
body { background-attachment: fixed; }
/* replace the book in the background with something else */
body { background: Purple; }
/* changes the background of pre areas */
pre { background: White }
/* change the logo */
#p-logo a { background: url(http://en.wikipedia.org/upload/wiki.png) 35% 50% no-repeat !important; }
/* don't use any logo, move the boxes onto that area instead */
#p-logo { display: none }
#column-one { padding-top: 0; }
/* suppress the person icon by your username */
li#pt-userpage { background: none }
/* use browser prefs for text size and font */
body, #globalWrapper { font: inherit !important; }
/* always underline links */
:link { text-decoration: underline; }
/*Display body content in a narrower column for easier reading*/
/*adjust percentages as desired*/
div#bodyContent {
width: 50%;
line-height: 105%;
}
/* change background of unselected tabs */
#p-cactions ul li a { background: #C7FDC7; }
/* change background of selected tabs */
#p-cactions ul li.selected a { background: white; }
/* change border background of selected tabs */
#p-cactions li.selected { border-color: #aaaaaa; }
/* tab bottom not removed on hover */
#p-cactions li a:hover { z-index: 0; text-decoration: none; }
#p-cactions li.selected a:hover { z-index: 3; }
/* style the search box and the buttons below it */
input.searchButton {
background-color: #efefef !important;
border: 1px outset !important;
}
#searchInput { border: 1px inset !important; }
/* standard link colors */
:link { color: #0000FF; }
:link:visited { color: #7F007F; }
:link:active, :link.new { color: #FF0000; }
:link.interwiki, :link.external { color: #3366BB; }
:link.stub { color: #772233; }
/* put scrollbar on pre sections instead of ugly cutoff/overlap in firefox */
pre { overflow: auto; }
/* strikeout Upload File link as a reminder to upload to Commons instead */
li#t-upload { text-decoration: line-through; }
Rounded corners in Mozilla
/* make a few corners round, only supported by moz/firefox/other gecko browsers for now */
#p-cactions ul li, #p-cactions ul li a {
-moz-border-radius-topleft: 1em;
-moz-border-radius-topright: 1em;
}
#content {
-moz-border-radius-topleft: 1em;
-moz-border-radius-bottomleft: 1em;
}
div.pBody {
-moz-border-radius-topright: 1em;
-moz-border-radius-bottomright: 1em;
}
/* same following the css3 draft specs, any browsers supporting this? */
#p-cactions ul li, #p-cactions ul li a {
border-radius-topleft: 1em;
border-radius-topright: 1em;
}
#content {
border-radius-topleft: 1em;
border-radius-bottomleft: 1em;
}
div.pBody {
border-radius-topright: 1em;
border-radius-bottomright: 1em;
}
Rounded corners/tabs links
- Moz: see the rules above
- http://www.vertexwerks.com/tests/sidebox/ -- sidebox formatting
- http://www.alistapart.com/articles/slidingdoors2/ -- rounded tabs with rollover effect
- http://www.alistapart.com/articles/customcorners/ -- another variant for rounded box corners
- http://alistapart.com/articles/customcorners2/, Demo of this
- http://www.alistapart.com/articles/mountaintop/ -- even weirder corner variants
- http://www.virtuelvis.com/gallery/css/rounded/ -- simple freestyle variant using the :before and :after pseudo-elements (only css2 browsers, not in IE)
Print view tweaks
/*
** Place all print-specific rules in an @media print block.
*/
/* save ink and paper with very small fonts */
@media print {
#footer,
#content,
body { font-size: 8pt !important; }
h1 { font-size: 17pt }
h2 { font-size: 14pt }
h3 { font-size: 11pt }
h4 { font-size: 9pt }
h5 { font-size: 8pt }
h6 {
font-size: 8pt;
font-weight: normal;
}
}
/* Advanced things: using :before and :after it's possible to add formatting
this here adds the full href of a link after it (not needed in the current version): */
@media print {
#content a:link:after,
#content a:visited:after {
content: " ( " attr(href) " ) ";
}
}
Make the user toolbar a sidebox
Tested to work in Camino, Safari and Internet Explorer 7.
/* Transform the user toolbar into a sidebox */
#p-personal {
position:relative;
z-index:3;
width: 11.6em;
}
#p-personal .pBody {
width: 10.7em;
border: none;
margin: 0 0 0.1em 0em;
float: none;
overflow: hidden;
font-size: 95%;
background: White;
border-collapse: collapse;
border: 1px solid #aaaaaa;
padding: 0 0.8em 0.3em .5em;
}
#p-personal ul {
line-height: 1.5em;
list-style-type: square;
list-style-image: url("/style/monobook/bullet.gif");
font-size:95%;
margin: 0 0 0 1.5em;
padding:0;
text-align:left;
text-transform: none;
}
#p-personal li {
display: list-item;
padding:0;
margin: 0 0 0 0;
margin-bottom: 0.1em;
}
/* suppress the person icon by your username */
/* needed if not already in place */
li#pt-userpage { background: none }
See the monobook main.css for the full styles in use by default.
Fix the sidebar's position while you scroll
The Cologne Blue skin has an option for a "floating left" quickbar, which causes the navigation links and toolboxes and such to stay in the same position on the screen while you scroll. This provides the same functionality for the Monobook skin (in Mozilla). See Help:User style/floating quickbar
Monobook menus with serif fonts in the content area
I've hacked together a q&d combinaton of monobook menus with serif fonts in the text area; there are some quirks and bugs (some because the css scheme of wikipedia doesn't seem to be soo thoughtful), but if you want to give it a try or have a look, go to [3] and copy the first part. No warranty; works on Netscape7/Win98 for me ... -- Tillwe 14:05, 30 May 2004 (UTC)
Update (01.06.04): Now also displays table formatted things more or less correctly. -- Tillwe 17:45, 1 Jun 2004 (UTC)
Moving category links
Moves category links in the upper right corner of content area, and paints them gray -- Tillwe 21:22, 31 May 2004 (UTC)
- Small fix --Ævar Arnfjörð Bjarmason 22:05, 15 Jun 2004 (UTC)
/******************************************************************/
/* moving catlinks to the right */
/******************************************************************/
/* move the catlinks box */
#catlinks {
position:absolute;
z-index:1;
/* border: 1px solid #aaaaaa;
background: #fafaff; */
right:1em;
top:-0.25em;
width:10.5em;
float:right;
margin: 0.2em;
padding:0.2em;
}
/* format the catlinks itself */
p.catlinks {
color: #aaaaaa;
font-family: Verdana,sans-serif;
font-size:67%;
line-height: 1.5em;
text-align:left;
text-indent:0;
text-transform: none;
white-space:normal;
margin: 0.2em;
}
#p-personal h5 {
display: inline;
}
/* format links in the catlinks (as distinguished from ":" and "|") */
p.catlinks a {
color:#888888;
}
Diff view styling
/* don't use a smaller font */
td.diff-addedline, td.diff-deletedline, td.diff-context { font-size: 100% };
/* underline just the text that's different */
span.diffchange { text-decoration:underline; }
External links on css
- http://www.csszengarden.com/ -- inspiration
- http://css-discuss.incutio.com/ -- highly concentrated info, very comprehensive
- http://www.alistapart.com/ -- great articles
- http://www.positioniseverything.net/ -- some entertaining ie bugs and more
- http://meyerweb.com/eric/css/edge/ -- great ideas for advanced css
JavaScript
JavaScript has many possibilities, for example adding text, including links, at the desired positions. This added content may depend on content on the HTML source page produced by the server; for example it may depend on HTML elements with an ID, by applying getElementById. The position of insertion may be specified by insertBefore.
System requirements
User JavaScript customization requires that your wiki administrator sets a configuration variable in LocalSettings.php:
$wgAllowUserJs = true;
As of MediaWiki 1.6.3 if you customize a user JavaScript page such as monobook.js there is no warning message displayed in the case where the Wikipedia is configured to disable user JavaScript. Apparently the best method to determine this is to check your MediaWiki server's LocalSettings.php if you have the access rights to do this, or experiment with adding some custom JavaScript to see if it works. The Firefox Web Developer's extension contains an "information | view JavaScript" function which makes it convenient to check what JavaScript Firefox has loaded or not loaded. The main English Wikipedia site is configured with user JavaScript enabled.
Duplicate edit links at the bottom of the content area
See Help:User style/bottom tabs
Changing access keys
These are now defined/set from js, you can easily customize them by changing some elements in the 'ta' array (see [4]). Example line:
ta['ca-nstab-main'] = new Array('c','View the content page');
The access key is the first value in the array. An example which changes this accesskey to '0':
ta['ca-nstab-main'] = new Array('0','View the content page');
Since alt-d is also a shortcut to the address bar in most browsers, you might want to disable the alt-d shortcut for Delete, by entering an empty string as access key this way:
ta['ca-delete'] = new Array('','Delete this page');
Finally, to disable all access and tooltips drop
ta = false;
in your monobook.js.
The site's global access keys are in corresponding JavaScript for the skins. For example, the keys for Monobook are in the (protected) page MediaWiki:Monobook.js.
To disable or change the global access keys for the 'power user editing shortcuts', you must edit the six (protected) pages starting with the Accesskey prefix in the MediaWiki namespace.
Moving categories to top
The following code moves the category box to the top of the article. Of course, you might want to apply some CSS to make it look prettier:
function catsattop() {
var cats = document.getElementById('catlinks');
var bc = document.getElementById('bodyContent');
bc.insertBefore(cats, bc.childNodes[0]);
}
An alternative that, when coupled with an appropriate stylesheet, will put the text up at about the same line as the title:
function categoryToTop() {
var thebody = document.getElementById('contentTop');
var categories = document.getElementById('catlinks');
if (categories != null) {
categories.parentNode.removeChild (categories);
thebody.parentNode.insertBefore(categories, thebody);
}
}
Some CSS to go with that...
/* move the catlinks box */
#catlinks {
right:1em;
top:-0.25em;
max-width: 50%; /* this limits the box size, but doesn't set strictly */
float: right;
margin: 0.5em;
padding: 0.2em;
}
/* format the catlinks itself */
p.catlinks {
font-size:67%;
text-align:left;
text-indent:0;
text-transform: none;
white-space:normal;
margin: 0.2em;
}
Unfortunately, if the category box is large (such as on entries on U.S. presidents and other major figures), it can push an infobox off to the side. To correct this, the "clear: right" attribute can be added to an infobox.
Wikitext-controlled CSS
CSS can be controlled through JS by wikitext. For example, a HTML element "span" without content can, through its class and id, provide parameters for JS specifying CSS for any parts of the page. For example, if a page contains a "span" element with class FA and id lc, w:en:MediaWiki:Monobook.js specifies the style and title of elements "li" of class interwiki-lc, thus controlling the style and title of the interlanguage link of language code lc in the margin, provided that the skin specifies this class interwiki-lc (E.g., Cologne Blue specifies class='external' for each language, so it does not work for that skin.) See also en:Template:Link FA (backlinks, edit).
External links on JS
- http://www.quirksmode.org/ -- see the JavaScript and DOM section
- http://www.alistapart.com/
- http://www.quirksmode.org/dom/domform.html -- form cloning (might be possible to upload a few images at once using this, also a good starting point for the structure cloning)
See also
- Help:Cascading style sheets
- m:Gallery of user styles
- w:Wikipedia:WikiProject User scripts
- m:Skin projects
- m:Help:Preferences
- m:Help:Namespace#Tab labels
- w:Cascading Style Sheets
- m:Customization:Explaining skins
- mw:Help:Configuration settings (especially mw:Manual:$wgAllowUserJs and mw:Manual:$wgAllowUserCss)
- w:Wikipedia:Tools/Navigation_popups (JavaScript navigation popups)
- w:en:Wikipedia:Catalogue of CSS classes
| edit |
Wikipedia-specific help
This page is a copy of the master help page at Meta (for general help information all Wikimedia projects can use), with two Wikipedia-specific templates inserted. To update the main text, edit the master help page for all projects at m:Help:User style. For Wikipedia-specific issues, use Template:Ph:User style (the extra text at the bottom of this page) or Template:Phh:User style for a Wikipedia-specific lead (text appears at the top of this page). You are welcome to replace the full wikitext of this page with that of the master page at Meta at any time. To view this page in other languages see the master page at Meta.
