Revision as of 2010-03-08 11:21:00 Older version (diff) | current version (diff) | Newer version (diff)
Change skin to:
www.ZAM •
Aion •
EQ1 •
EQ2 •
FFXI •
FFXIV •
Free Realms •
LoN •
WAR •
WoW
- No wiki styling! - DAoC • EQOA • EVE • LotRO • SWG
This page is an attempt to give some direction and information about available classes that can be applied to tables in the wiki. Some of them are game-specific and are always prefaced with the gameid, such as sto-panel or aion-q0.
A class can be applied to a table in HTML or wiki-code. Here are two examples of the common class, infobox, which is defined in every game skin.
HTML table with .infobox class
<table class="infobox">
<tr>
<th>Header One</th>
<th>Header Two</th>
</tr>
<tr>
<td>Cell One</td>
<td>Cell Two</td>
</tr>
</table>
|
Header One |
Header Two |
Cell One |
Cell Two |
|
|
Wikicode table with .infobox class
{| class="infobox"
!Header One
!Header Two
|-
|Cell One
|Cell Two
|}
|
Header One | Header Two |
---|
Cell One | Cell Two | |
|
The following are other common classes that are defined in all skins.
datatable |
Header One | Header Two |
---|
Cell One | Cell Two | |
datatable sortable |
Header One | Header Two |
---|
2 | 7 | 1 | 4 | 3 | 9 | |
datatable using .lr and .dr
.lr and .dr are classes that are applied to the rows as follows:
|- class="lr"
|
Header One | Header Two |
---|
2 | 7 | 1 | 4 | 3 | 9 | |
Notes
- datatable sets width to 100% by default. to make a datatable that is not set to 100% add autowidth to the class. class="datatable autowidth".
- The sortable class can also be added to infobox but does not really make sense, style-wise, so please don't use it that way unless there is an overwhelming good reason. Use no-margin-lists to do this.
- To make an infobox, or any box, that hangs on the right side, add '''style="float:right;" after the class element
- To make text flow around a table try style="float:left;"
Ordered and Unordered Lists
By default all lists have a top and bottom margin which can cause some spacing issues with lists inside tables. Fortunately, this can be over-ridden! You can either do the list manually in HTML and use, for instance, <ul style="margin:0;"> or you can apply a class to the cell that disables the margins.
with margins | without margins |
---|
list title line
- list item 1
- list item 2
- list item 3
|
list title line
- list item 1
- list item 2
- list item 3
|
This list will probably never be up-to-date as new classes are added as the need arises, but here is a good starting point. Also, there will be some classes that were defined ONLY to be in a specific template for a single object and are not listed here.
- aion-q0 to aion-q5: used to colorize item links by quality
- aion-quest: The main table styling for Aion Quest
- eq2-quest: The main table styling for EQ2 Quest
- eq2-mob: The main table styling for EQ2 Mob
- eq2-item: The main table styling for EQ2 Item
- sto-panel: Table styling for most boxes in the STO Wiki. Intended to mimic in-game colors.
- sto-q0 to sto-q5: used to colorize item links by quality
- sto-lcars: sto-panel with LCARS flavoring (Library Computer Access and Retrieval System)
|
This is a work in progress as I need to comb through all the .css files to find all the major classes. |
This page last modified 2010-03-08 11:21:00.