Wikimedia Meta-Wiki

Help:User style

Other languages:
English · Deutsch · español · français · italiano · русский · 日本語 · 中文

On many MediaWiki sites, users can choose a skin. Additionally, they can customize the appearance of wiki pages including fonts, colors, position of elements, and many other things through custom Cascading Style Sheets and JavaScript code stored in subpages of the user's user page. These pages can override the sitewide default styles.

For example, to create your own modifications for the default vector skin, create a page at Special:MyPage/vector.css containing the CSS you want to use and/or a page at Special:MyPage/vector.js for custom JavaScript.

Note that when this feature is used on Wikimedia projects, the custom style sheets and JavaScript code become publicly viewable, and the user is agreeing to release them under the GFDL and CC-BY-SA 3.0 licenses.

Support in MediaWiki Edit

In the default MediaWiki configuration, any user stylesheets and javascript code are ignored. To enable user styles, the following two settings have to be enabled through LocalSettings.php: 

$wgAllowUserJs  = true;
$wgAllowUserCss  = 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.

General information Edit

The appearance of any page is determined by a combination of site-wide, skin-specific and user-specific styles. The static HTML code depends on the skin.[1] In addition to that the style information is contained in Cascading Style Sheets (CSS), which define fonts, colors, position of various HTML elements and many other things. CSS is specified with reference to selectors ([1]): HTML elements, classes, and identifiers specified in the HTML code. Accordingly, what can be configured for each skin can be seen by looking at the HTML source code of a page, in particular looking at these classes[2] and identifiers[3]: the more there exist, the more versatility is there.[4]

In addition to CSS, there is site-wide, skin-specific and user specific JavaScript as well, which can alter the HTML code (the result being modified HTML code that cannot be explicitly viewed) that changes the appearance of the page by changing the order of HTML elements, creates new elements or removes them altogether. JavaScript can also be used to directly modify the style of the HTML elements.

For any page the style sheets and JavaScript files generally include the following (in this order):

The style files for a given skin are the same in each project.

You can change any aspect of the UI specified by the site-wide or skin-specific styles using your own user style sheets or JavaScript. Just enter some CSS/JS in an appropriate page (see above). 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. 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 code of any page contains lines like 

<script type="text/javascript"
src="/w/wiki.phtml?title=User:&{{username}}/standard.js&amp;action=raw&amp;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 and the personal JS and CSS for a particular skin.

Thus, the server provides the HTML and links (how it works you may know at http://phpforms.net/tutorial/tutorial.html) to the CSS and JS files. The interpretation is done by the browser, depending on its capabilities and settings.

If necessary, custom user styles and scripts can temporarily be deactivated using the safemode=1 URL parameter.

CSS Edit

See also Help:Cascading style sheets

CSS in user subpages vs. css in a local file Edit

As was mentioned above, 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 selectors; 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 Edit

In the monobook skin the CSS selectors 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 – unvisited link – example: help:index ; default: help:index
  • :visited – visited link
  • :link#contentTop
  • :link.external – http://example ; default: http://example
  • :link.extiw – interwiki link in page body – en:example ; default: en:example [6]
  • :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) - Media:example.png
  • :link.new – doesnotexist ; default: doesnotexist
  • .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
  • :link and :visited – It's a common mistake to use "a" instead of ":link" or ":visited" to style links (unvisited and visited, respectively). Whereas later pseudoclasses apply only to links, "a" applies to both links and named anchors (e.g. <a name="bookmark">).
  • #p-lang a – for interlanguage links

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

  • Edit box: textarea#wpTextbox1
example1
  • Edit summary box: input#wpSummary
example2

Major style blocks Edit

See Customization:Explaining_skins#Major_style_blocks_by_name

Non-display Edit

One extreme "style" for a text or image is not displaying it, with 

.classname {display: none}
#id {display: none}

Non-displayed links do not work (as opposed to links in a very small font).

One application is the use of a hidden sortkey in JavaScript table sorting.

It cannot be used to remove text in expressions for template names, parameter names, parameter values, page names in link targets, etc.

