User:Tiddlywinks/PokemonDivbox: Difference between revisions

← Older edit

User:Tiddlywinks/PokemonDivbox (view source)

Revision as of 01:54, 26 December 2023

4,562 bytes added , 26 December 2023

form framework...

Tiddlywinks

Leadership Board, Administrators

30,490

edits

@@ Line 20: / Line 20: @@
 <div class="roundy" style="background-color: #FFF; grid-column-end: span 2;"><!-- images container OPEN -->
 <!-- tbd: form images/switches? -->
-<div><!-- active image container OPEN -->
+<div style="max-width: 420px; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;"><!-- form selector OPEN -->
-<div>[[File:{{{image|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|250px|{{{form1|{{{name|{{{tmname|}}}}}}}}}]]</div><!-- active image -->
+{{#if: {{{forms|}}}|<div class="roundy clicktoggle clicktoggle-active" data-type="set" data-for="pibox1703553660-{{{name|{{{tmname|}}}}}},form1" style="border: 1px solid white; {{roundy|15px}}" data-active-style="border: 1px outset black;">[[File:{{{image|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|link=|70px|{{{form1|{{{name|{{{tmname|}}}}}}}}}]]</div>
+{{#if: {{{form2|}}}|<div class="roundy clicktoggle" data-type="set" data-for="pibox1703553660-{{{name|{{{tmname|}}}}}},form2" style="border: 1px solid white;" data-active-style="border: 1px outset black; {{roundy|15px}}">[[File:{{{image2|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}-{{{form2|}}}.png}}}|link=|70px|{{{form2|{{{name|{{{tmname|}}}}}}}}}]]</div>
+{{#if: {{{form3|}}}|<div class="roundy clicktoggle" data-type="set" data-for="pibox1703553660-{{{name|{{{tmname|}}}}}},form3" style="border: 1px solid white;" data-active-style="border: 1px outset black; {{roundy|15px}}">[[File:{{{image3|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}-{{{form3|}}}.png}}}|link=|70px|{{{form3|{{{name|{{{tmname|}}}}}}}}}]]</div>
+{{#if: {{{form4|}}}|<div class="roundy clicktoggle" data-type="set" data-for="pibox1703553660-{{{name|{{{tmname|}}}}}},form4" style="border: 1px solid white;" data-active-style="border: 1px outset black; {{roundy|15px}}">[[File:{{{image4|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}-{{{form4|}}}.png}}}|link=|70px|{{{form4|{{{name|{{{tmname|}}}}}}}}}]]</div>
+{{#if: {{{form5|}}}|<div class="roundy clicktoggle" data-type="set" data-for="pibox1703553660-{{{name|{{{tmname|}}}}}},form5" style="border: 1px solid white;" data-active-style="border: 1px outset black; {{roundy|15px}}">[[File:{{{image5|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}-{{{form5|}}}.png}}}|link=|70px|{{{form5|{{{name|{{{tmname|}}}}}}}}}]]</div>
+{{#if: {{{form6|}}}|<div class="roundy clicktoggle" data-type="set" data-for="pibox1703553660-{{{name|{{{tmname|}}}}}},form6" style="border: 1px solid white;" data-active-style="border: 1px outset black; {{roundy|15px}}">[[File:{{{image6|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}-{{{form6|}}}.png}}}|link=|70px|{{{form6|{{{name|{{{tmname|}}}}}}}}}]]</div>}}}}}}}}}}}}
+</div><!-- form selector CLOSE -->
+<div><!-- big image container OPEN -->
+<div class="clicktoggle-target" data-group="pibox1703553660-{{{name|{{{tmname|}}}}}}" data-target="form1"><!-- form1 OPEN -->
+<div>[[File:{{{image|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|250px|{{{form1|{{{name|{{{tmname|}}}}}}}}}]]</div><!-- image -->
 <div style="font-size: smaller;">{{{form1|{{{name|{{{tmname|}}}}}}}}}</div><!-- name/form -->
-</div><!-- active image container CLOSE -->
+</div><!-- form1 CLOSE -->
+{{#if: {{{form2|}}}|<div class="clicktoggle-target" data-group="pibox1703553660-{{{name|{{{tmname|}}}}}}" data-target="form2" style="display: none;"><!-- form2 OPEN -->
+<div>[[File:{{{image2|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|250px|{{{form2|{{{name|{{{tmname|}}}}}}}}}]]</div><!-- image -->
+<div style="font-size: smaller;">{{{form2|{{{name|{{{tmname|}}}}}}}}}</div><!-- name/form -->
+</div><!-- form2 CLOSE -->
+{{#if: {{{form3|}}}|<div class="clicktoggle-target" data-group="pibox1703553660-{{{name|{{{tmname|}}}}}}" data-target="form3" style="display: none;"><!-- form3 OPEN -->
+<div>[[File:{{{image3|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|250px|{{{form3|{{{name|{{{tmname|}}}}}}}}}]]</div><!-- image -->
+<div style="font-size: smaller;">{{{form3|{{{name|{{{tmname|}}}}}}}}}</div><!-- name/form -->
+</div><!-- form3 CLOSE -->
+{{#if: {{{form4|}}}|<div class="clicktoggle-target" data-group="pibox1703553660-{{{name|{{{tmname|}}}}}}" data-target="form4" style="display: none;"><!-- form4 OPEN -->
+<div>[[File:{{{image4|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|250px|{{{form4|{{{name|{{{tmname|}}}}}}}}}]]</div><!-- image -->
+<div style="font-size: smaller;">{{{form4|{{{name|{{{tmname|}}}}}}}}}</div><!-- name/form -->
+</div><!-- form4 CLOSE -->
+{{#if: {{{form5|}}}|<div class="clicktoggle-target" data-group="pibox1703553660-{{{name|{{{tmname|}}}}}}" data-target="form5" style="display: none;"><!-- form5 OPEN -->
+<div>[[File:{{{image5|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|250px|{{{form5|{{{name|{{{tmname|}}}}}}}}}]]</div><!-- image -->
+<div style="font-size: smaller;">{{{form5|{{{name|{{{tmname|}}}}}}}}}</div><!-- name/form -->
+</div><!-- form5 CLOSE -->
+{{#if: {{{form6|}}}|<div class="clicktoggle-target" data-group="pibox1703553660-{{{name|{{{tmname|}}}}}}" data-target="form6" style="display: none;"><!-- form6 OPEN -->
+<div>[[File:{{{image6|{{{ndex|000}}}{{{name|{{{tmname|}}}}}}.png}}}|250px|{{{form6|{{{name|{{{tmname|}}}}}}}}}]]</div><!-- image -->
+<div style="font-size: smaller;">{{{form6|{{{name|{{{tmname|}}}}}}}}}</div><!-- name/form -->
+</div><!-- form6 CLOSE -->}}}}}}}}}}
+</div><!-- big image container CLOSE -->
 <div>[[a:Category:{{{name|{{{tmname|Bulbasaur}}}}}}|Images on the Bulbagarden Archives]]</div><!-- Archives link -->
 </div><!-- images container CLOSE -->