Revision as of 2010-03-08 11:43:24 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 table with no class and no styling is invisible and is used to containerize output.
A class can be applied to a table in HTML or wiki-code. Here are two examples of the common classes, "datatable autowidth", which is defined in every game skin. (This used to be called "infobox")
HTML table with .datatable and .autowidth
<table class="datatable autowidth">
<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 .datatable and .autowidth
{| class="datatable autowidth"
!Header One
!Header Two
|-
|Cell One
|Cell Two
|}
|
Header One | Header Two |
---|
Cell One | Cell Two | |
|
The following are other common ways of using datatable.
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".
- To make a 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;"
- To apply styling to a cell you add it after the | (pipe), and another | following the styling. (i.e. |colspan="2"|This is a 2-column cell )
- On a header cell you still use | following the styling, not ! (i.e. !colspan="2"|This is a 2-column header )
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:43:24.