Help:Cascading style sheets

From The Scuba Wiki

Jump to: navigation, search
MediaWiki Handbook: Contents, Readers, Editors, Moderators, System admins +/-
Cascading Style Sheets allow for flexible formatting of a page. They should be used instead of tables whenever possible, because they can be manipulated by the reader or overridden by an author if your css is embedded in another page via a template.

Contents

Levels of CSS settings

Style may be specified specifically for a piece of content, see e.g. color; scope of parameters

Alternatively, style is specified for CSS selectors, expressed in terms of elements, classes and id's. This is done on various levels:

Author stylesheets, in this order:

User stylesheet:

  • web-wide, user-specific: local file, referred to in the browser settings, or directly set in the browser

A HTML element may be just taken from the wikitext (see HTML in wikitext), e.g. span, or the result of translating wikitext, e.g. the ''' code is changed into <b>, or part of the code for the skin.

A class may be produced by the software, e.g. ns-namespace number for the HTML-element "body", and extiw for an interwiki link in the page body, or taken from the wikitext.

Similarly an id may be produced by the software, e.g. bodyContent, or taken from the wikitext.

In the case of conflicting style settings for a piece of content, the resulting setting depends primarily on the indication "!important". Secondarily, if both are important, the user wins, if neither is, the author wins. Tertiarily it depends on specificity. Only lastly it depends on order between and within stylesheets: the last wins. Thus a User:username/monobook.css does not win from MediaWiki:Monobook.css (both author, not user) if the specificity of the latter is greater. See also cascade.

Supported Elements

Mediawiki supports most CSS, with such exceptions as the url() attribute. There were some bugs in css support in earlier versions.

For further information, see the CSS specification.

CSS in wikitext

You can use CSS styling in HTML elements in your code (see Help:HTML in wikitext for a list of elements supported by MediaWiki) like you would in normal HTML markup.

For example, a "div" element with a green border and its contents floated to the right would be created with

<div style="float:right; border:thin solid green;">
Here comes a short paragraph that is<br />
contained in a "div" element that is<br />
floated to the right.</div>

Here comes a short paragraph that is
contained in a "div" element that is

floated to the right.

which would produce the box to the right.


Some wikitext elements allow you to insert CSS styling directly into them. An example is the table syntax:

{| style="your style here" 
|-
|your table stuff
|-
|}
For further information, see Help:Tables

Mediawiki existing styles

You may wish to use a style type that is already predefined by mediawiki, or the site that you are visiting. You can also create a style that is unique to your page.

monobook is the default style, you can read it at:

You will give your css tag an existing "class"

Later in this article ("Major style blocks") we will list some of the existing classes used by MediaWiki.

Tips and tricks

Non-display

One extreme "style" for a text is "display:none", i.e., not displaying it, e.g.

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

To allow a text to optionally have this style, specify a class or id for it; a user who wants to hide it can then correspondingly specify in his personal CSS:

<source lang=css>.classname {display: none}</source> or <source lang=css>#id {display: none}</source>

Non-displayed links do not work, as opposed to links in a very small font, compare:

p<span style="display:none">[[q]]</span>r gives pqr
p<small><small><small><small><small>[[q]]</small></small></small></small></small>r gives pqr

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

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

To view hidden text, download the Web Developer Toolbar for Firefox here, then choose Misc. -> show hidden elements in that toolbar. It will make all hidden elements appear.

Non-print

One can exclude content from being printed (if the browser supports CSS) by declaring the content to be of the "noprint" class:

<div class="someclass noprint">This will not appear in the print version.</div>

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
  • p-lang - the block that contains interlanguage 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

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.

Variable style parameter value

Wikitext like

<span style="display:{{{3|none}}}">Wed</span>

displays "Wed" if parameter 3 is defined, but its value is 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.

See also

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:Cascading_style_sheets | 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:-

Personal tools
support the site