User:R0o0di/Sandbox

Template:Char_Appearances & Template:Char

old

Characters
Conan Edogawa Ran Mouri Kogoro Mouri Eri Kisaki (background) Heiji Hattori Hiroshi Agasa Ai Haibara Kazuha Toyama (background)

new

Characters

Conan Edogawa

Ran Mouri

Kogoro Mouri

Eri Kisaki (background)

Heiji Hattori

Hiroshi Agasa

Ai Haibara

Kazuha Toyama (background)

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>

Template:Gadgets_Appearances & Template:Gadget

old

Gadgets
Voice-Changing Bowtie Power-Enhancing Kick Shoes Stun-Gun Wristwatch Detective Boys Badge Turbo Engine Skateboard

new

Gadgets

Voice-Changing Bowtie

Power-Enhancing Kick Shoes

Stun-Gun Wristwatch

Detective Boys Badge

Turbo Engine Skateboard