Lylat Wiki

Difference between revisions of "Lylat Wiki:Color Scheme"

Lylat Wiki:Color Scheme (view source)

Revision as of 04:40, 10 May 2020

11,502 bytes added ,  04:40, 10 May 2020
m
added Category:Lylat Wiki using HotCat
m (added Category:Lylat Wiki using HotCat)
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Shortcuts | Policy | {{LW:Color}} }}
{{Shortcuts|LW:Color|LW:Colors}}
 


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. These are:  
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. These are:  


; -border
; color border
: For the border  
: For the border
; -bg-color
; color 1
: 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.  
: for the background color for the table data cells.  
; color 2
: For the general background color and for the table header cells.




Line 17: Line 14:
As an example, take a look at the following text:  
As an example, take a look at the following text:  
<pre>
<pre>
<div style="{{character-bg-color}}">
<div style="{{Character color 2}}">
Text above table. [[Link]]. [[Fox McCloud|Fox]].
Text above table. [[Link]]. [[Fox McCloud|Fox]].
{| style="{{character-border}}"
{| style="{{Character color border}}"
|-
|-
! style="{{character-th-bg-color}}" | table header cell
! style="{{Character color 2}}" | table header cell
! style="{{character-th-bg-color}}" | text
! style="{{Character color 2}}" | text
! style="{{character-th-bg-color}}" | [[Fox McCloud|Fox]]
! style="{{Character color 2}}" | [[Fox McCloud|Fox]]
! style="{{character-th-bg-color}}" | table header cell
! style="{{Character color 2}}" | table header cell
! style="{{character-th-bg-color}}" | text
! style="{{Character color 2}}" | text
! style="{{character-th-bg-color}}" | [[link]]
! style="{{Character color 2}}" | [[link]]
|-
|-
| style="{{character-td-bg-color}}" | table header cell
| style="{{Character color 1}}" | table header cell
| style="{{character-td-bg-color}}" | text
| style="{{Character color 1}}" | text
| style="{{character-td-bg-color}}" | [[Fox McCloud|Fox]]
| style="{{Character color 1}}" | [[Fox McCloud|Fox]]
| style="{{character-td-bg-color}}" | table header cell
| style="{{Character color 1}}" | table header cell
| style="{{character-td-bg-color}}" | text
| style="{{Character color 1}}" | text
| style="{{character-td-bg-color}}" | [[link]]
| style="{{Character color 1}}" | [[link]]


|-
|-
|}
|}
Text bellow table
Text below table
</div>
</div>
</pre>
</pre>


