How to Use DiceColors template: Difference between revisions

From Looney Pyramid Games Wiki
Content added Content deleted
VisualWikitext
(Adding a how to page for the DiceColors template, still needs work)
 
(Just adding more details)
 
Line 1: Line 1:
The [[Template:DiceColors|DiceColors]] template allows you to easily add multi-colored dice to any page. For example:
{{DiceColors|d6-3|aquamarine,blue,red,black|4em|0em}}


=== Usage ===

<pre><nowiki>
{{DiceColors
| die-value
| colors
| size
}}
</nowiki></pre>
The above example used the following: <nowiki>{{DiceColors|d6-3|aquamarine,blue,red,black|4em}}</nowiki>
<br/>
==Die-Value==
The "die-value" is the die shape and face value. This must be a hyphenated value such as "d4-3" or "d20-15". Here are examples of the 8 valid die shapes:
The "die-value" is the die shape and face value. This must be a hyphenated value such as "d4-3" or "d20-15". Here are examples of the 8 valid die shapes:
{| class="wikitable"
{| class="wikitable"
Line 24: Line 38:
|}
|}
<br/>
<br/>
==Colors==
The "colors" field contains a comma-separated list of 1 to 4 colors for the different parts of the dice. Usually you wouldn't use them by themselves but here is an example showing 4 different colors being used separately so you can see what they do:
The "colors" field contains a comma-separated list of 1 to 4 colors for the different parts of the dice. The values can be any valid CSS [https://www.w3schools.com/css/css_colors.asp color]. Usually you wouldn't use them by themselves but here is an example showing 4 different colors being used separately so you can see what they do:


{| class="wikitable"
{| class="wikitable"
Line 40: Line 55:
Note: you can leave off any trailing commas, but must include any leading commas. ",blue" works the same as ",blue,," but "blue,," would actually match "blue,,,"
Note: you can leave off any trailing commas, but must include any leading commas. ",blue" works the same as ",blue,," but "blue,," would actually match "blue,,,"
<br/>
<br/>
Now let's combine the 4 colors:
Now let's combine the 4 color parameters:
{| class="wikitable"
{| class="wikitable"
|-
|-
Line 63: Line 78:
|style="text-align:center"|<nowiki>{{DiceColors|d6-3|lavender,black,red,purple}}</nowiki><br/>Adding the interior edge color gives it a little more shape.
|style="text-align:center"|<nowiki>{{DiceColors|d6-3|lavender,black,red,purple}}</nowiki><br/>Adding the interior edge color gives it a little more shape.
|}
|}
<br/>
==Size==
The size parameter lets you control how big the die is in relation to the other text. This can be any valid CSS [https://www.w3schools.com/css/css_font_size.asp font size]. Here are examples with 2em to 5em sizes:
{| class="wikitable"
|-
|style="text-align:center"|{{DiceColors|d6-3|aquamarine,blue,red,black|2em}}
|style="text-align:center"|{{DiceColors|d6-3|aquamarine,blue,red,black|3em}}
|style="text-align:center"|{{DiceColors|d6-3|aquamarine,blue,red,black|4em}}
|style="text-align:center"|{{DiceColors|d6-3|aquamarine,blue,red,black|5em}}
|-
|style="text-align:center"|<nowiki>{{DiceColors|d6-3|aquamarine,blue,red,black|2em}}</nowiki><br/>
|style="text-align:center"|<nowiki>{{DiceColors|d6-3|aquamarine,blue,red,black|3em}}</nowiki><br/>
|style="text-align:center"|<nowiki>{{DiceColors|d6-3|aquamarine,blue,red,black|4em}}</nowiki><br/>
|style="text-align:center"|<nowiki>{{DiceColors|d6-3|aquamarine,blue,red,black|5em}}</nowiki><br/>
|}
<br/>

==More==
If you want to experiment with what you can make the die look like, here are all combinations of color parameters:<br/>
{{DiceColors|d6-3|aquamarine,blue,red,black|4em|0em}}aquamarine,blue,red,black<br/>
{{DiceColors|d6-3|aquamarine,,,|4em|0em}}aquamarine,,,<br/>
{{DiceColors|d6-3|,blue,,|4em|0em}},blue,,<br/>
{{DiceColors|d6-3|,,red,|4em|0em}},,red,<br/>
{{DiceColors|d6-3|,,,black|4em|0em}},,,black<br/>
{{DiceColors|d6-3|aquamarine,blue,,|4em|0em}}aquamarine,blue,,<br/>
{{DiceColors|d6-3|aquamarine,,red,|4em|0em}}aquamarine,,red,<br/>
{{DiceColors|d6-3|aquamarine,,,black|4em|0em}}aquamarine,,,black<br/>
{{DiceColors|d6-3|,blue,red,|4em|0em}},blue,red,<br/>
{{DiceColors|d6-3|,blue,,black|4em|0em}},blue,,black<br/>
{{DiceColors|d6-3|,,red,black|4em|0em}},,red,black<br/>
{{DiceColors|d6-3|aquamarine,blue,red,|4em|0em}}aquamarine,blue,red,<br/>
{{DiceColors|d6-3|aquamarine,blue,,black|4em|0em}}aquamarine,blue,,black<br/>
{{DiceColors|d6-3|aquamarine,,red,black|4em|0em}}aquamarine,,red,black<br/>
{{DiceColors|d6-3|,blue,red,black|4em|0em}},blue,red,black<br/>

Latest revision as of 01:20, 26 April 2024

The DiceColors template allows you to easily add multi-colored dice to any page. For example: :d6solid:d6blank:d6-3:d6border

Usage[edit | edit source]

{{DiceColors
| die-value
| colors
| size
}}

The above example used the following: {{DiceColors|d6-3|aquamarine,blue,red,black|4em}}

Die-Value[edit | edit source]

The "die-value" is the die shape and face value. This must be a hyphenated value such as "d4-3" or "d20-15". Here are examples of the 8 valid die shapes:

:d4-3:d4border :d6-5:d6border :d6n-2:d6nborder :d8-7:d8border
D4
{{DiceColors|d4-1}}
Values: d4-1 to d4-4 		D6 with pips
{{DiceColors|d6-5}}
Values: d6-1 to d6-6 		D6 with numbers
{{DiceColors|d6n-2}}
Values: d6n-1 to d6n-6 		D8
{{DiceColors|d8-7}}
Values: d8-1 to d8-8
:d10-6:d10border :d10p-00:d10pborder :d12-9:d12border :d20-19:d20border
D10
{{DiceColors|d10-6}}
Values: d10-0 to d10-10 		D10 percentile
{{DiceColors|d10p-00}}
Values: d10p-00 to d10p-90 		D12
{{DiceColors|d12-9}}
Values: d12-1 to d12-12 		D20
{{DiceColors|d20-19}}
Values: d20-1 to d20-20


Colors[edit | edit source]

The "colors" field contains a comma-separated list of 1 to 4 colors for the different parts of the dice. The values can be any valid CSS color. Usually you wouldn't use them by themselves but here is an example showing 4 different colors being used separately so you can see what they do:

:d6-3:d6border :d6blank:d6border :d6solid:d6border :d6border
{{DiceColors|d6-3|aquamarine,,,}}
The first color in the list specifies the "body" color of the die. 		{{DiceColors|d6-3|,blue,,}}
The second color specifies the pip/numeral color. 		{{DiceColors|d6-3|,,red,}}
The third color specifies the internal edge color. 		{{DiceColors|d6-3|,,,black}}
the fourth color specifies the outside border color.

Note: you can leave off any trailing commas, but must include any leading commas. ",blue" works the same as ",blue,," but "blue,," would actually match "blue,,,"
Now let's combine the 4 color parameters:

:d6-3:d6border :d6blank:d6-3:d6border :d6solid:d6blank:d6-3:d6border :d6solid:d6blank:d6-3:d6border
{{DiceColors|d6-3|red,,,}}
A single-color die is fine as long as it contrasts with the background color of the page. 		{{DiceColors|d6-3|red,black,,}}
Now let's give the pips a different color. 		{{DiceColors|d6-3|red,black,yellow,}}
Changing the edge color let's give it a little bit of a highlight. 		{{DiceColors|d6-3|red,black,yellow,black}}
And to really make it stand out against the background you add the outside border.
:d6-3:d6border :d6-3:d6border :d6blank:d6-3:d6border :d6solid:d6blank:d6-3:d6border
{{DiceColors|d6-3|lavender,,,}}
A light color die will often disappear against the background. 		{{DiceColors|d6-3|lavender,,,purple}}
Give it a border to make it show up. 		{{DiceColors|d6-3|lavender,black,,purple}}
Setting the pip/numeral color makes that show up better. 		{{DiceColors|d6-3|lavender,black,red,purple}}
Adding the interior edge color gives it a little more shape.


Size[edit | edit source]

The size parameter lets you control how big the die is in relation to the other text. This can be any valid CSS font size. Here are examples with 2em to 5em sizes:

:d6solid:d6blank:d6-3:d6border :d6solid:d6blank:d6-3:d6border :d6solid:d6blank:d6-3:d6border :d6solid:d6blank:d6-3:d6border
{{DiceColors|d6-3|aquamarine,blue,red,black|2em}}
 {{DiceColors|d6-3|aquamarine,blue,red,black|3em}}
 {{DiceColors|d6-3|aquamarine,blue,red,black|4em}}
 {{DiceColors|d6-3|aquamarine,blue,red,black|5em}}


More[edit | edit source]

If you want to experiment with what you can make the die look like, here are all combinations of color parameters:
:d6solid:d6blank:d6-3:d6borderaquamarine,blue,red,black
:d6-3:d6borderaquamarine,,,
:d6blank:d6border,blue,,
:d6solid:d6border,,red,
:d6border,,,black
:d6blank:d6-3:d6borderaquamarine,blue,,
:d6solid:d6-3:d6borderaquamarine,,red,
:d6-3:d6borderaquamarine,,,black
:d6solid:d6blank:d6border,blue,red,
:d6blank:d6border,blue,,black
:d6solid:d6border,,red,black
:d6solid:d6blank:d6-3:d6borderaquamarine,blue,red,
:d6blank:d6-3:d6borderaquamarine,blue,,black
:d6solid:d6-3:d6borderaquamarine,,red,black
:d6solid:d6blank:d6border,blue,red,black

Retrieved from "https://looneypyramids.wiki/wiki/How_to_Use_DiceColors_template?oldid=14129"