Misplaced Pages

Revision as of 18:08, 10 March 2011

• WP:CLASS

This Misplaced Pages page needs to be updated. Please help update this Misplaced Pages page to reflect recent events or newly available information. Relevant discussion may be found on the talk page.

There are a lot of classes and IDs used on the English Misplaced Pages. The use of most of them is not clearly explained or described anywhere but on the place they are used. However, since Special:Whatlinkshere does not work for CSS, it can be hard to find these explanations; the definitions themselves can be located in many different places.

This page is an attempt to catalogue and describe all the classes and IDs used on this wiki.

There are still a lot of classes and IDs to document, add some! Also add information about other skins.

CSS caching is important

• WP:DECACHE

The CSS style sheets and the JavaScript files that are loaded for Misplaced Pages users are set to be cached for 31 days in readers' browsers. So when a change is made to a global skin file, users who have only just recached their copies of the files will not necessarily receive the update for a month after it is made. So when making changes to site CSS, be careful that any changes you then make to templates and articles etc., that they will also look reasonable when displayed with the old styles. Usually, this involves not 'deploying' the new styles for 31 days after they are added.

Alternatively, it is possible to use hard coded styles while waiting for the new code to 'decache'. If this is done it is a good idea to also add the class name in the template or page code, so that the hardcoded styles can be overridden immediately by users' personal CSS by using the "!important" keyword. And that means that in many cases we don't even need to add the class in for instance MediaWiki:Common.css.

Say you have a template named {{bigbox}}, then you can code it like this:

<table class="bigbox" style="background: yellow;">
<tr><td>Some content.</td></tr>
</table>

Then a user can put this code into his personal /vector.css to override that ugly background:

.bigbox { background: transparent !important; }

Stylesheets and JavaScript

The following table is really outdated since MediaWiki 1.17. One way to look at the core CSS and JS files is to install Firebug, load any Misplaced Pages page with ?debug=true URL parameter (this will separate different CSS files, prevent minification and preserve comments), then in Firebug switch to "CSS" tab, select CSS file and click "Edit". Another way is to look at these files at SVN; note that some JS files already migrated to /resources.

Notes

1. ^ Only available to logged in users. Gadgets are not loaded on Special:Preferences. User css/js is not loaded on Special:Preferences, Special:ChangePassword or Special:UserLogin. Cite error: The named reference "ul" was defined multiple times with different content (see the help page).
2. ^ Can be disabled via preferences.

Page/action specific

Several types of MediaWiki pages and actions, and preferences load conditional stylesheets and javascript, to reduce the burden of unnecessary script loading.

User group specific

Special stylesheets and javascript are loaded for some user groups. The loading is done by code in MediaWiki:Common.js.

LocalSettings specific

Certain site settings result in loading of specific styles and scripts. Most of these do not apply to the English wikipedia.

Browser specific

• Internet Explorer, KHTML and older versions of Opera are a bit more buggy than other popular browsers, and needs some additional CSS and JavaScript to work around some of its bugs.

Note that these are loaded sometimes via IE <!----> comment syntax, and sometimes via CSS, and sometimes via Javascript.

Classes

We often add the name of a template or MediaWiki message itself as a class name in the code of the template or message. This allows users to style the message, and it allows future skinning of the message in the global CSS files. Please do not document such class names here, unless they are actually used in some CSS or JavaScript file, since there are (or at least should be) literally thousands of such class names.

Other classes

The following should perhaps also be added to the above table:

• Microformat classes as listed in Microformat classes.
• robots-nocontent - reserved, per

IDs

ca-X, f-X, n-X, p-X, pt-X, t-X, wpX IDs

i.e. interface buttons, links, etc.

JavaScript variables

About 30 variables that can be used in JavaScript. View the rendered code of any page and find for instance "var wgUserName".

Notes

1. In some special cases in JavaScript.

See also

• Misplaced Pages:WikiProject User scripts
• Misplaced Pages:Useful styles
• Help:User style
• Help:Cascading style sheets

• Misplaced Pages features