comes out as  
comes out as  
<div style="{{character-bg-color}}">
<div style="{{Character color 2}}">
Text above table. [[Link]]. [[Fox McCloud|Fox]].
Text above table. [[Link]]. [[Fox McCloud|Fox]].
{| style="{{character-border}}"
{| style="{{Character color border}}"
|-
|-
! style="{{character-th-bg-color}}" | table header cell
! style="{{Character color 2}}" | table header cell
! style="{{character-th-bg-color}}" | text
! style="{{Character color 2}}" | text
! style="{{character-th-bg-color}}" | [[link]]
! style="{{Character color 2}}" | [[link]]
| style="{{character-th-bg-color}}" | table header cell
| style="{{Character color 2}}" | table header cell
| style="{{character-th-bg-color}}" | text
| style="{{Character color 2}}" | text
| style="{{character-th-bg-color}}" | [[link]]
| style="{{Character color 2}}" | [[link]]
|-
|-
| style="{{character-td-bg-color}}" | table header cell
| style="{{Character color 1}}" | table header cell
| style="{{character-td-bg-color}}" | text
| style="{{Character color 1}}" | text
| style="{{character-td-bg-color}}" | [[link]]
| style="{{Character color 1}}" | [[link]]
! style="{{character-td-bg-color}}" | table header cell
! style="{{Character color 1}}" | table header cell
! style="{{character-td-bg-color}}" | text
! style="{{Character color 1}}" | text
! style="{{character-td-bg-color}}" | [[link]]
! style="{{Character color 1}}" | [[link]]
|-
|-
|}
|}
Text bellow table
Text bellow table
</div>
</div>
In the example, the div is stylized by {{tl|character-bg-color}}, giving the div a green background color. The table is affected by {{tl|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.  
In the example, the div is stylized by {{t|Character color 2}}, giving the div a blue background color. The table is affected by {{t|Character color 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|character-th-bg-color}} and the bottom row (the data cells) is affected by {{tl|character-td-bg-color}}.  
Next, notice the top row and bottom row are different colors. This is because the top row (the header cells) is affected by {{t|Character color 2}} and the bottom row (the data cells) is affected by {{t|Character color 1}}.  


Now, each template doesn't have to be used in the manner that is specified here. You can make {{tl|character-bg-color}} be a header-color instead, as is done [[Template:games|here]], and keep the background white. But it is recommended you do that with higher-order templates, like {{tl|enemies}} and {{tl|stages}}.  
Now, each template doesn't have to be used in the manner that is specified here. You can make {{t|Character color 2}} be a header-color instead, as is done [[Template:games|here]], and keep the background white. But it is recommended you do that with higher-order templates, like {{t|enemies}} and {{t|stages}}.  


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,  
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>
<pre>
<div class="color4" style="{{character-bg-color}}">
<div class="color4" style="{{Character color 2}}">
Text above table. [[Link]]. [[Fox McCloud|Fox]].
Text above table. [[Link]]. [[Fox McCloud|Fox]].
{| style="{{character-border}}"
{| style="{{Character color border}}"
|-
|-
! style="{{character-th-bg-color}}" | table header cell
! style="{{Character color 2}}" | table header cell
! style="{{character-th-bg-color}}" | text
! style="{{Character color 2}}" | text
! style="{{character-th-bg-color}}" | [[Fox McCloud|Fox]]
! style="{{Character color 2}}" | [[Fox McCloud|Fox]]
! style="{{character-th-bg-color}}" | table header cell
! style="{{Character color 2}}" | table header cell
! style="{{character-th-bg-color}}" | text
! style="{{Character color 2}}" | text
! style="{{character-th-bg-color}}" | [[link]]
! style="{{Character color 2}}" | [[link]]
|-
|-
| style="{{character-td-bg-color}}" | table header cell
| style="{{Character color 1}}" | table header cell
| style="{{character-td-bg-color}}" | text
| style="{{Character color 1}}" | text
| style="{{character-td-bg-color}}" | [[Fox McCloud|Fox]]
| style="{{Character color 1}}" | [[Fox McCloud|Fox]]
| style="{{character-td-bg-color}}" | table header cell
| style="{{Character color 1}}" | table header cell
| style="{{character-td-bg-color}}" | text
| style="{{Character color 1}}" | text
| style="{{character-td-bg-color}}" | [[link]]
| style="{{Character color 1}}" | [[link]]
|-
|-
|}
|}
Line 96: Line 93:


comes out as  
comes out as  
<div class="color5" style="{{character-bg-color}}">
<div class="color5" style="{{Character color 2}}">
Text above table. [[Link]]. [[Fox McCloud|Fox]].
Text above table. [[Link]]. [[Fox McCloud|Fox]].
{| style="{{character-border}}"
{| style="{{Character color border}}"
|-
|-
! style="{{character-th-bg-color}}" | table header cell
! style="{{Character color 2}}" | table header cell
! style="{{character-th-bg-color}}" | text
! style="{{Character color 2}}" | text
! style="{{character-th-bg-color}}" | [[Fox McCloud|Fox]
! style="{{Character color 2}}" | [[Fox McCloud|Fox]
| style="{{character-th-bg-color}}" | table header cell
| style="{{Character color 2}}" | table header cell
| style="{{character-th-bg-color}}" | text
| style="{{Character color 2}}" | text
| style="{{character-th-bg-color}}" | [[link]]
| style="{{Character color 2}}" | [[link]]
|-
|-
| style="{{character-td-bg-color}}" | table header cell
| style="{{Character color 1}}" | table header cell
| style="{{character-td-bg-color}}" | text
| style="{{Character color 1}}" | text
| style="{{character-td-bg-color}}" | [[Fox McCloud|Fox]
| style="{{Character color 1}}" | [[Fox McCloud|Fox]
! style="{{character-td-bg-color}}" | table header cell
! style="{{Character color 1}}" | table header cell
! style="{{character-td-bg-color}}" | text
! style="{{Character color 1}}" | text
! style="{{character-td-bg-color}}" | [[link]]
! style="{{Character color 1}}" | [[link]]
|-
|-
|}
|}
Line 122: Line 119:
Here are the specific templates and color codes available for you to choose.  
Here are the specific templates and color codes available for you to choose.  


=== CSS syle-templates ===
=== Color templates ===
{{Color Templates}}
{{Main|Lylat Wiki:Templates#Color templates}}


=== CSS color-codes ===
=== CSS color-codes ===
{{Color-Codes}}
{| border=1
|-
! class = "color1" | Color#1
! class = "color1" | [[Link]]
| class = "color1" | Text
| class = "color1" | [[Link]]
|-
! class = "color2" | Color#2
! class = "color2" | [[Link]]
| class = "color2" | Text
| class = "color2" | [[Link]]
|-
! class = "color3" | Color#3
! class = "color3" | [[Link]]
| class = "color3" | Text
| class = "color3" | [[Link]]
|-
! class = "color4" | Color#4
! class = "color4" | [[Link]]
| class = "color4" | Text
| class = "color4" | [[Link]]
|-
! class = "color5" | Color#5
! class = "color5" | [[Link]]
| class = "color5" | Text
| class = "color5" | [[Link]]
|-
! class = "color6" | Color#6
! class = "color6" | [[Link]]
| class = "color6" | Text
| class = "color6" | [[Link]]
|-
! class = "color7" | Color#7
! class = "color7" | [[Link]]
| class = "color7" | Text
| class = "color7" | [[Link]]
|-
! class = "color8" | Color#8
! class = "color8" | [[Link]]
| class = "color8" | Text
| class = "color8" | [[Link]]
|-
! class = "color9" | Color#9
! class = "color9" | [[Link]]
| class = "color9" | Text
| class = "color9" | [[Link]]
|-
! class = "color10" | Color#10
! class = "color10" | [[Link]]
| class = "color10" | Text
| class = "color10" | [[Link]]
|-
! class = "color11" | Color#11
! class = "color11" | [[Link]]
| class = "color11" | Text
| class = "color11" | [[Link]]
|-
! class = "color12" | Color#12
! class = "color12" | [[Link]]
| class = "color12" | Text
| class = "color12" | [[Link]]
|-
! class = "color13" | Color#13
! class = "color13" | [[Link]]
| class = "color13" | Text
| class = "color13" | [[Link]]
|-
! class = "color14" | Color#14
! class = "color14" | [[Link]]
| class = "color14" | Text
| class = "color14" | [[Link]]
|-
! class = "color15" | Color#15
! class = "color15" | [[Link]]
| class = "color15" | Text
| class = "color15" | [[Link]]
|-
! class = "color16" | Color#16
! class = "color16" | [[Link]]
| class = "color16" | Text
| class = "color16" | [[Link]]
|-
! class = "color17" | Color#17
! class = "color17" | [[Link]]
| class = "color17" | Text
| class = "color17" | [[Link]]
|-
! class = "color18" | Color#18
! class = "color18" | [[Link]]
| class = "color18" | Text
| class = "color18" | [[Link]]
|-
! class = "color19" | Color#19
! class = "color19" | [[Link]]
| class = "color19" | Text
| class = "color19" | [[Link]]
|-
! class = "color20" | Color#20
! class = "color20" | [[Link]]
| class = "color20" | Text
| class = "color20" | [[Link]]
|-
! class = "color21" | Color#21
! class = "color21" | [[Link]]
| class = "color21" | Text
| class = "color21" | [[Link]]
|-
! class = "color22" | Color#22
! class = "color22" | [[Link]]
| class = "color22" | Text
| class = "color22" | [[Link]]
|-
! class = "color23" | Color#23
! class = "color23" | [[Link]]
| class = "color23" | Text
| class = "color23" | [[Link]]
|-
! class = "color24" | Color#24
! class = "color24" | [[Link]]
| class = "color24" | Text
| class = "color24" | [[Link]]
|-
! class = "color25" | Color#25
! class = "color25" | [[Link]]
| class = "color25" | Text
| class = "color25" | [[Link]]
|-
! class = "color26" | Color#26
! class = "color26" | [[Link]]
| class = "color26" | Text
| class = "color26" | [[Link]]
|-
! class = "color27" | Color#27
! class = "color27" | [[Link]]
| class = "color27" | Text
| class = "color27" | [[Link]]
|-
! class = "color28" | Color#28
! class = "color28" | [[Link]]
| class = "color28" | Text
| class = "color28" | [[Link]]
|-
! class = "color29" | Color#29
! class = "color29" | [[Link]]
| class = "color29" | Text
| class = "color29" | [[Link]]
|-
! class = "color30" | Color#30
! class = "color30" | [[Link]]
| class = "color30" | Text
| class = "color30" | [[Link]]
|-
! class = "color31" | Color#31
! class = "color31" | [[Link]]
| class = "color31" | Text
| class = "color31" | [[Link]]
|-
! class = "color32" | Color#32
! class = "color32" | [[Link]]
| class = "color32" | Text
| class = "color32" | [[Link]]
|-
! class = "color33" | Color#33
! class = "color33" | [[Link]]
| class = "color33" | Text
| class = "color33" | [[Link]]
|-
! class = "color34" | Color#34
! class = "color34" | [[Link]]
| class = "color34" | Text
| class = "color34" | [[Link]]
|-
! class = "color35" | Color#35
! class = "color35" | [[Link]]
| class = "color35" | Text
| class = "color35" | [[Link]]
|-
! class = "color36" | Color#36
! class = "color36" | [[Link]]
| class = "color36" | Text
| class = "color36" | [[Link]]
|-
! class = "color37" | Color#37
! class = "color37" | [[Link]]
| class = "color37" | Text
| class = "color37" | [[Link]]
|-
! class = "color38" | Color#38
! class = "color38" | [[Link]]
| class = "color38" | Text
| class = "color38" | [[Link]]
|-
! class = "color39" | Color#39
! class = "color39" | [[Link]]
| class = "color39" | Text
| class = "color39" | [[Link]]
|-
! class = "color40" | Color#40
! class = "color40" | [[Link]]
| class = "color40" | Text
| class = "color40" | [[Link]]
|-
! class = "color41" | Color#41
! class = "color41" | [[Link]]
| class = "color41" | Text
| class = "color41" | [[Link]]
|-
! class = "color42" | Color#42
! class = "color42" | [[Link]]
| class = "color42" | Text
| class = "color42" | [[Link]]
|-
! class = "color43" | Color#43
! class = "color43" | [[Link]]
| class = "color43" | Text
| class = "color43" | [[Link]]
|-
 
! class = "color44" | Color#44
! class = "color44" | [[Link]]
| class = "color44" | Text
| class = "color44" | [[Link]]
|-
! class = "color45" | Color#45
! class = "color45" | [[Link]]
| class = "color45" | Text
| class = "color45" | [[Link]]
|-
! class = "color46" | Color#46
! class = "color46" | [[Link]]
| class = "color46" | Text
| class = "color46" | [[Link]]
|-
! class = "color47" | Color#47
! class = "color47" | [[Link]]
| class = "color47" | Text
| class = "color47" | [[Link]]
|-
! class = "color48" | Color#48
! class = "color48" | [[Link]]
| class = "color48" | Text
| class = "color48" | [[Link]]
|-
! class = "color49" | Color#49
! class = "color49" | [[Link]]
| class = "color49" | Text
| class = "color49" | [[Link]]
|-
! class = "color50" | Color#50
! class = "color50" | [[Link]]
| class = "color50" | Text
| class = "color50" | [[Link]]
|-
! class = "color51" | Color#51
! class = "color51" | [[Link]]
| class = "color51" | Text
| class = "color51" | [[Link]]
|-
! class = "color52" | Color#52
! class = "color52" | [[Link]]
| class = "color52" | Text
| class = "color52" | [[Link]]
|-
! class = "color53" | Color#53
! class = "color53" | [[Link]]
| class = "color53" | Text
| class = "color53" | [[Link]]
|-
! class = "color54" | Color#54
! class = "color54" | [[Link]]
| class = "color54" | Text
| class = "color54" | [[Link]]
|-
! class = "color55" | Color#55
! class = "color55" | [[Link]]
| class = "color55" | Text
| class = "color55" | [[Link]]
|-
! class = "color56" | Color#56
! class = "color56" | [[Link]]
| class = "color56" | Text
| class = "color56" | [[Link]]
|-
! class = "color57" | Color#57
! class = "color57" | [[Link]]
| class = "color57" | Text
| class = "color57" | [[Link]]
|-
! class = "color58" | Color#58
! class = "color58" | [[Link]]
| class = "color58" | Text
| class = "color58" | [[Link]]
|-
! class = "color59" | Color#59
! class = "color59" | [[Link]]
| class = "color59" | Text
| class = "color59" | [[Link]]
|-
! class = "color60" | Color#60
! class = "color60" | [[Link]]
| class = "color60" | Text
| class = "color60" | [[Link]]
|-
! class = "color61" | Color#61
! class = "color61" | [[Link]]
| class = "color61" | Text
| class = "color61" | [[Link]]
|-
! class = "color62" | Color#62
! class = "color62" | [[Link]]
| class = "color62" | Text
| class = "color62" | [[Link]]
|-
! class = "color63" | Color#63
! class = "color63" | [[Link]]
| class = "color63" | Text
| class = "color63" | [[Link]]
|-
! class = "color64" | Color#64
! class = "color64" | [[Link]]
| class = "color64" | Text
| class = "color64" | [[Link]]
|-
! class = "color65" | Color#65
! class = "color65" | [[Link]]
| class = "color65" | Text
| class = "color65" | [[Link]]
|-
! class = "color66" | Color#66
! class = "color66" | [[Link]]
| class = "color66" | Text
| class = "color66" | [[Link]]
|-
! class = "color67" | Color#67
! class = "color67" | [[Link]]
| class = "color67" | Text
| class = "color67" | [[Link]]
|-
! class = "color68" | Color#68
! class = "color68" | [[Link]]
| class = "color68" | Text
| class = "color68" | [[Link]]
|-
! class = "color68" | Color#68
! class = "color68" | [[Link]]
| class = "color68" | Text
| class = "color68" | [[Link]]
|-
! class = "color69" | Color#69
! class = "color69" | [[Link]]
| class = "color69" | Text
| class = "color69" | [[Link]]
|-
! class = "color70" | Color#70
! class = "color70" | [[Link]]
| class = "color70" | Text
| class = "color70" | [[Link]]
|-
! class = "color71" | Color#71
! class = "color71" | [[Link]]
| class = "color71" | Text
| class = "color71" | [[Link]]
|-
! class = "color72" | Color#72
! class = "color72" | [[Link]]
| class = "color72" | Text
| class = "color72" | [[Link]]
|-
! class = "color73" | Color#73
! class = "color73" | [[Link]]
| class = "color73" | Text
| class = "color73" | [[Link]]
|-
! class = "color74" | Color#72
! class = "color74" | [[Link]]
| class = "color74" | Text
| class = "color74" | [[Link]]
|-
! class = "color75" | Color#75
! class = "color75" | [[Link]]
| class = "color75" | Text
| class = "color75" | [[Link]]
|-
! class = "color76" | Color#76
! class = "color76" | [[Link]]
| class = "color76" | Text
| class = "color76" | [[Link]]
|-
! class = "color77" | Color#77
! class = "color77" | [[Link]]
| class = "color77" | Text
| class = "color77" | [[Link]]
|-
! class = "color78" | Color#78
! class = "color78" | [[Link]]
| class = "color78" | Text
| class = "color78" | [[Link]]
|-
! class = "color79" | Color#79
! class = "color79" | [[Link]]
| class = "color79" | Text
| class = "color79" | [[Link]]
|-
! class = "color80" | Color#80
! class = "color80" | [[Link]]
| class = "color80" | Text
| class = "color80" | [[Link]]
|-
! class = "color81" | Color#72
! class = "color81" | [[Link]]
| class = "color81" | Text
| class = "color81" | [[Link]]
|-
! class = "color82" | Color#82
! class = "color82" | [[Link]]
| class = "color82" | Text
| class = "color82" | [[Link]]
|-
! class = "color83" | Color#83
! class = "color83" | [[Link]]
| class = "color83" | Text
| class = "color83" | [[Link]]
|-
! class = "color84" | Color#84
! class = "color84" | [[Link]]
| class = "color84" | Text
| class = "color84" | [[Link]]
|-
! class = "color72" | Color#85
! class = "color72" | [[Link]]
| class = "color72" | Text
| class = "color72" | [[Link]]
|-
! class = "color86" | Color#86
! class = "color86" | [[Link]]
| class = "color86" | Text
| class = "color86" | [[Link]]
|-
! class = "color87" | Color#87
! class = "color87" | [[Link]]
| class = "color87" | Text
| class = "color87" | [[Link]]
|-
! class = "color88" | Color#88
! class = "color88" | [[Link]]
| class = "color88" | Text
| class = "color88" | [[Link]]
|-
! class = "color89" | Color#89
! class = "color89" | [[Link]]
| class = "color89" | Text
| class = "color89" | [[Link]]
|-
! class = "color90" | Color#90
! class = "color90" | [[Link]]
| class = "color90" | Text
| class = "color90" | [[Link]]
|-
! class = "color91" | Color#91
! class = "color91" | [[Link]]
| class = "color91" | Text
| class = "color91" | [[Link]]
|-
! class = "color92" | Color#92
! class = "color92" | [[Link]]
| class = "color92" | Text
| class = "color92" | [[Link]]
|-
! class = "color93" | Color#93
! class = "color93" | [[Link]]
| class = "color93" | Text
| class = "color93" | [[Link]]
|-
|}
 
[[Category:Lylat Wiki]]
Results May Vary
8,161

edits

Retrieved from "https://starfoxwiki.info/wiki/Special:MobileDiff/78536...88445"