Revision as of 16:46, 27 March 2025

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

Expand

difficult to read, too many unnecessary elements, outdated css

<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, better css, 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

Differneces

Expand

difficult to read, too many unnecessary elements, outdated css

<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px;  ">
    <table class="gadget-appearances-table" style="border: 1px dotted #FF9900;">
        <tbody>
            <tr>
                <th style="background: #FF9900; color: #ffffff; text-align: left; padding-left: 5px;">Gadgets</th>
            </tr>
            <tr>
                <td>
                    <table class="char-appearances-table">
                        <tbody>
                            <tr>
                                <td>
                                    <div style="float:left; font-size: 90%;" class="gadget-image">
                                        <div class="center">
                                            <div class="thumb tnone">
                                                <div class="thumbinner" style="width:102px;">
                                                    <a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">
                                                        <img alt="Voice-Changing Bowtie" src="/wiki/images/8/86/Voice-Changing_Bowtie.jpg" width="100" height="100">
                                                    </a>
                                                    <div class="thumbcaption">
                                                        <a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">Voice-Changing Bowtie</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

less complicated structure, better readability, 66% shorter, better css, achieves same results

<div style="overflow: auto; margin-bottom: 2px;">
    <div style="border: 1px dotted #FF9900; width: max-content;">
        <div style="background: #FF9900; color: #ffffff; padding-left: 5px; font-weight:bold;">Gadgets</div>
        <div syle="display:flex; width: min-content; font-size: 90%; text-align: center;">
            <div style="margin: 5px 3px; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;">
                <a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">
                    <img alt="Voice-Changing Bowtie" src="/wiki/images/8/86/Voice-Changing_Bowtie.jpg" width="100" height="100">
                </a><br>
                <a href="/wiki/Voice-Changing_Bowtie" title="Voice-Changing Bowtie">Voice-Changing Bowtie</a>
            </div>

        </div>
    </div>
</div>

@@ Line 1: / Line 1: @@
-= Template:Char_Appearances & Template:Char =
+= Template:Char Appearances & Template:Char =
 === old ===
 {{User:R0o0di/Sandbox/Old Char Appearances|
@@ Line 25: / Line 25: @@
 === Differneces ===
 <div class="mw-collapsible mw-collapsed">
-<h4>difficult to read, too many unnecessary elements, outdated css</h4>
+<strong>difficult to read, too many unnecessary elements, outdated css</strong>
 <div style="overflow:auto;">
 <pre style="width:max-content">
@@ Line 66: / Line 66: @@
-<h4>less complicated structure, better readability, 66% shorter, better css, achieves same results </h4>
+<strong>less complicated structure, better readability, 66% shorter, better css, achieves same results </strong>
 <div style="overflow:auto;">
 <pre style="width:max-content">
@@ Line 89: / Line 89: @@
-= Template:Gadgets_Appearances & Template:Gadget =
+= Template:Gadgets Appearances & Template:Gadget =
 === old ===
 {{User:R0o0di/Sandbox/Old Gadgets Appearances|
@@ Line 109: / Line 109: @@
 === Differneces ===
 <div class="mw-collapsible mw-collapsed">
-<h4>difficult to read, too many unnecessary elements, outdated css</h4>
+<strong>difficult to read, too many unnecessary elements, outdated css</strong>
 <div style="overflow:auto;">
 <pre style="width:max-content">
@@ Line 151: / Line 151: @@
-<h4>less complicated structure, better readability, 66% shorter, better css, achieves same results </h4>
+<strong>less complicated structure, better readability, 66% shorter, better css, achieves same results </strong>
 <div style="overflow:auto;">
 <pre style="width:max-content">

Difference between revisions of "User:R0o0di/Sandbox"

Revision as of 16:46, 27 March 2025

Contents

Template:Char Appearances & Template:Char

old

new

Differneces

Template:Gadgets Appearances & Template:Gadget

old

new

Differneces

Navigation menu

Views

Personal tools

Navigation

affiliate product

Search

detective conan

general

community

Tools