Editing Help:User style (section)

== CSS ==
=== CSS in user subpages versus 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:
*<nowiki />{{code|lang=css|code=:link}}&nbsp;— links&nbsp;— example: [[Help:Index]] ; default: <span style="color: #002bb8;">help:index</span> (See [[#note on link selector|a vs :link]])
*<nowiki />{{code|lang=css|code=:link:link}}
*<nowiki />{{code|lang=css|code=:link:visited}}
*<nowiki />{{code|lang=css|code=:link#contentTop}}
*<nowiki />{{code|lang=css|code=:link.external}}&nbsp;— http://example ; default: <span style="color: #36B;"><nowiki>http://example</nowiki></span>
*<nowiki />{{code|lang=css|code=:link.extiw}}&nbsp;– interwiki link in page body – ; default: <span style="color: #36B;">en:example</span>
*<nowiki />{{code|lang=css|code=:link.image}}&nbsp;– link from full image to image description page
*<nowiki />{{code|lang=css|code=:link.internal}}&nbsp;– 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)
*<nowiki />{{code|lang=css|code=:link.new}} [[exampl|example]] ; default: <span style="color: #C20;">example</span>
*{{code|lang=css|code=.allpagesredirect}} – <span class=allpagesredirect>[[abc]]</span> – redirects in [[Special:Allpages]] and [[Special:Prefixindex]]
*{{code|lang=css|code=body.ns-0}}, ..., {{code|lang=css|code=body.ns-15}} (namespaces)
*{{code|lang=css|code=div#bodyContent}}
*{{code|lang=css|code=div#column-content}}
*{{code|lang=css|code=div#editsection}}
*{{code|lang=css|code=div#globalWrapper}}
*{{code|lang=css|code=div#tocindent}}
*{{code|lang=css|code=div.tocline}}
*{{code|lang=css|code=h1.firstHeading}}
*{{code|lang=css|code=h2}}
*{{code|lang=css|code=h3}}
*{{code|lang=css|code=img.tex}} TeX image
*{{code|lang=css|code=small}} – <small>example</small>
*{{code|lang=css|code=table.toc}}

<p id="note_on_link_selector"><strong>{{code|lang=css|code=a}} vs {{code|lang=css|code=:link}}</strong> –
It's a common mistake to use "{{code|lang=css|code=a}}" instead of "{{code|lang=css|code=:link}}" to style links. Whereas "{{code|lang=css|code=:link}}"
applies only to links, "{{code|lang=css|code=a}}" applies to both links and named anchors (e.g. {{code|lang=html|code=<a name="bookmark">}}).
</p>

Normal internal links are not in class {{code|lang=css|code=internal}} (they used to be, and still are on sites that use an older version of the software, e.g. [http://openfacts.berlios.de/index-en.phtml?title=Main_Page]); they can be styled referring to {{code|lang=css|code=:link}} and {{code|lang=css|code=:link:visited}}, in general, after which styling of {{code|lang=css|code=:link.extiw}} etc. can provide for exceptions to this general style for links.

For interlanguage links:
*<nowiki />{{code|lang=css|code=#p-lang a}}

One may also have the style depend on the value of an attribute, e.g. with the selectors:
*<nowiki />{{code|lang=css|code=:link[title ="User:''username''"]}}
*<nowiki />{{code|lang=css|code=:link[title ="''pagename''"]}}
*<nowiki />{{code|lang=css|code=: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:
*{{code|lang=css|code=autocomment}} <div class="autocomment">example</div>
*{{code|lang=css|code=new}} (see below)

The page history has classes {{code|lang=css|code=autocomment}} and:
*{{code|lang=css|code=user}}
*{{code|lang=css|code=minor}}

Thus the font specified for ''user'' applies in the page history, but not in the watchlist or Recent Changes.

==== Edit page ====
*Edit box: {{code|lang=css|code=textarea#wpTextbox1}}
 <div class="textarea#wpTextbox1">example1</div>
*Edit summary box: {{code|lang=css|code=input#wpSummary}}
 <div class="input#wpSummary">example2</div>

==== Major style blocks ====
''See [[meta:Customization:Explaining_skins]]''

==== Non-display ====
One extreme "style" for a text is not displaying it, with
{{sxhl|
.classname {display: none}
#id {display: none}
|css}}
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.

=== 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. <code>class="abc{{{1|def}}}"</code>. 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. <code>class="abc{{{1}}}"</code> 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 [[:mw:Parsing/Replacing Tidy|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 {{tiw|en|Infobox}}.

==== Variable style parameter value ====
Wikitext like
<syntaxhighlight lang="html"><span style="display:{{{3|none}}}">Wed</span></syntaxhighlight>
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.
<syntaxhighlight lang="css">
/* 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(https://upload.wikimedia.org/wikipedia/commons/9/93/Color-chars-logo.png) 35% 50% no-repeat; }

/* 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 */
html, 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 */
.searchButton {
    background-color: #efefef;
    border: 1px outset;
}
#searchInput { border: 1px inset; }

/* standard link colors */
a:link { color: #0645ad; }
a:visited { color: #0b0080; }
a.new:link { color: #cc2200; }
a.new:visited { color: #a55858; }
a.extiw:link { color: #3366bb; } /* links to other Wikipedias */
a.extiw:visited { color: #3366bb; }
a.external:link { color: #3366bb; } /* external links */
a.external:visited { color: #3366bb; }

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

/* center/centre the title of each page */
.firstHeading { text-align: center; }

/* Double-redirect warning */
div.redirectMsg a.mw-redirect:after {
  content: ' &lt;double redirect&gt;';
  color: Red;
  font-style: italic;
}

/* Prevent the new CSS in "Typography Refresh" (since early 2014) from showing page titles and headings in serif font */
h1, h2 { font-family: inherit !important; }

/* Display persondata boxes in articles */
table.persondata { display:table; }

/* Get rid of tedious warnings */
#editpage-copywarn, #editpage-copywarn2, #editpage-copywarn3,
#editpage-head-copywarn, .editpage-head-copywarn,
#editnotice_BLP_editintro, .ve-ui-mwSaveDialog-license
{ display: none !important; }

/* Get rid of tedious noob boilerplate */
#category-namespace-editnotice, #footer-info-copyright, #sitesub, .edithelp,
.posteditwindowhelplinks, #footer-icons, .ve-ui-mwSaveDialog-summaryLabel
{ display: none !important; }

/* Save space in list of templates displayed at end of page when editing */
:templatesUsed ul, :templatesUsed li {display: inline; padding-right: 5px;}

/* Change all text to the font "Avenir" (except headers) (you can change the font to anything else) */
.mw-body h1, .mw-body h2 {
    font-family: "Avenir"
}

</syntaxhighlight>

*[[:Category:Snippets with CSS|snippets with CSS]] MW examples

==== Rounded corners ====
[[Image:Rounded corners.jpg|thumb|100px|Rounded corner rules in Firefox]]
<syntaxhighlight lang="css">
/* make a few corners round */
#p-cactions ul li, #p-cactions ul li a {
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}
#content {
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}
.pBody {
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}
</syntaxhighlight>

==== Print view tweaks ====
<syntaxhighlight lang="css">
/*
** 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) " ) ";
  }
}
</syntaxhighlight>

==== Make the user toolbar a sidebox ====
Tested to work in Camino, Safari and Internet Explorer 7.
<syntaxhighlight lang="css">
/* 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 }
</syntaxhighlight>
See the monobook [http://test.wikipedia.org/style/monobook/main.css main.css] for the full styles in use by default.

==== Fix the top bar's position while you scroll ====
This style allows Vector Legacy users to keep the top bar (with the search bar and the talkpage, edit, userpage, etc. links) visible as you scroll, similar to Vector 2022:

<syntaxhighlight lang="css">
@media screen {
    #mw-head {
        position: fixed;
        background: linear-gradient(to bottom,#fff 50%,#f6f6f6 100%);
    }
}
</syntaxhighlight>

==== Fix the sidebar's position while you scroll ====
In the Vector Legacy skin, the sidebar's position can be fixed easily:

<syntaxhighlight lang="css">
/* Fix sidebar */
div#mw-panel { position: fixed;
  overflow: auto;
  top: 0px;
  bottom: 0px;
  height: 100%;
  /* Prevent content overlay when sidewards scrolling */
  background-color: #F6F6F6;
  border-right: 1px solid #A7D7F9;
}
/* Prevent sidewards scrolling in pre elements */
pre {
  overflow: auto;
  max-height: 25em;
}
</syntaxhighlight>

[[Image:Fixed sidebar.png|thumb|This script and CSS makes the sidebar stay in the same position on the screen as you scroll]]

This may have undesirable side effects in Chrome; e.g., when viewing a page like the very common.css page you just edited to put this code in, the viewable content will become much shorter, and require vertical scrolling in a frame.

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 ====
A quick-and-dirty combinaton of Monobook menus with serif fonts in the text area is found at [[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 ====

<syntaxhighlight lang="css">
/******************************************************************/
/* 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;
}
</syntaxhighlight>

==== Diff view styling ====
<syntaxhighlight lang="css">
/* 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; }
</syntaxhighlight>

==== Removing the "(thank)" buttons in History log ====
<syntaxhighlight lang="css">
/*Suppress "(thank)" buttons*/
.mw-thanks-thank-link { display:none; }
</syntaxhighlight>

==== Hiding long instruction messages ====
<syntaxhighlight lang="css">
/* hide View-Source blurb when editing a protected page */
#mw-protectedpagetext { display: none; }
</syntaxhighlight>

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.

==== Add style formatting to discussion threads ====

There is an experimental style sheet to add vertical lines to the left of discussion threads and to alternate between two different background colours. See [[User:Isaacl/style/discussion-threads]] for more details and a mockup of the appearance.

{{Help:Infobox/user style|heading={{=}}{{=}}{{=}}Infoboxes and user style{{=}}{{=}}{{=}}}}

=== User CSS for a monospaced coding font ===
{{Template:Mxt/User_CSS_for_a_monospaced_coding_font}}

=== External links on CSS ===
* http://www.22bulbjungle.com/ – great css tutorials
* http://www.csszengarden.com/ – inspiration
* http://www.alistapart.com/ – great articles
* http://www.positioniseverything.net/ – some entertaining i.e. bugs and more