Help:User style

From The Scuba Wiki

Jump to: navigation, search
MediaWiki Handbook: Contents, Readers, Editors, Moderators, System admins +/-

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.

Note that when this feature is used on Wikipedia, the custom style sheet becomes publicly viewable, and the user is agreeing to release it under the GFDL.

For example, to create your own CSS modifications for the default monobook skin, create a page at Special:Mypage/monobook.css containing the CSS you want to use.

Contents

General

Note: In the default configuration, any User Style code will be ignored. To enable User Style, the following two settings have to be enabled through LocalSettings.php: 

$wgAllowUserJs  = true;
$wgAllowUserCss  = true;

For each user-definable style, a skin is selected and a corresponding Cascading Style Sheet (CSS) is imported. 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 identifiers 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 identifiers: the more there are, the more versatility there is.

The default CSS for all skins is in MediaWiki:Common.css and the default JS (on this wiki) comes from wikibits.js, and conditionally some IEFixes files, and MediaWiki:Common.js (see the HTML source of any page; MediaWiki:Common.js is somehow referred to by the URL <http://thescubawiki.com/w/index.php?title=-&amp;action=raw&gen=js>).

Other CSS and JS pages are separate per skin. For example, in the English Wikipedia the default CSS pages are in

and here on Meta we have:

The files for a given skin in the style directory are probably the same in each project. The name of the style directory is selected at installation, see mw:Manual:LocalSettings.php#Stylesheet_Location.

In the monobook skin, you can change any aspect of the UI specified in monobook/main.css and en:MediaWiki:Monobook.css or similar using your own JavaScript or CSS. The changes are in subpages of your user page, which, e.g. for Monobook on this project, can be reached through the links Special:Mypage/monobook.css and Special:Mypage/monobook.js.

For another example, you can change the classic skin as well: 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 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. This has several limitations, e.g. one can preview how links in the margin will look — but there may be other 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 <source lang="javascript"> <script type="text/javascript" src="/w/wiki.phtml?title=User:&Template:Username/standard.js&action=raw&ctype=text/javascript"> </script> @import "/style/wikistandard.css"; @import "/w/wiki.phtml?title=User:&Template:Username/standard.css&action=raw&ctype=text/css"; </source>

for the project-wide CSS for the particular skin (in this case here on Meta referring to wikistandard.css) and the personal JS and CSS for a particular skin.

Thus the server provides the HTML links 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.

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

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 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 ids, 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 - en:example ; 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) - Media:example
  • :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

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
example1
  • Edit summary box: input#wpSummary
example2

Major style blocks

See Customization:Explaining_skins#Major_style_blocks_by_name

Non-display

One extreme "style" for a text or image is not displaying it, with <source lang="CSS"> .classname {display: none}

  1. id {display: none}

</source> etc.

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 sortinghttp://thescubawiki.com/Help:Sorting#Sorting_with_hidden_sortkey.

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

On Meta MediaWiki:Common.css contains <source lang="CSS"> ".hiddenStructure {display: none}". </source>

As a result p<span class="hiddenStructure">q</span>r gives pqr.

While this was used for branching before there was ParserFunctions, more generally it demonstrates that there can be content that by default does not display, but is displayed by users who specify otherwise, see possible values of "display", e.g.:

  • .hiddenStructure {display: inline}
  • .hiddenStructure {display: block}

Examples:

p<span style="display:inline">q</span>r gives pqr
p<span style="display:block">q</span>r gives pqr


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

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

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.

This is applied in template:m to ft css ( talk edit history links ).

Variable HTML attribute name

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:en:Wikipedia:HiddenStructure and w:template:Infobox ( talk edit history links ).

Variable style parameter value

Wikitext like <source lang="html4strict"> Wed </source> 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

<source lang="CSS"> /* make the background behind the content area and the tabs a light grey */

  1. content, #content table
  2. 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 */

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

  1. p-logo { display: none }
  2. 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 */

  1. p-cactions ul li a { background: #C7FDC7; }

/* change background of selected tabs */

  1. p-cactions ul li.selected a { background: white; }

/* change border background of selected tabs */

  1. p-cactions li.selected { border-color: #aaaaaa; }

/* tab bottom not removed on hover */

  1. p-cactions li a:hover { z-index: 0; text-decoration: none; }
  2. 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;

}

  1. 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; } </source>

Rounded corners in Mozilla

<source lang="CSS"> /* make a few corners round, only supported by moz/firefox/other gecko browsers for now */

  1. p-cactions ul li, #p-cactions ul li a { 
 -moz-border-radius-topleft: 1em;
 -moz-border-radius-topright: 1em;

}

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

  1. p-cactions ul li, #p-cactions ul li a { 
 border-radius-topleft: 1em;
 border-radius-topright: 1em;

}

  1. content { 
 border-radius-topleft: 1em;
 border-radius-bottomleft: 1em;

} div.pBody { 

 border-radius-topright: 1em;
 border-radius-bottomright: 1em;

} </source>

File:Rounded corners.png
Rounded corner rules in firefox
Rounded corners/tabs links

Print view tweaks

<source 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) " ) ";
 }

} </source>

Make the user toolbar a sidebox

