From WikiChip
WikiChip:styling

This page documents some of the styling that has been added to WikiChip for various purposes:

Templates/Warning

Inc/Dec

  • Increase2.svg - {{^|inc}}
  • Decrease2.svg - {{^|dec}}
  • Steady2.svg - {{^}}

Multi-Columns

To break down a list, we have the wiki-ul-col## class where ## is the number of columns, for example:

<div class="wiki-ul-col3">
* AA
* BB 
* CC
* DD
* EE 
* FF
</div>
  • AA
  • BB
  • CC
  • DD
  • EE
  • FF

We have a {{collist}} template which wraps this class for you.

Tables

Table Text alignment

In order to alight an entire column of a table, we have tl##, tc##, and tr## classes for (left, center, and right respectively) where ## is the column's number.

For example, the following table as the tl1 tc2 tr3 tl4 classes added to the <table> tag:

ABCD
AAABBCDD
ABCCCCDDDDD
AABBBBCDDD
AAAAAABCCCCCCDDDDDD
AABCDD

Yes/No/Blank

For Yes/No, use {{tchk}}, for blank use {{tblnk}}:

{| class="wikitable"
! Foo !! Bar !! Baz
|-
| A || {{tchk|yes}} || {{tchk|no}}
|-
| B || {{tchk|no}} || {{tchk|yes}} || {{tblnk}} || {{tblnk}} || {{tchk|yes}}
|-
| C || {{tchk|no|nah}} || {{tchk|yes|Yeh}}
|}
Foo Bar Baz
A
B    
C nah Yeh

Comparison Table

Our comparison tables have undergone a good half-dozen iterations before getting to where it is today. There's no problem with the older iterations, but they are outdated and should eventually be replaced with the new style. Below is the general style:

Note 1: This table is rather complex because it generates a scrollable table. That is, when adding a lot of columns or viewed on a smaller screen, instead of overflowing outside of the page, the table will have a scroll bar that floats with the table (up/down).

Note 2: Please keep the comment about data being generate automatically. This is to prevent users from attempting to modify the table to add missing data and instead point them to WikiChip:wanted_chips where they can add the missing entry. Without this comment random visitors will attempt to add a missing value manually by adding a <tr></tr> tag inside the table.

<!-- NOTE: 
           This table is generated automatically from the data in the actual articles.
           If a microprocessor is missing from the list, an appropriate article for it needs to be
           created and tagged accordingly.

           Missing a chip? please dump its name here: https://en.wikichip.org/wiki/WikiChip:wanted_chips
-->
{{comp table start}}
<table class="comptable sortable tc4">
{{comp table header|main|5:List of Skylake-based Processors}}
{{comp table header|main|5:Main processor}}
{{comp table header|cols|Price|Launched|Cores|%Frequency}}
{{#ask: [[Category:microprocessor models by intel]] [[microarchitecture::Skylake]]
 |?full page name
 |?model number
 |?release price
 |?first launched
 |?core count
 |?base frequency#GHz
 |format=template
 |template=proc table 3
 |userparam=6
 |mainlabel=-
}}
{{comp table count|ask=[[Category:microprocessor models by intel]] [[microarchitecture::Skylake]]}}
</table>
{{comp table end}}

Which will generate the following table:

-
 List of Skylake-based Processors
 Main processor
ModelPriceLaunchedCoresFrequency
3855U$ 107.00
€ 96.30
£ 86.67
¥ 11,056.31
27 December 201521.6 GHz
1,600 MHz
1,600,000 kHz
3955U$ 107.00
€ 96.30
£ 86.67
¥ 11,056.31
27 December 201522 GHz
2,000 MHz
2,000,000 kHz
Count: 105

Note that "5:Main processor" just means that the cell "Main processor" will span 5 columns. The "%" in "%Frequency" means the column should be treated as a number when sorting. This is important for things such as frequency/TDP/memory because otherwise the sorting feature will assume you're sorting text and will sort it alphanumerically instead (e.g. "1 GHz, 12 GHz, 2 GHz, 21 GHz" instead of "1 GHz, 2 GHz, 12 GHz, 21 GHz). Finally, the "tc4" are used as described in this article earlier to center the column.

The "userparam=6" parameter needs to be adjusted to the number of columns in the table. You can also specify something like "userparam=6:5" which will mean "6" columns with columns starting at "5" (i.e., column "5" and "6") will display a checks/exes (i.e., true/false).