These can now be done with ParserFunctions

While "display: none" produces nothing, "visibility: hidden" produces blank spaces replacing the content; its opposite is "visibility: visible".

Example:

p<span style="visibility: hidden">q</span>r gives pqr

Style depending on a parameter or variable Edit

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. Classes for general use should be defined in MediaWiki:Common.css.

In the simplest case we have e.g. class="abc{{{1}}}" and define class abcdef. If the parameter value is "def" it applies. Another example is Template:m to ft css [ talk edit history links ].

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:Template:Infobox [ talk edit history links ].

One more option is to use wikitext like 

<span style="display:{{{3|none}}}">Wed</span>

which 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 Edit 

/* 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: blue; }

/* 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 Edit 

/* 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 corner rules in firefox
Rounded corners/tabs links Edit

Print view tweaks Edit 

/*
** 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 Edit

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: 11.6em;
    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.3em 0.5em 0.3em 0.3em;
}

#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 and by anon IP */
/* needed if not already in place */
li#pt-userpage { background: none }
li#pt-anonuserpage { background: none }

See the monobook main.css for the full styles in use by default.

Fix the sidebar's position while you scroll Edit

 
This script and CSS makes the sidebar stay in the same position on the screen as 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

Add a floating Table of Contents Edit

To get the Table of contents box to show up floating above the content, and fixed on the right hand side of the page, see Help:User style/floating Table of contents.

Monobook menus with serif fonts in the content area Edit

A quick-and-dirty combinaton of Monobook menus with serif fonts in the text area is found at en:User:Tillwe/monobook.css (in the first part). Also displays table-formatted things more or less correctly. There are some quirks and bugs (some because the CSS scheme of Wikipedia doesn't seem to be too thoughtful). Works on Netscape7/Win98 for the author.

Moving category links Edit 

/******************************************************************/
/* 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 Edit 

/* 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 Edit

JavaScript Edit

JavaScript can do many things, 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.

Duplicate edit links at the bottom of the content area Edit

See Help:User style/bottom tabs
 
Bottom tabs in Firefox
 
Simple version of bottom links in action

Changing access keys Edit

Accesskeys and tooltips are managed internally without a dependency on JavaScript. One can override these through interface messages:

See all of them listed: accesskeys and tooltips

Moving categories to top Edit

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 Edit

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 w:Template:Link FA [ talk edit history links ].

Variables Edit

The system provides several useful configuration and page-specific variables. They are documented on MediaWiki.org at Manual:Interface/JavaScript#mw.config

External links on JS Edit

Notes Edit

  1. ↑ For example, in Vector the code for the move link is after that for the watch/unwatch link, while in Monobook the code for the move link comes first, corresponding with the order in which they appear on the rendered page; while CSS can change the order, e.g. move links from the top to the bottom of the page, the complexity of the required CSS code is reduced if the order largely corresponds.
  2. ↑ See also w:Wikipedia:Catalogue_of_CSS_classes#Classes.
  3. ↑ See also w:Wikipedia:Catalogue_of_CSS_classes#IDs.
  4. ↑ For example, Vector produces ca. 100 identifiers. Most are for elements outside the page body. The page body is identified as bodyContent, with inside the elements siteSub, contentSub, jump-to-nav and for the main part of the page body mw-content-text. For some wikitext the system produces identifiers in the page body. This includes one for each section header (the name of the section, with a number attached if there are duplicates), and references (cite_note-1, cite_note-2, etc.). Identifiers can also be specified in the wikitext, in permitted HTML elements.
  5. ↑ w:Special:MyPage/skin.css and w:Special:MyPage/skin.js redirect to the selected skin on the English Wikipedia. This is accomplished with JavaScript, see w:MediaWiki:Common.js.
  6. ↑ The HTML code is <a href="//en.wikipedia.org/wiki/example" class="extiw" title="en:example">en:example</a>, the same in all skins.

See also Edit

styles

scripts

Lua error: too many expensive function calls.

Retrieved from "https://meta.wikimedia.org/w/index.php?title=Help:User_style&oldid=24901432"