Tested to work in Camino, Safari and Internet Explorer 7. <source lang="CSS"> /* Transform the user toolbar into a sidebox */

  1. p-personal { 
   position:relative;
   z-index:3;
   width: 11.6em;

}

  1. 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;

}

  1. 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;

}

  1. 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 }

</source> See the monobook main.css for the full styles in use by default.

Fix the sidebar's position while you scroll

File:Fixed sidebar.png
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

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 [2] 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)

<source lang="CSS"> /******************************************************************/ /* moving catlinks to the right */ /******************************************************************/

/* move the catlinks box */

  1. 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;

}

  1. p-personal h5 { 
   display: inline;

}

/* format links in the catlinks (as distinguished from ":" and "|") */ p.catlinks a { 

 color:#888888;

} </source>

Diff view styling

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

External links on css

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.

System requirements

User JavaScript customization requires that your wiki administrator sets a configuration variable in LocalSettings.php: <source lang="PHP"> 

$wgAllowUserJs = true;

</source>

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.

Duplicate edit links at the bottom of the content area

See Help:User style/bottom tabs

File:Bottom tabs position corrected.png
Bottom tabs in Firefox
File:Bottomlinks.png
Simple version of bottom links in action

Changing access keys

These are now defined/set from js, you can easily customize them by changing some elements in the 'ta' array (see [3]). Example line: 

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

The access key is the first value in the array. An example which changes this accesskey to '0': 

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

Since alt-d is also a shortcut to the address bar in most browsers, you might want to disable the alt-d shortcut for Delete, by entering an empty string as access key this way: 

<source lang="javascript">
ta['ca-delete'] = new Array(,'Delete this page');
</source>

Finally, to disable all access and tooltips drop <source lang="javascript"> 

ta = false;

</source> in your monobook.js.

This last advice, about ta = false, does not work. See How to disable access key for discussion, and this example of monobook.js for a solution that will work, at least partially. Note that monobook.js seems to be deprecated, and MediaWiki:Common.js is supposed to be used instead.

The site's global access keys are in corresponding JavaScript for the skins. For example, the keys for Monobook are in the (protected) page MediaWiki:Monobook.js.

To disable or change the global access keys for the 'power user editing shortcuts', you must edit the six (protected) pages starting with the Accesskey prefix in the MediaWiki namespace.

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: <source lang="javascript"> 

function catsattop() {
  var cats = document.getElementById('catlinks');
  var bc = document.getElementById('bodyContent');
  bc.insertBefore(cats, bc.childNodes[0]);
}

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

<source lang="javascript"> function categoryToTop() { 

 var thebody = document.getElementById('contentTop');
 var categories = document.getElementById('catlinks');

 if (categories != null) {
   categories.parentNode.removeChild (categories);
   thebody.parentNode.insertBefore(categories, thebody);
 }

} </source>

Some CSS to go with that...

<source lang="CSS"> /* move the catlinks box */

  1. 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;

} </source>

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

Variables produced by the system (with example values): <source lang="javascript"> var skin = "myskin"; var stylepath = "/skins-1.5"; var wgArticlePath = "/wiki/$1"; var wgScriptPath = "/w"; var wgServer = "http://meta.wikimedia.org"; var wgCanonicalNamespace = "Help"; var wgCanonicalSpecialPageName = false; var wgNamespaceNumber = 12; var wgPageName = "Help:User_style"; var wgTitle = "User style"; var wgAction = "view"; var wgArticleId = "6919"; var wgIsArticle = true; var wgUserName = "Patrick"; var wgUserGroups = ["sysop", "*", "user", "autoconfirmed", "emailconfirmed"]; var wgUserLanguage = "en"; var wgContentLanguage = "en"; var wgBreakFrames = false; var wgCurRevisionId = "568720"; </source>

External links on JS

See also

This page needs Cleanup. Please help keep Wikimedia Meta-Wiki a useful resource by rewriting this page.

+/-

Links to other help pages

Help contents
Meta | Wikinews | Wikipedia | Wikiquote | Wiktionary | commons: | mw: | b: | s: | mw:Manual | google
Versions of this help page (for other languages see below)
Meta | Wikinews | Wikipediahttp://en.wikipedia.org/Help:User_style | Wikiquote | Wiktionary
What links here on Meta or from Meta | Wikipedia | MediaWiki
Reading
Go | Search | Stop words | URL | Namespace | Page name | Section
Backlinks | Link | Piped link | Interwiki link | Redirect | Category | Image page
Logging in and preferences
Logging in | Preferences | User style
Editing
Advanced editing | Editing FAQ | Edit toolbar | Export | Import | Shortcuts
Tracking changes
Recent changes (enhanced) | Related changes | Watching pages | Diff
Page history | Edit summary | User contributions | Minor edit | Patrolled edit
Style & formatting
Wikitext examples | Reference card | HTML in wikitext | List | Table | Sorting | Colors
Special input and output
Inputbox | Special characters | Displaying a formula | Images (uploads) | EasyTimeline
Advanced functioning
Template | Advanced templates | Parser function | ParserFunctions | Parameter default
Variable | Magic word | System message | Substitution | Array | Calculation
Page management
Starting a new page | Renaming (moving) a page | Protecting pages | Deleting a page
Special pages
Talk page | Testing | Sandbox | CentralNotice

Template:-

Retrieved from "http://thescubawiki.com/Help:User_style"
Personal tools
support the site