Lylat Wiki:Color Scheme
From Lylat Wiki, your source on Star Fox information. By Fans, for Fans.
| Shortcut(s) to this Policy Page or Section |
| LW:Color |
For ease of identification, or just for the fun of it, each Area of the Wiki is color-coded and then each template, table, div, etc. related to that area is colored in a similar manner (some exceptions apply). And we aren't just talking about the background or border. In fact, for most templates, we have 4 areas in which a template can have it's colors be that of the color(s) as chosen by the WikiProject. These are:
- -border
- For the border
- -bg-color
- For the general background color
- -th-bg-color
- For the background color for the table header cells.
- -id-bg-color
- for the background color for the table data cells.
Contents |
Example
As an example, take a look at the following text:
<div style="{{character-bg-color}}">
Text above table. [[Link]]. [[Fox]].
{| style="{{character-border}}"
|-
! style="{{character-th-bg-color}}" | table header cell
! style="{{character-th-bg-color}}" | text
! style="{{character-th-bg-color}}" | [[fox]]
! style="{{character-th-bg-color}}" | table header cell
! style="{{character-th-bg-color}}" | text
! style="{{character-th-bg-color}}" | [[link]]
|-
| style="{{character-td-bg-color}}" | table header cell
| style="{{character-td-bg-color}}" | text
| style="{{character-td-bg-color}}" | [[fox]]
| style="{{character-td-bg-color}}" | table header cell
| style="{{character-td-bg-color}}" | text
| style="{{character-td-bg-color}}" | [[link]]
|-
|}
Text bellow table
</div>
comes out as
| table header cell | text | link | table header cell | text | link |
|---|---|---|---|---|---|
| table header cell | text | link | table header cell | text | link |
Text bellow table
In the example, the div is stylized by {{character-bg-color}}, giving the div a green background color. The table is affected by {{character-border}}, giving it a light-green border. But notice, it no longer has the green background of the div. This is important to take notice, even if it is as a reminder to yourself and nothing more, as when you are designing a table with this in mind, you may over look this fact.
Next, notice the top row and bottom row are different colors. This is because the top row (the header cells) is affected by {{character-th-bg-color}} and the bottom row (the data cells) is affected by {{character-td-bg-color}}.
Now, each template doesn't have to be used in the manner that is specified here. You can make {{character-bg-color}} be a header-color instead, as is done here, and keep the background white. But it is recommended you do that with higher-order templates, like {{enemies v2.0}} and {{stages v2.0}}.
to help with the link colors, it is also useful to throw on a matching color code through the div's or table's css class. Unlike the style="" attriblute, once a css class="" is applied to one tag; it affects everything within it. So with the example above,
<div class="color4" style="{{character-bg-color}}">
Text above table. [[Link]]. [[Fox]].
{| style="{{character-border}}"
|-
! style="{{character-th-bg-color}}" | table header cell
! style="{{character-th-bg-color}}" | text
! style="{{character-th-bg-color}}" | [[fox]]
! style="{{character-th-bg-color}}" | table header cell
! style="{{character-th-bg-color}}" | text
! style="{{character-th-bg-color}}" | [[link]]
|-
| style="{{character-td-bg-color}}" | table header cell
| style="{{character-td-bg-color}}" | text
| style="{{character-td-bg-color}}" | [[fox]]
| style="{{character-td-bg-color}}" | table header cell
| style="{{character-td-bg-color}}" | text
| style="{{character-td-bg-color}}" | [[link]]
|-
|}
Text bellow table
</div>
comes out as
| table header cell | text | fox | table header cell | text | link |
|---|---|---|---|---|---|
| table header cell | text | fox | table header cell | text | link |
Text bellow table
Usage
Here are the specific templates and color codes available for you to choose.
CSS syle-templates
| border color | background color | header cell background color | data cell background color | |
|---|---|---|---|---|
| -border | -bg-color | -th-bg-color | -td-bg-color | |
| character- | border:1px solid #093ad9; | background-color:#00f; | background:#3b69ff; | background-color:#9ca9e8; |
| item- | border:1px solid #FBEC5D; | background-color:#B07A0B; | background-color:#FFD700; | background:#FFF700; |
| vehicle- | border:1px solid #CC0000; | background-color:#800; | background-color:#C32148; | background:#E82C0C; |
| stage- | border:1px solid yellow; | background-color:#000;color:yellow; | background:#yellow;color:#000; | background-color:#000;color:#fff; |
| game- | border:1px solid #00FF00; | background-color:green; | background-color:#32CD32; | background:#CCFF00; |
| person- | border:1px solid #f60; | background-color:#F60; | background-color:#F60; | background-color:#FFF; |
| company- | border:1px solid #purple; | background-color:purple; | background:#purple; | background-color:#fff; |
| console- | border:1px solid #ff00FF; | background-color:#000;color:#FF00FF; | background-color:#000;color:#FF00FF; | background-color:#fff; |
| fandom- | border:1px solid #ffffff; | background-color:#fff; | background:#white; | background-color:#000000;color:#ffffff; |
| branch- | border:1px solid #666666; | background-color:#666; | background:#666666; | background-color:#666; |
| WikiProject- | border:1px solid #000000; | background-color:#000;color:#ffffff; | background:#000;color:#fff; | background-color:#ffffff;color:#000000; |
| Team- | border:1px solid #00f; | background-color:#f2f91d;colors:#fff; | background-color:#00f;color:#fff; | background-color:#fff; |
| Enemy- | border:1px solid #16A3B0; | background-color:#FD9A52; | background-color:#52EFFD; | background-color:#fff; |
| User- | border:5px solid #7D614F; | background-color:#A7C9CA; | background-color:#A7C9CA; | background-color:#fff; |
| Series- | border:2px solid #800040; | background-color:#green; | background-color:#green; | background-color:#white; |
| Race- | border:1px solid #009E7E; | background-color:#8DC8AA; | background-color:#009E7E; | background-color:#C3DCAE; |
| Location- | border:1px solid #FDD278; | background-color:#FDE0B2; | background:#FABF5D; | background:#FFDC87; |
| Article- | border: medium double #660000; | |||
| Template- | border: medium double #008080; | |||
| Category- | border: medium double #000066; | |||
| File- | border: medium double #006600; |
CSS color-codes
| Color#1 | Link | Text | Link |
|---|---|---|---|
| Color#2 | Link | Text | Link |
| Color#3 | Link | Text | Link |
| Color#4 | Link | Text | Link |
| Color#5 | Link | Text | Link |
| Color#6 | Link | Text | Link |
| Color#7 | Link | Text | Link |
| Color#8 | Link | Text | Link |
| Color#9 | Link | Text | Link |
| Color#10 | Link | Text | Link |
| Color#11 | Link | Text | Link |
| Color#12 | Link | Text | Link |
| Color#13 | Link | Text | Link |
| Color#14 | Link | Text | Link |
| Color#15 | Link | Text | Link |
| Color#16 | Link | Text | Link |
| Color#17 | Link | Text | Link |
| Color#18 | Link | Text | Link |
| Color#19 | Link | Text | Link |
| Color#20 | Link | Text | Link |
| Color#21 | Link | Text | Link |
| Color#22 | Link | Text | Link |
| Color#23 | Link | Text | Link |
| Color#24 | Link | Text | Link |
| Color#25 | Link | Text | Link |
| Color#26 | Link | Text | Link |
| Color#27 | Link | Text | Link |
| Color#28 | Link | Text | Link |
| Color#29 | Link | Text | Link |
| Color#30 | Link | Text | Link |
| Color#31 | Link | Text | Link |
| Color#32 | Link | Text | Link |
| Color#33 | Link | Text | Link |
| Color#34 | Link | Text | Link |
| Color#35 | Link | Text | Link |
| Color#36 | Link | Text | Link |
| Color#37 | Link | Text | Link |
| Color#38 | Link | Text | Link |
| Color#39 | Link | Text | Link |
| Color#40 | Link | Text | Link |
| Color#41 | Link | Text | Link |
| Color#42 | Link | Text | Link |
| Color#43 | Link | Text | Link |
| Color#44 | Link | Text | Link |
| Color#45 | Link | Text | Link |
| Color#46 | Link | Text | Link |
| Color#47 | Link | Text | Link |
| Color#48 | Link | Text | Link |
| Color#49 | Link | Text | Link |
| Color#50 | Link | Text | Link |
| Color#51 | Link | Text | Link |
| Color#52 | Link | Text | Link |
| Color#53 | Link | Text | Link |
| Color#54 | Link | Text | Link |
| Color#55 | Link | Text | Link |
| Color#56 | Link | Text | Link |
| Color#57 | Link | Text | Link |
| Color#58 | Link | Text | Link |
| Color#59 | Link | Text | Link |
| Color#60 | Link | Text | Link |
| Color#61 | Link | Text | Link |
| Color#62 | Link | Text | Link |
| Color#63 | Link | Text | Link |
| Color#64 | Link | Text | Link |
| Color#65 | Link | Text | Link |
| Color#66 | Link | Text | Link |
| Color#67 | Link | Text | Link |
| Color#68 | Link | Text | Link |
| Color#68 | Link | Text | Link |
| Color#69 | Link | Text | Link |
| Color#70 | Link | Text | Link |
| Color#71 | Link | Text | Link |
| Color#72 | Link | Text | Link |
| Color#73 | Link | Text | Link |
| Color#72 | Link | Text | Link |
| Color#75 | Link | Text | Link |
| Color#76 | Link | Text | Link |
| Color#77 | Link | Text | Link |
| Color#78 | Link | Text | Link |
| Color#79 | Link | Text | Link |
| Color#80 | Link | Text | Link |
| Color#72 | Link | Text | Link |
| Color#82 | Link | Text | Link |
| Color#83 | Link | Text | Link |
| Color#84 | Link | Text | Link |
| Color#85 | Link | Text | Link |
| Color#86 | Link | Text | Link |
| Color#87 | Link | Text | Link |
| Color#88 | Link | Text | Link |
| Color#89 | Link | Text | Link |
| Color#90 | Link | Text | Link |
| Color#91 | Link | Text | Link |
| Color#92 | Link | Text | Link |
| Color#93 | Link | Text | Link |