This is a documentation for Board Game Arena: play board games online !
Template:Text: Difference between revisions
Jump to navigation
Jump to search
Sammy McSam (talk | contribs) (Customisable text template) |
Sammy McSam (talk | contribs) (+gradients) |
||
| Line 1: | Line 1: | ||
<span style="color:{{{c}}};font-size:{{{s}}}rem;font-weight:{{{w}}};font-style:{{{i}}};font-family:{{{f}}};white-space:{{{wrap}}};-webkit-text-stroke:{{{ow|0.25}}}px {{{oc}}};border:{{{bw|1}}}px {{{bs|solid}}} {{{bc}}};border-radius:{{{br}}}rem;padding-block:{{{v}}}rem;padding-inline:{{{h}}}rem;background:{{{bg}}};">{{{1|A}}}</span><noinclude> | <span style="color:{{{c}}};font-size:{{{s}}}rem;font-weight:{{{w}}};font-style:{{{i}}};font-family:{{{f}}};white-space:{{{wrap}}};-webkit-text-stroke:{{{ow|0.25}}}px {{{oc}}};border:{{{bw|1}}}px {{{bs|solid}}} {{{bc}}};border-radius:{{{br}}}rem;padding-block:{{{v}}}rem;padding-inline:{{{h}}}rem;background:{{{bg|linear-gradient(calc({{{bgd|0}}}deg + 90deg) in oklch,{{{bg1|#fff0}}},{{{bg2|#fff0}}})}}};">{{{1|A}}}</span><noinclude> | ||
== Examples == | == Examples == | ||
| Line 8: | Line 8: | ||
=== [[Template:Pill]] === | === [[Template:Pill]] === | ||
{{pill|pill background | {{pill|pill background|green}} | ||
<code><nowiki>{{pill|pill background | <code><nowiki>{{pill|pill background|green}}</nowiki></code> | ||
=== [[Template:Code]] === | === [[Template:Code]] === | ||
| Line 93: | Line 93: | ||
<div>background</div> | <div>background</div> | ||
<div>transparent</div> | <div>transparent</div> | ||
<div><code><nowiki>{{text|bg= | <div><code><nowiki>{{text|bg=lightgreen</nowiki></code><br><code><nowiki>|some text}}</nowiki></code></div> | ||
<div>{{text|s=1|bg= | <div>{{text|s=1|bg=lightgreen|some text}}</div> | ||
<div>'''''Optional:''''' background color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value CSS color value].</div> | <div>'''''Optional:''''' background color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value CSS color value].</div> | ||
<div><code>bc</code></div> | <div><code>bc</code></div> | ||
| Line 115: | Line 115: | ||
<div>'''''Optional:''''' border style as a [https://developer.mozilla.org/en-US/docs/Web/CSS/border-style CSS {{code|c=#3366cc|border-style}} value].</div> | <div>'''''Optional:''''' border style as a [https://developer.mozilla.org/en-US/docs/Web/CSS/border-style CSS {{code|c=#3366cc|border-style}} value].</div> | ||
<div><code>v</code></div> | <div><code>v</code></div> | ||
<div>vertical | <div>vertical space</div> | ||
<div>0</div> | <div>0</div> | ||
<div><code><nowiki>{{text|v=0.5</nowiki></code><br><code><nowiki>|bc=grey|some text}}</nowiki></code></div> | <div><code><nowiki>{{text|v=0.5</nowiki></code><br><code><nowiki>|bc=grey|some text}}</nowiki></code></div> | ||
| Line 121: | Line 121: | ||
<div>'''''Optional:''''' vertical spacing in [https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem rem units] (<code>1rem</code> = <code>16px</code>).</div> | <div>'''''Optional:''''' vertical spacing in [https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem rem units] (<code>1rem</code> = <code>16px</code>).</div> | ||
<div><code>h</code></div> | <div><code>h</code></div> | ||
<div>horizontal | <div>horizontal space</div> | ||
<div>0</div> | <div>0</div> | ||
<div><code><nowiki>{{text|h=1</nowiki></code><br><code><nowiki>|bc=grey|some text}}</nowiki></code></div> | <div><code><nowiki>{{text|h=1</nowiki></code><br><code><nowiki>|bc=grey|some text}}</nowiki></code></div> | ||
| Line 132: | Line 132: | ||
<div>{{text|s=1|br=1|bc=grey|v=0.25|h=0.5|some text}}</div> | <div>{{text|s=1|br=1|bc=grey|v=0.25|h=0.5|some text}}</div> | ||
<div>'''''Optional:''''' border radius in [https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem rem units] (<code>1rem</code> = <code>16px</code>).</div> | <div>'''''Optional:''''' border radius in [https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem rem units] (<code>1rem</code> = <code>16px</code>).</div> | ||
<div><code>bg1</code></div> | |||
<div>background<br>start color</div> | |||
<div>transparent</div> | |||
<div><code><nowiki>{{text|bg1=lightgreen</nowiki></code><br><code><nowiki>|some text}}</nowiki></code></div> | |||
<div>{{text|s=1|bg1=lightgreen|some text}}</div> | |||
<div>'''''Optional:''''' background color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value CSS color value].</div> | |||
<div><code>bg2</code></div> | |||
<div>background<br>stop color</div> | |||
<div>transparent</div> | |||
<div><code><nowiki>{{text|bg2=lightgreen</nowiki></code><br><code><nowiki>|some text}}</nowiki></code></div> | |||
<div>{{text|s=1|bg2=lightgreen|some text}}</div> | |||
<div>'''''Optional:''''' background color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value CSS color value].</div> | |||
<div><code>bgd</code></div> | |||
<div>background<br>direction</div> | |||
<div><code>0</code> (🡆)</div> | |||
<div><code><nowiki>{{text|bgd=80</nowiki></code><br><code><nowiki>|bg1=lightgrey</nowiki></code><br><code><nowiki>|some text}}</nowiki></code></div> | |||
<div>{{text|s=1|bgd=80|bg1=lightgrey|some text}}</div> | |||
<div>'''''Optional:''''' background direction in [https://developer.mozilla.org/en-US/docs/Web/CSS/angle#deg degrees].</div> | |||
</div> | </div> | ||
[[Category:WikiTemplates]] | [[Category:WikiTemplates]] | ||
</noinclude> | </noinclude> | ||
Revision as of 17:02, 22 May 2025
A
Examples
Inside this blue text template you can nest other red, bold, bigger, yellow highlight, circled text templates or any other customised combination! 🡆★☻⚂.
{{text|c=blue|Inside this blue text template you can nest other {{text|c=red|red}}, {{text|w=bold|bold}}, {{text|s=1.2|bigger}}, {{text|bg=yellow|yellow highlight}}, {{text|bc=red|v=0.25|h=0.5|br=1|circled}} text templates or any other customised combination! 🡆★☻⚂.}}
Template:Pill
pill background
{{pill|pill background|green}}
Template:Code
red color code
{{code|red color code}}
Parameters
text
Id
Name
Default
Example
Result
Description
1text
A{{text|some text}}some text
Required: content.
ccolor
unchanged
{{text|c=green|some text}}some text
Optional: text color as a CSS color value.
ssize
unchanged
{{text|s=1.3|some text}}some text
wweight
unchanged
{{text|w=bold|some text}}some text
Optional: text weight as a CSS font-weight value.
iitalic
unchanged
{{text|i=italic|some text}}some text
Optional: text style as a CSS font-style value.
ffont
unchanged
{{text|f=cursive|some text}}some text
Optional: font name as a CSS font-family value.
ocoutline color
transparent
{{text|oc=green|some text}}some text
Optional: text outline color as a CSS color value.
owoutline weight
0.25{{text|ow=0.5|oc=green|some text}}some text
Optional: text outline weight in px units.
wrapwrap
wrap{{text|wrap=nowrap|some text}}some text
Optional: prevent line breaks.
background & border
Id
Name
Default
Example
Result
Description
bgbackground
transparent
{{text|bg=lightgreen|some text}}some text
Optional: background color as a CSS color value.
bcborder color
transparent
{{text|bc=green|some text}}some text
Optional: border color as a CSS color value.
bwborder weight
1{{text|bw=1.4|bc=grey|some text}}some text
Optional: border weight in px units.
bsborder style
solid{{text|bs=dashed|bc=grey|some text}}some text
Optional: border style as a CSS border-style value.
vvertical space
0
{{text|v=0.5|bc=grey|some text}}some text
hhorizontal space
0
{{text|h=1|bc=grey|some text}}some text
brborder radius
0
{{text|br=1|bc=grey|v=0.25|h=0.5|some text}}some text
bg1background
start color
start color
transparent
{{text|bg1=lightgreen|some text}}some text
Optional: background color as a CSS color value.
bg2background
stop color
stop color
transparent
{{text|bg2=lightgreen|some text}}some text
Optional: background color as a CSS color value.
bgdbackground
direction
direction
0 (🡆){{text|bgd=80|bg1=lightgrey|some text}}some text
Optional: background direction in degrees.