User:Puxlit/Experiments/BetterCharTemplate

'''NB: This experiment has been implemented. The contents of this page is no longer maintained, and may appear broken.'''

The goal is to replace the existing Template:Char used by gallery templates (transcluded on pages like the List of Characters) with something that requires less manual control over presentation. Currently, we have to manually pack characters into rows and ensure caption heights on each row are (hopefully) consistent across browsers.

Here's an example of such shenanigans.

Markup Rendered

We could accomplish effectively the same design if we switched from nested tables to flex boxes. As an added bonus, these galleries would become responsive.

Markup

(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

Template:Char2 Markup CSS (with styles based on revision 103150 of Template:Char) .chargallery { display: flex; flex-wrap: wrap; justify-content: center; } .chargallery-theme-ua .chargallery-profile { background-color: #910000; border-color: #5f0000; } .chargallery-theme-ph .chargallery-profile { background-color: #d80000; border-color: #c40000; } .chargallery-theme-vl .chargallery-profile { background-color: #141414; border-color: #0d0d0d; } .chargallery-theme-pl .chargallery-profile { background-color: #0044b3; border-color: #0040a9; } .chargallery-theme-in .chargallery-profile { background-color: #2c8a2e; border-color: #29822b; } .chargallery-theme-kb .chargallery-profile { background-color: #8b8b00; border-color: #727200; } .chargallery-theme-sh .chargallery-profile { background-color: #00458b; border-color: #004081; } .chargallery-theme-vg .chargallery-profile { background-color: #778899; border-color: #696969; } .chargallery-theme-ih .chargallery-profile { background-color: #7c073f; border-color: #7c073f; } .chargallery-profile { border: 3px solid; font: bold 9pt/1.25em sans-serif; margin: 0 -3px -3px 0; text-align: center; width: 135px; } .chargallery-profile img { background-color: #fff; height: 135px; width: 135px; } .chargallery-profile-caption { font-size: larger; margin: 4pt; } .chargallery-profile-subcaption { font-size: smaller; margin: -1.75pt 4pt 4pt; } .chargallery-profile-caption, .chargallery-profile-caption a, .chargallery-profile-subcaption { color: #fff; } Rendered

(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

NB: Unless those styles have been included, the above demo will pretty plain. To inject those styles temporarily into this page, run the following JS in your browser's console.

(function{const x=document.createElement('style');x.appendChild(document.createTextNode('.chargallery{display:flex;flex-wrap:wrap;justify-content:center}.chargallery-theme-ua .chargallery-profile{background-color:#910000;border-color:#5f0000}.chargallery-theme-ph .chargallery-profile{background-color:#d80000;border-color:#c40000}.chargallery-theme-vl .chargallery-profile{background-color:#141414;border-color:#0d0d0d}.chargallery-theme-pl .chargallery-profile{background-color:#0044b3;border-color:#0040a9}.chargallery-theme-in .chargallery-profile{background-color:#2c8a2e;border-color:#29822b}.chargallery-theme-kb .chargallery-profile{background-color:#8b8b00;border-color:#727200}.chargallery-theme-sh .chargallery-profile{background-color:#00458b;border-color:#004081}.chargallery-theme-vg .chargallery-profile{background-color:#778899;border-color:#696969}.chargallery-theme-ih .chargallery-profile{background-color:#7c073f;border-color:#7c073f}.chargallery-profile{border:3px solid;font:bold 9pt/1.25em sans-serif;margin:0 -3px -3px 0;text-align:center;width:135px}.chargallery-profile img{background-color:#fff;height:135px;width:135px}.chargallery-profile-caption{font-size:larger;margin:4pt}.chargallery-profile-subcaption{font-size:smaller;margin:-1.75pt 4pt 4pt}.chargallery-profile-caption,.chargallery-profile-caption a,.chargallery-profile-subcaption{color:#fff}'));document.head.appendChild(x)});

Alternatively, per Speedit's suggestion, we could use galleries, like.

Markup ╰(•̀ 3 •́)━☆ﾟ.*･｡ﾟ Template:Chars2 Markup  Template:Char2 Markup CSS (with styles based on revision 103150 of Template:Char) .chargallery2 .wikia-gallery { display: flex; flex-wrap: wrap; justify-content: center; } .chargallery2.chargallery2-theme-ua .wikia-gallery-item { background-color: #910000; border-color: #5f0000; } .chargallery2.chargallery2-theme-ph .wikia-gallery-item { background-color: #d80000; border-color: #c40000; } .chargallery2.chargallery2-theme-vl .wikia-gallery-item { background-color: #141414; border-color: #0d0d0d; } .chargallery2.chargallery2-theme-pl .wikia-gallery-item { background-color: #0044b3; border-color: #0040a9; } .chargallery2.chargallery2-theme-in .wikia-gallery-item { background-color: #2c8a2e; border-color: #29822b; } .chargallery2.chargallery2-theme-kb .wikia-gallery-item { background-color: #8b8b00; border-color: #727200; } .chargallery2.chargallery2-theme-sh .wikia-gallery-item { background-color: #00458b; border-color: #004081; } .chargallery2.chargallery2-theme-vg .wikia-gallery-item { background-color: #778899; border-color: #696969; } .chargallery2.chargallery2-theme-ih .wikia-gallery-item { background-color: #7c073f; border-color: #7c073f; } .chargallery2 .wikia-gallery-item { border: 3px solid; margin: 0 -3px -3px 0; padding: 0; } .chargallery2 .wikia-gallery-item img { background-color: #fff; margin-top: 0 !important; } .chargallery2 .wikia-gallery-item .lightbox-caption { box-sizing: border-box; font: bold 9pt/1.25em sans-serif; margin: 0; padding: 4pt; } .chargallery2-profile-caption { font-size: larger; } .chargallery2-profile-subcaption { font-size: smaller; } .chargallery2-profile-caption, .chargallery2-profile-caption a, .chargallery2-profile-subcaption { color: #fff; } Rendered

╰(•̀ 3 •́)━☆ﾟ.*･｡ﾟ

NB: Unless those styles have been included, the above demo will pretty plain. To inject those styles temporarily into this page, run the following JS in your browser's console.

(function{const x=document.createElement('style');x.appendChild(document.createTextNode('.chargallery2 .wikia-gallery{display:flex;flex-wrap:wrap;justify-content:center}.chargallery2.chargallery2-theme-ua .wikia-gallery-item{background-color:#910000;border-color:#5f0000}.chargallery2.chargallery2-theme-ph .wikia-gallery-item{background-color:#d80000;border-color:#c40000}.chargallery2.chargallery2-theme-vl .wikia-gallery-item{background-color:#141414;border-color:#0d0d0d}.chargallery2.chargallery2-theme-pl .wikia-gallery-item{background-color:#0044b3;border-color:#0040a9}.chargallery2.chargallery2-theme-in .wikia-gallery-item{background-color:#2c8a2e;border-color:#29822b}.chargallery2.chargallery2-theme-kb .wikia-gallery-item{background-color:#8b8b00;border-color:#727200}.chargallery2.chargallery2-theme-sh .wikia-gallery-item{background-color:#00458b;border-color:#004081}.chargallery2.chargallery2-theme-vg .wikia-gallery-item{background-color:#778899;border-color:#696969}.chargallery2.chargallery2-theme-ih .wikia-gallery-item{background-color:#7c073f;border-color:#7c073f}.chargallery2 .wikia-gallery-item{border:3px solid;margin:0 -3px -3px 0;padding:0}.chargallery2 .wikia-gallery-item img{background-color:#fff;margin-top:0 !important}.chargallery2 .wikia-gallery-item .lightbox-caption{box-sizing:border-box;font:bold 9pt/1.25em sans-serif;margin:0;padding:4pt}.chargallery2-profile-caption{font-size:larger}.chargallery2-profile-subcaption{font-size:smaller}.chargallery2-profile-caption,.chargallery2-profile-caption a,.chargallery2-profile-subcaption{color:#fff}'));document.head.appendChild(x)});