FANDOM

A FANDOM user
  Loading editor
  • Hey! I noticed something about the characters' infobox on Welcome To Japan, Ms. Elf! Wiki, and I hope you don't mind me pointing it out. :)

    The infoboxes use tabber for image in a data tag instead of image tag, in order to accommodate the nested tabs. However, while nesting tabs with image wasn't possible for a long time, this flexibility has been possible thanks to panels since quite a while. I'd recommend using that way, as that's a portable-friendly and preferable method.

    You'll have to do following to implement that:

    #1. Add this to the Infobox Character:
    <panel>
      <section>
        <label>{{{tab1}}}</label>
        <image source="file1"><default>{{#tag:gallery|
    {{{file1a}}}{{!}}{{{subtab1a}}}
    {{{file1b}}}{{!}}{{{subtab1b}}}
    }}</default></image>
      </section>
      <section>
        <label>{{{tab2}}}</label>
        <image source="file2"><default>{{#tag:gallery|
    {{{file2a}}}{{!}}{{{subtab2a}}}
    {{{file2b}}}{{!}}{{{subtab2b}}}
    }}</default></image>
      </section>
      <section>
        <label>{{{tab3}}}</label>
        <image source="file3"><default>{{#tag:gallery|
    {{{file3a}}}{{!}}{{{subtab3a}}}
    {{{file3b}}}{{!}}{{{subtab3b}}}
    }}</default></image>
      </section>
    </panel>
    #2. Add this to the Wikia.css:
    .portable-infobox .pi-image-collection-tabs {
      text-align: center;
    }
    .portable-infobox .pi-section-navigation .pi-section-label,
    .portable-infobox .pi-image-collection-tabs li {
      margin: 1px;
      border-radius: 0 0 7px 7px;
      border: 1px solid #a9ff78;
      height: auto;
      padding: 2px 6px;
      background: linear-gradient(#e4f5da, #fffbc3);
      color: #000;
      font-family: 'Mitr', sans-serif;
      font-size: 12px;
      font-weight: normal;
      text-transform: none;
    }
    .portable-infobox .pi-image-collection-tabs .current,
    .portable-infobox .pi-image-collection-tabs li:hover,
    .portable-infobox .pi-section-navigation .pi-section-active .pi-section-label,
    .portable-infobox .pi-section-navigation .pi-section-label:hover {
      background: linear-gradient(#e4f5da, #fff677);
      color: #fff;
      font-weight: bold;
      text-shadow: #62e317 0 0 7px;
      transition: all 0.3s linear 0s;
    }
    .portable-infobox .pi-section-navigation .pi-section-active {
      box-shadow: none;
    }

    The functionality and visuals will remain about the same. You can use it fairly similarly to the current format:
    {{Infobox Character
    |tab1 = Light Novel
    |subtab1a = Reality
    |file1a = Kazuhiho-00.jpg
    |subtab1b = Dream
    |file1b = Kazuhiho-01.jpg
    |tab2 = Manga
    |subtab2a = Reality
    |file2a = Kazuhiho-00 MG.png
    |subtab2b = Dream
    |file2b = Kazuhiho-01 MG.png
    }}
      Loading editor
  • Hi, welcome to Community Central and thanks for your edit!

    If you need help, feel free to leave me a message. You may also want to visit the forums. You can also check the staff blog to keep up-to-date with the latest news and events around Fandom.

    Happy editing!

      Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.