GuildWars Wikia:CSS classes
Talk16this wiki
| Style guides |
|---|
|
|
Contents |
GuildWiki provides us with custom CSS classes to help us format articles more easily. They are stored in MediaWiki:Common.css. You can override or modify this with your own CSS by putting it in your borwser's style sheet(s), using MyPage/Monaco.css or MyPage/Monobook.css (depending on your default skin), or by placing it in w:Special:MyPage/global.css to be active for all skins on all Wikia wikis.
Wikia-predefined CSS classes
Edit
These classes change color automatically with the theme.
Profession colors and table (cell) formatting
Edit
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 /> |
warrior |
Table formatting and alignment classes
Edit
Standard table format
Edit
The class stdt will apply our standard table format. This can be seen on most of the tables on the wiki.
Top-aligned table
Edit
The class aligntop applies style="vertical-align:top" to all cells in the table; this can be overridden for individual cells, of course. alignbottom aligns bottom.
Armor crafting table
Edit
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.
Edit
The class navbox applies text and color formatting for our navboxes.
Sortable table
Edit
The class sortable creates a table with icons that let you sort columns. You can use the classes unsortable and sortbottom to further customize this display. It can be combined with other classes, such as stdt.
| Wikicode | Display | |||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{|class="stdt sortable"
!Numbers
!Alphabet
!Dates
!Currency
!class="unsortable"|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?
|-class="sortbottom"
!Total: 15!!!!!!Total: 29.55!!
|-
|}
|
|
Collapsible table
Edit
The class collapsible makes a whole table collapsible. It looks best when the table has a single cell in the top row; use colspan to achieve that. Requires Javascript.
| Wikicode | Display | ||||
|---|---|---|---|---|---|
{| class="collapsible stdt"
!Header!!More Header
|-
|Cell
|more cell
|}
|
|
Hiding table columns
Edit
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
:cell
:here
|-
| more
:long
:column
:here
| second column, too
| short cell
|}
|
Limit TOC display depth
Edit
Classes toc1 to toc6 limit the outline depth of the TOC, displaying subheading farther left than they would usually be. Example:
| 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 ==== |
Example h2 header
|
Fake headers
Edit
The classes fakeh2 and fakeh3 will make any div look like a section header, but it doesn't show up in the table of contents and won't have a section link.
Dual lines inline
Edit
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
- GuildWars Wikia:Style and formatting/Dialogue for
class="dialogue" - wikipedia:Help:Tables#Sorting for
class="sortable"
