User:R0o0di/Sandbox: Difference between revisions
No edit summary |
|||
| Line 1: | Line 1: | ||
== old== | == Template:Char_Appearances & Template:Char == | ||
<div class="mw-collapsible mw-collapsed"> | |||
=== old === | |||
{{Char Appearances| | {{Char Appearances| | ||
{{char|Conan Edogawa}} | {{char|Conan Edogawa}} | ||
| Line 11: | Line 14: | ||
}} | }} | ||
== new == | === new === | ||
{{User:R0o0di/Sandbox/CharAppearances2| | {{User:R0o0di/Sandbox/CharAppearances2| | ||
{{User:R0o0di/Sandbox/Char2|Conan Edogawa}} | {{User:R0o0di/Sandbox/Char2|Conan Edogawa}} | ||
| Line 23: | Line 26: | ||
}} | }} | ||
== Differneces == | === Differneces === | ||
<h4>difficult to read, too many unnecessary elements, outdated styles</h4> | <h4>difficult to read, too many unnecessary elements, outdated styles</h4> | ||
<div style="overflow:auto;"> | <div style="overflow:auto;"> | ||
| Line 80: | Line 83: | ||
</div> | </div> | ||
</pre> | </pre> | ||
</div> | |||
</div> | </div> | ||
Revision as of 14:02, 27 March 2025
Template:Char_Appearances & Template:Char
old
new
Differneces
difficult to read, too many unnecessary elements, outdated styles
<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px; ">
<table class="char-appearances-table" style="border: 1px dotted #7BA1EC;">
<tbody>
<tr>
<th style="background: #7BA1EC; color: #ffffff; text-align: left; padding-left: 5px;">Characters</th>
</tr>
<tr>
<td>
<table class="char-appearances-table">
<tbody>
<tr>
<td>
<div style="float:left; font-size: 90%;" class="char-image">
<div class="center">
<div class="thumb tnone">
<div class="thumbinner" style="width:102px;">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">
<img alt="Conan Edogawa"src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a>
<div class="thumbcaption">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
less complicated structure, better readability, 66% shorter, more modern styles, achieves same results
<div style="overflow: auto; margin-bottom: 2px;">
<div style="border: 1px dotted #7BA1EC; width: max-content;">
<div style="background: #7BA1EC; color: #ffffff; padding-left: 5px; font-weight:bold;">Characters</div>
<div style="display:flex; overflow: auto; width: min-content; font-size: 90%; text-align: center;">
<div style="margin: 5px 3px; background: #6969fa7a; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa"><img alt="Conan Edogawa" src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a><br>
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
</div>
</div>
</div>
</div>