This is a documentation for Board Game Arena: play board games online !

Template:Cardholder: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
m (padding:0.5rem 0.5rem 1.1rem;)
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="position:relative;display:grid;grid:repeat(3,auto) / repeat(5,auto);gap:0rem {{{gap|2}}}px;background:{{{background|#fff0}}};border-radius:{{{corner|0.2}}}rem {{{corner|0.2}}}rem 0 0;padding:0.5rem 0.5rem 1.1rem;line-height:0.1;width:max-content;align-items:end;">
<onlyinclude><span style="display:inline-flex;flex-direction:column;"><span style="display:flex;justify-content:space-evenly;gap:0 {{{g|2}}}px;margin:0 4px;white-space:nowrap">{{{1|}}}</span><span style="position:relative;top:-4px;z-index:2;font:500 14px/1.4 Roboto;padding:0 4px;border-radius:4px 4px 1px 1px;background:{{{b|#000}}};color:{{{3|#fff}}}">{{{2|&#8203;}}}</span></span></onlyinclude>
<div style="background:{{{clue1Colour|#fff0}}};margin-left:5%;padding-left:10%;height:1.4rem;width:75%;border-radius:{{{corner|0.2}}}rem {{{corner|0.2}}}rem 0 0;color:{{{colour|#000}}};font-size:calc({{{size|2}}}rem - 0.75rem);line-height:1.2;">{{{clue1|}}}</div>
<div style="background:{{{clue2Colour|#fff0}}};margin-left:5%;padding-left:10%;height:1.4rem;width:75%;border-radius:{{{corner|0.2}}}rem {{{corner|0.2}}}rem 0 0;color:{{{colour|#000}}};font-size:calc({{{size|2}}}rem - 0.75rem);line-height:1.2;">{{{clue2|}}}</div>
<div style="background:{{{clue3Colour|#fff0}}};margin-left:5%;padding-left:10%;height:1.4rem;width:75%;border-radius:{{{corner|0.2}}}rem {{{corner|0.2}}}rem 0 0;color:{{{colour|#000}}};font-size:calc({{{size|2}}}rem - 0.75rem);line-height:1.2;">{{{clue3|}}}</div>
<div style="background:{{{clue4Colour|#fff0}}};margin-left:5%;padding-left:10%;height:1.4rem;width:75%;border-radius:{{{corner|0.2}}}rem {{{corner|0.2}}}rem 0 0;color:{{{colour|#000}}};font-size:calc({{{size|2}}}rem - 0.75rem);line-height:1.2;">{{{clue4|}}}</div>
<div style="background:{{{clue5Colour|#fff0}}};margin-left:5%;padding-left:10%;height:1.4rem;width:75%;border-radius:{{{corner|0.2}}}rem {{{corner|0.2}}}rem 0 0;color:{{{colour|#000}}};font-size:calc({{{size|2}}}rem - 0.75rem);line-height:1.2;">{{{clue5|}}}</div>
<div>{{card|={{{card1|&nbsp;&nbsp;}}}|background={{{card1Background|{{{cardBackground|#fafafa}}}}}}|colour={{{card1Colour|#000}}}|size={{{size|2}}}}}</div>
<div>{{card|={{{card2|&nbsp;&nbsp;}}}|background={{{card2Background|{{{cardBackground|#fafafa}}}}}}|colour={{{card2Colour|#000}}}|size={{{size|2}}}}}</div>
<div>{{card|={{{card3|&nbsp;&nbsp;}}}|background={{{card3Background|{{{cardBackground|#fafafa}}}}}}|colour={{{card3Colour|#000}}}|size={{{size|2}}}}}</div>
<div>{{card|={{{card4|&nbsp;&nbsp;}}}|background={{{card4Background|{{{cardBackground|#fafafa}}}}}}|colour={{{card4Colour|#000}}}|size={{{size|2}}}}}</div>
<div>{{card|={{{card5|&nbsp;&nbsp;}}}|background={{{card5Background|{{{cardBackground|#fafafa}}}}}}|colour={{{card5Colour|#000}}}|size={{{size|2}}}}}</div>
<div style="position:absolute;grid-row-start:-1;top:-0.2rem;background:#000;color:{{{colour|#fff}}};font-size:{{{size|1}}}rem;width:calc(100% - 0.8rem);height:25%;padding:0.5rem;border-radius:0.2rem 0.2rem 0 0;">{{{player|A}}} {{{arrow|🡲}}}</div></div><noinclude>
[[Category:Card templates]]


== Available parameters ==
== Parameters ==
<div style="display:grid;grid-template-columns:repeat(5,max-content) 1fr;gap:0.5rem;overflow:auto;text-overflow:ellipsis;">
  <div>{{text|w=bold|Id}}</div>
  <div>{{text|w=bold|Name}}</div>
  <div>{{text|w=bold|Default}}</div>
  <div>{{text|w=bold|Example}}</div>
  <div>{{text|w=bold|Result}}</div>
  <div>{{text|w=bold|Description}}</div>
  <div>1</div>
  <div>Cards</div>
  <div>empty</div>
  <div>{{code|<nowiki>{{cardholder|</nowiki>{{text|<nowiki>{{diamond|A}}</nowiki>|#fdd}}{{text|<nowiki>{{club|A}}</nowiki>|#ddd}}{{text|<nowiki>{{heart|A}}</nowiki>|#fdd}}{{text|<nowiki>{{spade|A}}</nowiki>|#ddd}}&nbsp;<nowiki>}}</nowiki>}}</div>
  <div>{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}} }}</div>
  <div>'''''Required''''': insert any number of cards.</div>
  <div>2</div>
  <div>Text</div>
  <div>empty</div>
  <div>{{code|<nowiki>{{cardholder|</nowiki>{{text|<nowiki>{{diamond|A}}</nowiki>|#fee}}{{text|<nowiki>{{club|A}}</nowiki>|#eee}}{{text|<nowiki>{{heart|A}}</nowiki>|#fee}}{{text|<nowiki>{{spade|A}}</nowiki>|#eee}}<br>{{text|<nowiki>|Alice</nowiki>|#dfd}}<nowiki>}}</nowiki>}}</div>
  <div>{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}} |Alice}}</div>
  <div>'''''Optional''''': label text.</div>
  <div>3</div>
  <div>Text color</div>
  <div>white</div>
  <div>{{code|<nowiki>{{cardholder|</nowiki>{{text|<nowiki>{{diamond|A}}</nowiki>|#fee}}{{text|<nowiki>{{club|A}}</nowiki>|#eee}}{{text|<nowiki>{{heart|A}}</nowiki>|#fee}}{{text|<nowiki>{{spade|A}}</nowiki>|#eee}}<br><nowiki>|Alice</nowiki>{{text|<nowiki>|lightgreen</nowiki>|#dfd}}<nowiki>}}</nowiki>}}</div>
  <div>{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}} |Alice|lightgreen}}</div>
  <div>'''''Optional''''': label text color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color].</div>
  <div>{{code|b}}</div>
  <div>Background</div>
  <div>black</div>
  <div>{{code|<nowiki>{{cardholder|</nowiki>{{text|<nowiki>{{diamond|A}}</nowiki>|#fee}}{{text|<nowiki>{{club|A}}</nowiki>|#eee}}{{text|<nowiki>{{heart|A}}</nowiki>|#fee}}{{text|<nowiki>{{spade|A}}</nowiki>|#eee}}<br><nowiki>|Alice</nowiki>{{text|<nowiki>|b=green</nowiki>|#dfd}}<nowiki>}}</nowiki>}}</div>
  <div>{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}} |Alice|b=green}}</div>
  <div>'''''Optional''''': label background color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color].</div>
  <div>{{code|g}}</div>
  <div>Gap</div>
  <div>{{code|2}}</div>
  <div>{{code|<nowiki>{{cardholder|</nowiki>{{text|<nowiki>{{diamond|A}}</nowiki>|#fee}}{{text|<nowiki>{{club|A}}</nowiki>|#eee}}{{text|<nowiki>{{heart|A}}</nowiki>|#fee}}{{text|<nowiki>{{spade|A}}</nowiki>|#eee}}<br>{{text|<nowiki>|g=8</nowiki>|#dfd}}<nowiki>}}</nowiki>}}</div>
  <div>{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}} |g=8}}</div>
  <div>'''''Optional''''': gap between cards in [https://developer.mozilla.org/en-US/docs/Web/CSS/length#px pixels].</div>
</div>
<noinclude>
== [[:Category:Card_templates]] ==
{{Category:Card_templates}}


{|class="wikitable" style="text-align:left;"
== Pages using {{FULLPAGENAME}} ==
!Parameter
{{Special:WhatLinksHere/{{FULLPAGENAME}}}}
!Default value
</noinclude>
!Example
!Result
!Description
|-
|<code>card#</code>
|<code>&amp;nbsp;&amp;nbsp;</code>
(two non-breaking spaces)
|<code><nowiki>{{cardholder |card1=1}}</nowiki></code>
|{{cardholder |card1=1}}<br>
|'''''Optional''''': specify cards as text where <code>#</code> is the card number from left to right.
|-
|<code>card#Colour</code>
|<code>#000</code>
(black)
|<code><nowiki>{{cardholder |card1=1 |card1Colour=green}}</nowiki></code>
|{{cardholder |card1=1 |card1Colour=green}}<br>
|'''''Optional''''': specify card colours as [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colours] where <code>#</code> is the card number from left to right.
|-
|<code>cardBackground</code>
|<code>#fafafa</code>
(almost white)
|<code><nowiki>{{cardholder |cardBackground=green}}</nowiki></code>
|{{cardholder |cardBackground=green}}<br>
|'''''Optional''''': specify all card background colours as [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colours].
|-
|<code>card#Background</code>
|<code>#fafafa</code>
(almost white)
|<code><nowiki>{{cardholder |card1Background=green}}</nowiki></code>
|{{cardholder |card1Background=green}}<br>
|'''''Optional''''': specify a card background colours as [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colours] where <code>#</code> is the card number from left to right. This overrides the <code>cardBackground</code> parameter.
|-
|<code>clue#</code>
|<code>null</code>
|<code><nowiki>{{cardholder |clue1=1}}</nowiki></code>
|{{cardholder |clue1=1}}<br>
|'''''Optional''''': specify clues as text where <code>#</code> is the card number from left to right.
|-
|<code>clue#Colour</code>
|<code>#fff0</code>
(transparent)
|<code><nowiki>  {{cardholder |clue1Colour=green}}</nowiki></code>
|  {{cardholder |clue1Colour=green}}<br>
|'''''Optional''''': specify clue colours as [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colours] where <code>#</code> is the card number from left to right.
|-
|<code>gap</code>
|<code>2</code>
|<code><nowiki>{{cardholder |gap=8}}</nowiki></code>
|{{cardholder |gap=8}}<br>
|'''''Optional''''': specify the gap between cards in px units.
|-
|<code>background#</code>
|<code>#fff0</code>
(transparent)
|<code><nowiki>{{cardholder |background=green}}</nowiki></code>
|{{cardholder |background=green}}<br>
|'''''Optional''''': specify the background colour as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour].
|-
|<code>player</code>
|<code>A</code>
|<code><nowiki>{{cardholder |player=Alice}}</nowiki></code>
|{{cardholder |player=Alice}}<br>
|'''''Optional''''': specify the player name as text.
|-
|<code>arrow</code>
|<code>🡲</code>
|<code><nowiki>{{cardholder |arrow=}}</nowiki></code>
|{{cardholder |arrow=}}<br>
|'''''Optional''''': hide the arrow or use another symbol.
|}


== Examples ==
[[Category:Card templates]]
 
=== [[Gamehelphanabi|Hanabi]] ===
<div style="display:flex;flex-wrap:wrap;"><div>
{{cardholder4 |player=Alice
|card1=1 |card1Colour={{r}} |clue1=1 |clue1Colour={{r}}
|card2=2 |card2Colour={{y}} |clue2=2 |clue2Colour={{y}}
|card3=3 |card3Colour={{g}} |clue3=3 |clue3Colour={{g}}
|card4=4 |card4Colour={{b}} |clue4=4 |clue4Colour={{b}}
}}
<pre>
{{cardholder4 |player=Alice
|card1=1 |card1Colour={{r}} |clue1=1 |clue1Colour={{r}}
|card2=2 |card2Colour={{y}} |clue2=2 |clue2Colour={{y}}
|card3=3 |card3Colour={{g}} |clue3=3 |clue3Colour={{g}}
|card4=4 |card4Colour={{b}} |clue4=4 |clue4Colour={{b}}
}}
</pre>
</div><div>
{{cardholder |cardBackground=#324 |player=Alice
|card1=1 |card1Colour={{r}} |clue1=1 |clue1Colour={{r}}
|card2=2 |card2Colour={{y}} |clue2=2 |clue2Colour={{y}}
|card3=3 |card3Colour={{g}} |clue3=3 |clue3Colour={{g}}
|card4=4 |card4Colour={{b}} |clue4=4 |clue4Colour={{b}}
|card5=5 |card5Colour={{w}} |clue5=5 |clue5Colour={{w}}
 
}}
<pre>
{{cardholder |cardBackground=#324 |player=Alice
|card1=1 |card1Colour={{r}} |clue1=1 |clue1Colour={{r}}
|card2=2 |card2Colour={{y}} |clue2=2 |clue2Colour={{y}}
|card3=3 |card3Colour={{g}} |clue3=3 |clue3Colour={{g}}
|card4=4 |card4Colour={{b}} |clue4=4 |clue4Colour={{b}}
|card5=5 |card5Colour={{w}} |clue5=5 |clue5Colour={{w}}
}}
</pre>
</div></div>
</noinclude>

Latest revision as of 17:19, 1 August 2025

Parameters

Id
Name
Default
Example
Result
Description
1
Cards
empty
{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}} }}
A♦A♣A♥A♠
Required: insert any number of cards.
2
Text
empty
{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}}
|Alice}}
A♦A♣A♥A♠ Alice
Optional: label text.
3
Text color
white
{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}}
|Alice|lightgreen}}
A♦A♣A♥A♠ Alice
Optional: label text color as a CSS color.
b
Background
black
{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}}
|Alice|b=green}}
A♦A♣A♥A♠ Alice
Optional: label background color as a CSS color.
g
Gap
2
{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}}
|g=8}}
A♦A♣A♥A♠
Optional: gap between cards in pixels.

Category:Card_templates

green5,with a green5clue,

Cards

Template:Card
WikiText Result
{{card|A}} A
{{club|K}} K♣
{{spade|Q}} Q♠
{{heart|J}} J♥
{{diamond|10}} 10♦
{{cardBack}} 🟔
{{club|color=green}} ​♣
Template:Cardholder
WikiText Result
{{cardholder|{{diamond|A}}{{club|A}}{{heart|A}}{{spade|A}} |Alice}} A♦A♣A♥A♠ Alice

Pages using Template:Cardholder