Help:User style

Help+Manual 6 User Interface in Windows 8 Metro Style - YouTube

src: i.ytimg.com

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 skin you are presently using, create a page at Special:Mypage/skin.css containing the CSS you want to use (to apply your changes regardless which skin you are using, put them in Special:Mypage/common.css instead). For how to hide particular messages, see WP:CSSHIDE.

Video Help:User style

General

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.

There is CSS in the MediaWiki software itself, and Wikipedia overrides this using the following pages:

Cologne Blue MediaWiki:Cologneblue.css
Modern - MediaWiki:Modern.css
Monobook - MediaWiki:Monobook.css
Vector - MediaWiki:Vector.css

Site-wide CSS is in MediaWiki:Common.css

You can override these for yourself using user styles. To make changes that apply regardless of your current skin, change your common.css. To make changes that affect your current skin, change your skin.css. To make changes that affect all Wikimedia projects, you can login to Meta and change your global.css.

Enter some CSS into that page. Preview 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.

To import CSS from a user subpage, use the importStylesheet command in your common.js:

Maps Help:User style

Rendering

The HTML source of a page contains lines like

for the project-wide CSS for the particular skin (in this case here on Wikipedia referring to //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.

The Division - User Interface style guide - Album on Imgur

src: i.imgur.com

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 cannot be used; at least these lines should be put in the user subpages.

Some computers, e.g. in internet cafes, mobile devices/tablets, 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 - ; 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:

<code>#p-lang a</code>

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
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 meta:Customization:Explaining_skins

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 m: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="abcdef". 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.

Variable HTML attribute name

An HTML attribute name can be made variable. HTML Tidy - an outdated HTML4 library that is slated for removal - has historically removed 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 Wikipedia:HiddenStructure and en:Template:Infobox (backlinks edit).

Variable style parameter value

Wikitext like

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

Custom styles can be placed in each user's personal CSS files, such as Special:MyPage/common.css, which each user can edit to set personal styles.

Rounded corners

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

Make the user toolbar a sidebox

Tested to work in Camino, Safari and Internet Explorer 7.

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

Fix the sidebar's position while you scroll

In the default Vector skin, the sidebar's position can be fixed easily:

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 meta: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 User:Tillwe/monobook.css 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)

Diff view styling

Removing the "(thank)" buttons in History log

Hiding long instruction messages

As with other CSS styles above, edit Special:Mypage/skin.css or Special:Mypage/common.css to insert the customized CSS, and then refresh the browser's cache.

Infoboxes and user style

Users can have user CSS that hides any infoboxes in their own browsers.

To hide all infoboxes, add the following to Special:MyPage/common.css (for all skins, or Special:MyPage/skin.css for just the current skin), on a line by itself:

Alternatively, you can add the following code to your common.js or into a browser user script that is executed by an extension like Greasemonkey:

Be aware that although, per WP:Manual of Style/Infoboxes, all information in an infobox should also be found in the main body of an article, there isn't perfect compliance with this guideline. For example, the full taxonomic hierarchy in {{Taxobox}}, and the OMIM and other medical database codes of {{Infobox disease}} are often not found in the main article content. The infobox is also often the location of the most significant, even only, image in an article.

External links on css

http://www.22bulbjungle.com/ -- great css tutorials
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 i.e. bugs and more
http://meyerweb.com/eric/css/edge/ -- great ideas for advanced css

Are You Mentally Overwhelming Users? (And How to Stop Doing It ...

src: designshack.net

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.

As an example, to add a page link at the left of your preferences, add the following to Special:Mypage/common.js, replacing PageTitle with the title of the wiki page :

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:

An alternative that, when coupled with an appropriate stylesheet, will put the text up at about the same line as the title:

Some CSS to go with that...

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, an 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, 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.)

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)

Downloading the Style Template and Topo Map Vector Data Products ...