Aide:User style : Différence entre versions

Version actuelle datée du 30 septembre 2005 à 10:39

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 User:YourUserName/monobook.css containing the CSS you want to use.

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

For example in the English Wikipedia, the defaults are in

• http://en.wikipedia.org/style/monobook/main.css and
• http://en.wikipedia.org/style/wikistandard.css and
• http://en.wikipedia.org/style/cologneblue.css and
• http://en.wikipedia.org/style/nostalgia.css and

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.

In the monobook skin, you can now change any aspect of the UI specified in http://en.wikipedia.org/style/monobook/main.css and or similar using your own or. The changes are in a subpage of your user page called monobook.css and 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 works here 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 https://www.fairlatterdaysaints.org/style/wikistandard.css ) and the personal JS and CSS for a particular skin.

For "MySkin" there is no main.css applicable. The applicable personal css page is User:username/ myskin.css (all lowercase!).

See also Help:Sitewide css wiki page.

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 class name; e.g. a setting for the selector a.extiw affects fewer pages on the web than one for h2.

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 (See a vs :link)
• :link:link
• :link:visited
• :link#contentTop
• :link.external - http://example
• :link.extiw – interwiki link in page body -
• :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
• :link.new example
• 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. [1]); 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

• column-content - overall space within the margins of which the content exists.
• content - the white background, thin bordered box which contains the main page content.
• firstHeading - the class of the heading tag at the top of every page
• bodyContent - the main page content within the content box
• contentSub - the name of the wiki immediately underneath the main heading, but above the body text

The portlet class is the style used by all the div blocks around the main content. Identified blocks using that class:

• p-cactions - id for the list of tabs above the main content
• p-personal - id for the list of links that include the login or logout page at the top of the page.
• p-logo - id for the block that contains the logo (in the top left)
• p-navigation - id for the block that contains the navigation links on the left of the page
• p-search - the block that contains the search buttons
• p-tb - the block that contains the toolbox links

The footer at the bottom of the page includes blocks with the following ids

• footer - overall footer container block
• f-poweredbyico - the powered by mediawiki image that normally resides to the right of the page
• f-list - id for the list that contains all the bits of text at the bottom of the page

Template parameters

A class or id can be a template parameter, an element as template parameter does not work.

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 and Safari.

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

Make the quickbar float / sideboxes have fixed position

The Cologne Blue skin has an option for a floating quickbar, which causes the navigation links and toolboxes and such to stay in the same position while you scroll. This attempts to mimic that functionality for the Monobook skin:

/* Floating sidebar */

#p-logo		{ position:fixed; }
#p-personal	{ position:fixed;  top:0em;}
#p-navigation	{ position:fixed;  top:8.5em; }
/* #p-goodies	{ position:fixed;  top:16.5em; } */
#p-support	{ position:fixed;  top:23.5em; }
#p-search	{ position:fixed;  top:19.5em; }
#p-tb		{ position:fixed;  top:24em; z-index:3; }
/* #p-tbx	{ position:fixed;  top:35em; z-index:3; } */
#p-lang		{ position:fixed;  top:33em; z-index:3; }
#footer		{ display:none; }

Problems

• The position of each box is set with an absolute em height, instead of each box being positioned relative to the others. This is not optimum and means the position of the boxes changes after the links are changed or software upgraded. (Note that this version assumes #Make the user toolbar a sidebox is also in place.)
• The footer ends up at the top of the page, so it has been turned off.
• If the article has many interwiki equivalents, they may run off the screen and are non-scrollable.

Moving category links

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

As mentioned above, the page to add is called monobook.js in this case. Want to have the same links as in the tabs also at the bottom of the page? - Clone it onload and drop it somewhere near the bottom. Want to add personal links/boxes/whatever ? You can do it.

Duplicate edit links at the bottom of the content area

See User Styles/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 [2]). Example line:

ta['ca-nstab-main'] = new Array('c','View the content page');

Just change 'c' to something else to change the access key. To disable all access and tooltips, drop

ta = false;

in your monobook.js.

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, 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)
• http://www.quirksmode.org/dom/links.html -- more links with good summaries

See also

• Help:Preferences