| Identifier
|
Description
|
Software defaults
|
Recommendations
|
#pageWrapper
|
Outer wrapper around page content and footer.
|
|
- The left padding for this element is what makes space for the sidebar. Absolute units like pixels are recommended here to avoiding overlapping the logo/sidebar when users have nonstandard font settings. Relative units are used by default.
- If you want a background for the sidebar that extends all the way to the Curse footer, using this is an option. Note that the background will also be behind the page content and footer, but you can hide it with backgrounds on those.
|
div#content
|
Container for the page content.
|
|
|
div#content #firstHeading
|
The page title.
|
|
- This will also pick up styles for
h1, but you may want less top margin for this than headings in the actual text.
|
div#content h1, div#content h2, div#content h3, div#content h4, div#content h5, div#content h6
|
Headings in the article.
|
|
- Setting
overflow: auto; makes any backgrounds or borders of headings respect floating elements. This reduces the need to use clear to push article sections beneath floating elements.
- Due to strange behavior in many versions of IE, if you use
overflow: auto, you'll need around 5px of padding-bottom to prevent scroll bars from appearing on some headings.
|
div#content #firstHeading
|
The page title.
|
|
- This will also pick up styles for
h1, but you may want less top margin for this than headings in the actual text.
|
span.editsection
|
The edit links in headings.
|
|
- Styles for headings affect this as well. There may be cases where you want to apply styles to make this look like normal text rather than heading text.
|
.toc, #toc
|
Table of contents box.
|
|
- This is, for some reason, a single-cell
table, unlike most boxes which are simply divs, but the default border and background are applied here. Note that some CSS values, like width: auto;, work differently on tables than they do on divs.
- The contents of this box are inside a
tr and td. They have no styles by default, but it's possible someone may have added them. It's probably best to move any such styles to this instead.
|
div#content #toctitle h2
|
Table of contents heading.
|
|
- Removing any heading border or background is often a good idea for this, depending on the skin design.
|
.toctoggle, #toc .toctoggle
|
Table of contents heading.
|
|
- Styles for headings affect this as well. There may be cases where you want to apply styles to make this look like normal text rather than heading text.
|
hr
|
General horizontal line.
|
|
- Most likely, this will be styled with
border-bottom, though there are also other ways.
|
ul
|
General unordered lists.
|
|
- You can override the standard
list-item-image bullet here.
|
table.wikitable
|
Tables in content with the wikitable class.
|
|
- Has a background by default that will often need to be overridden.
|
table.wikitable th
|
Table header cells in tables with the wikitable class.
|
|
- Has a background by default that will often need to be overridden.
|
table.wikitable td
|
Table data cells in tables with the wikitable class.
|
|
- Has a background by default that will often need to be overridden.
|
table.jquery-tablesorter th.headerSort
|
Sortable table header cells.
|
|
- The sort arrows are added to this as a background. You can override this with an up and down arrow image added as a background positioned at
right center. This is typically necessary on dark skins.
|
table.jquery-tablesorter th.headerSortDown
|
Sortable table header cells.
|
|
- The up sort arrow is added to this as a background. You can override this with an up and down arrow image added as a background positioned at
right center. This is typically necessary on dark skins.
|
table.jquery-tablesorter th.headerSortUp
|
Sortable table header cells.
|
|
- The down sort arrow is added to this as a background. You can override this with an up and down arrow image added as a background positioned at
right center. This is typically necessary on dark skins.
|
ul.gallery
|
Container for a standard image gallery.
|
|
|
li.gallerybox
|
Outer container for an image in a standard image gallery. Contains image and caption.
|
|
|
li.gallerybox div.thumb
|
Inner container for an image in a standard image gallery. Contains just the image.
|
|
- Take care if adjusting margins or padding, as this can cause the inner box to extend out of the outer box or at least move it from center.
|
div.gallerytext
|
Caption for an image in a standard image gallery.
|
|
|
.thumb
|
Invisible outer container for a thumbnail created using the thumb argument in an image link.
|
|
- Apply borders, backgrounds, and visual effects to
div.thumbinner instead of this.
- Apply any margin adjustments to
.thumb.tleft and .thumb.tright instead.
|
.thumb.tleft
|
Invisible outer container for a thumb that's floated to the left.
|
|
- Margin adjustments should be done here. Be sure to leave some right margin to keep some space between thumbnails and text.
|
.thumb.tright
|
Invisible outer container for a thumb that's floated to the right.
|
|
- Margin adjustments should be done here. Be sure to leave some left margin to keep some space between thumbnails and text.
|
div.thumbinner
|
Container for a thumb around both image and caption.
|
|
- You may want to change the default border and background for this.
|
html .thumbimage
|
Container for the thumb image.
|
|
- You may want to change the default border and background for this.
|
.thumbcaption
|
The caption for a thumb image.
|
|
|
pre
|
Preformatted text.
|
|
- There is a background and dashed border for this by default in MediaWiki.
white-space: pre-wrap; and word-wrap: break-word; are highly recommended to prevent long lines from exceeding the content area width.
|
#catlinks
|
The container for the category links.
|
|
- Unlike most "boxes", this one should have some top margin.
|
