Editing Help:User style (section)

=== 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.