Help:Cascading style sheets

w: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.

Supported Elements

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

DIV tag SPAN tag, and you can insert style="whatever:property" into almost any HTML tag. You just need to be sure not to include extra spaces, because sometimes the wiki engine will try to turn them into printable characters for you.. and goof up your css.

for a good reference on CSS, go here: [1]

for a list of supported HTML tags, go here: [2]

Please remember that CSS is one of those features that browsers arn't fully compatible with one another... (please fix)

css in wikitext

(this section is a stub) You can insert CSS into some wikitext elements, like this table... {| style="your style here" |- |your table stuff |- |}

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"

Please put a list of existing classes here.

Printable version

CSS allows certain content to be included in printing or not. the class name is "noprint"

Tips and tricks

Non-display

in an embeded page, one can hide comments in one version, and show them in another view. One extreme "style" for a text is not displaying it, with

.classname {display: none}
#id {display: none}

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.

no print

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

Variable style parameter value

Wikitext like

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

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

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

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.

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

Help:Cascading style sheets

Contents

Supported Elements

css in wikitext

Mediawiki existing styles

Printable version

See also

Tips and tricks

Non-display

no print

Major style blocks

Style depending on a parameter or variable

Variable class or id

Variable style parameter value

Samples

Print view tweaks

Make the user toolbar a sidebox

Diff view styling

See also

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Search

Navigation

Tools