Welcome to the Lylat Wiki, all about the Star Fox series! If you'd like to help out, please take a look at our community portal.
Difference between revisions of "Lylat Wiki:Color Scheme"
From Lylat Wiki, your source on Star Fox information. By Fans, for Fans.
Jump to navigationJump to search
(saving in order to move on) |
|||
Line 2: | Line 2: | ||
For ease of identification, or just for the fun of it, each [[LW:Area|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 [[LW:About WikiProjects|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. | |||
== Example == | |||
As an example, take a look at the following text: | |||
<pre> | |||
<div style="{{game-bg-color}}"> | |||
Text above table | |||
{| style="{{game-border}}" | |||
|- | |||
! style="{{game-th-bg-color}}" | table header cell | |||
! style="{{game-th-bg-color}}" | text | |||
! style="{{game-th-bg-color}}" | [[link]] | |||
! style="{{game-th-bg-color}}" | table header cell | |||
|- | |||
| style="{{game-td-bg-color}}" | table header cell | |||
| style="{{game-td-bg-color}}" | text | |||
| style="{{game-td-bg-color}}" | [[link]] | |||
| style="{{game-td-bg-color}}" | table header cell | |||
|- | |||
|} | |||
Text bellow table | |||
</div> | |||
</pre> | |||
comes out as | |||
<div style="{{game-bg-color}}"> | |||
Text above table | |||
{| style="{{game-border}}" | |||
|- | |||
! style="{{game-th-bg-color}}" | table header cell | |||
! style="{{game-th-bg-color}}" | text | |||
! style="{{game-th-bg-color}}" | [[link]] | |||
| style="{{game-th-bg-color}}" | table header cell | |||
| style="{{game-th-bg-color}}" | text | |||
| style="{{game-th-bg-color}}" | [[link]] | |||
|- | |||
| style="{{game-td-bg-color}}" | table header cell | |||
| style="{{game-td-bg-color}}" | text | |||
| style="{{game-td-bg-color}}" | [[link]] | |||
! style="{{game-td-bg-color}}" | table header cell | |||
! style="{{game-td-bg-color}}" | text | |||
! style="{{game-td-bg-color}}" | [[link]] | |||
|- | |||
|} | |||
Text bellow table | |||
</div> | |||
In the example, the div is stylized by {{tl|game-bg-color}}, giving the div a green background color. The table is affected by {{tl|game-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 {{tl|game-th-bg-color}} and the bottom row (the data cells) is affected by {{tl|game-td-bg-color}}. | |||
Now, each template doesn't have to be used in the manner that is specified here. You can make {{tl|game-bg-color}} be a header-color instead, as is done [[Template:games v2.0|here]], and keep the background white. But it is recommended you do that with higher-order templates, like {{tl|enemies v2.0}} and {{tl|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 <code>style=""</code> attriblute, once a css <code>class=""</code> is applied to one tag; it affects everything within it. So with the example above, | |||
<pre> | |||
<div class="color4" style="{{game-bg-color}}"> | |||
Text above table | |||
{| style="{{game-border}}" | |||
|- | |||
! style="{{game-th-bg-color}}" | table header cell | |||
! style="{{game-th-bg-color}}" | text | |||
! style="{{game-th-bg-color}}" | [[link]] | |||
! style="{{game-th-bg-color}}" | table header cell | |||
|- | |||
| style="{{game-td-bg-color}}" | table header cell | |||
| style="{{game-td-bg-color}}" | text | |||
| style="{{game-td-bg-color}}" | [[link]] | |||
| style="{{game-td-bg-color}}" | table header cell | |||
|- | |||
|} | |||
Text bellow table | |||
</div> | |||
</pre> | |||
comes out as | |||
<div class="color4" style="{{game-bg-color}}"> | |||
Text above table | |||
{| style="{{game-border}}" | |||
|- | |||
! style="{{game-th-bg-color}}" | table header cell | |||
! style="{{game-th-bg-color}}" | text | |||
! style="{{game-th-bg-color}}" | [[link]] | |||
| style="{{game-th-bg-color}}" | table header cell | |||
| style="{{game-th-bg-color}}" | text | |||
| style="{{game-th-bg-color}}" | [[link]] | |||
|- | |||
| style="{{game-td-bg-color}}" | table header cell | |||
| style="{{game-td-bg-color}}" | text | |||
| style="{{game-td-bg-color}}" | [[link]] | |||
! style="{{game-td-bg-color}}" | table header cell | |||
! style="{{game-td-bg-color}}" | text | |||
! style="{{game-td-bg-color}}" | [[link]] | |||
|- | |||
|} | |||
Text bellow table | |||
</div> | |||
== Usage == | |||
Here are the spe | |||
=== CSS syle-templates === | === CSS syle-templates === |