GuildWiki:CSS classes

From GuildWiki
Jump to: navigation, search
Style guides

Blue check.png

This page is a style and formatting guideline on GuildWiki.

It has general acceptance among editors and is considered a standard to which articles should adhere. However, it is not set in stone and should be treated with common sense and the occasional exception.

GuildWiki makes heavy use of custom CSS formatting. CSS that is applied to the entire wiki is stored in MediaWiki:Common.css, while style that are only applied on specific skins are stored under the skin name; for example, MediaWiki:Monobook.css contains CSS for the Monobook skin.

This article lists some of the CSS classes available for use from Common.css.

User CSS[edit source]

Individual users can define additional CSS styles that will be applied only for that user. These styles are set on a per-skin basis and are stored as User:<username>/<skin>.css. To easily access these custom stylesheets, go to Special:Preferences, select the "Appearance" tab, and click on the "Custom CSS" link next to the skin.

Profession colors and table (cell) formatting[edit source]

The following formatting can be applied to any elements, including tables and table cells.

Wikicode Display
<span class=warrior>       warrior </span><br />
<span class=ranger>        ranger </span><br />
<span class=monk>          monk </span><br />
<span class=necromancer>   necromancer </span><br />
<span class=mesmer>        mesmer </span><br />
<span class=elementalist>  elementalist </span><br />
<span class=assassin>      assassin </span><br />
<span class=ritualist>     ritualist </span><br />
<span class=paragon>       paragon </span><br />
<span class=dervish>       dervish  </span><br />
<span class=no-profession> no-profession  </span><br />


Table formatting and alignment classes[edit source]

Standard table format
The class stdt will apply our standard table format. This can be seen on most of the tables on the wiki.
Top-/bottom-aligned tables
The class aligntop applies vertical-align:top to all cells in the table; this can be overridden for individual cells, of course. alignbottom aligns bottom.
Armor crafting table
The class armorcraftingbox applies special alignment to specific columns for tables that detail the crafting costs of armor. This can be seen on any of our armor articles, such as Warrior Ascalon armor.
Navbox table
The class navbox applies text and color formatting for our navboxes.
Sortable table
The class sortable creates a table with icons that let you sort columns. The table must contain a header row (delimited with ! in wiki-code) for this to work.
To exclude any column from the sorting, apply the class unsortable to that column's header cell.
To make a certain row always appear at the bottom of the table, apply the class sortbottom to that row.
Wikicode Display
{|class="stdt sortable"
|1||Z||02-02-2004 ||5.00||This
|2||y||13-apr-2005||    ||Column
|5||V||05/12/2006 ||7.15||See?
!Total: 15!!!!!!Total: 29.55!!
Numbers Alphabet Dates Currency Unsortable
1 Z 02-02-2004 5.00 This
2 y 13-apr-2005 Column
3 X 17.aug.2006 6.50 Is
4 w 01.Jan.2005 4.20 Unsortable
5 V 05/12/2006 7.15 See?
Total: 15 Total: 29.55
Collapsible table

The class collapsible makes a whole table collapsible. When collapsed, only the first row of the table will be shown. As with the sortable class above, the first row must be a header row. Requires Javascript.

Wikicode Display
{| class="collapsible stdt"
!Header!!More Header
|more cell
Header More Header
Cell more cell
Hiding table columns
Classes hidecol1 ~ hidecol10 hide the specified columns in the table. It can be useful for copying-pasting rows from one table to another table that has similar general layout but differ in few columns (so no need to modify the rows per table), or when you use table content templates designed for a table with more columns. Avoid using this feature if possible.
Note: These classes rely on Javascript in IE6 to compensate for CSS compatibility issues
Wikicode Display
{| class="aligntop stdt hidecol2"
| short cell
|second column
| long
| more
| second column, too
| short cell
short cell second column long
second column, too short cell

Limit TOC display depth[edit source]

Classes toc1 to toc6 limit the depth of headers displayed in the TOC. By using toc3, for example, you limit the TOC to only display headers up to 3 levels deep.

Wikicode Display
<div class="toc3">__TOC__</div>
== Example h2 header ==
=== An h3 header ===
==== An h4 header ====
=== A second h3 header ===
===== An h5 header =====
Intentionally skipping a h4
====== An h6 header ======
==== A second h4 header ====

CSS example TOC.png

Fake headers[edit source]

Using HTML tags (<h2> </h2>) instead of wikicode (== ==) will create a header that does not have a section edit link. These headers will still appear in the TOC, however.

To create a fake header that does not appear in the TOC, use a <div> tag with the class fakeh2 or fakeh3.

Wikicode Display
<h3>This shows in the TOC</h3>

This shows in the TOC

<div class="fakeh3">This does not</div>
This does not

Dual lines inline[edit source]

The class sig-stack allows two small lines to be stacked without breaking text flow.

note: this class may not work correctly in IE6

Wikicode Display
[[User:M.mendel|mendel]] <span class="sig-stack"><span>([[Special:Contributions/M.mendel|contribs]])</span><span> ([[User_talk:M.mendel|talk]]) </span></span> mendel(contribs) (talk)
<span class="sig-stack"><span>bottom line</span><span>top line</span></span> some random text some random text some random text some random text bottom linetop line some random text some random text some random text some random text

See also[edit source]