FANDOM


  • Hello everyone!

    So I started my own wikia, which can be found here: http://eurion.wikia.com/wiki/Eurion_Wiki

    Off course I am still adding new templates to make it pretier and such but one of the templates that I can't seem to get correctly into my wikia are collapsible lists.

    The thing I am aiming for, and I'm thinking it is that thing you are talking about with the lua modules.https://en.wikipedia.org/wiki/War_in_Afghanistan_(2001%E2%80%93present) The Continued list inside the infobox for example where you click show and it pops open.

    I have seen these style of lists on other wikias so i know it can be done in wikia as well. I have tried a lot of tutorials, adding stuff to my .css (I think it is called this way), added a lot of templates which I have already deleted again.

    So is there anyone who can give me an explanation and the codes to add to make this work?

    Thanks in advance!

      Loading editor
    • You can make a list collapsible by wrapping it in <div class="mw-collapsible mw-collapsed"></div>. For example,
      <div class="mw-collapsible mw-collapsed">
      * List item one
      * List item two
      * List item three
      </div>
      would generate
      • List item one
      • List item two
      • List item three

      Is that something like what you need?

        Loading editor
    • More details at Help:Collapsing.

        Loading editor
    • If you were trying to collapse the lists at c:eurion:First_Age, I went ahead and did it for you. Feel free to remove that if it's not what you intended.

        Loading editor
    • Thanks all for the answers but unfortunately I'm still having problems.

      When wrapping it in "
      " I get this: https://i.gyazo.com/cf694867506f202fe7a872bfd277ce46.png


      And this is what I need: https://i.gyazo.com/fde50af6b23399380f4d973b8fe44d00.png

      Upon clicking show that a text or a list or whatever pops open.

        Loading editor
    • Can you link to the template and test page? It should be working.

      • Line 1
      • Line 2

      Also, use nowiki tags when attempting to display HTML/MediaWiki markup.

        Loading editor
    • I just found out why it didn't work. When pressing preview I just got a box with the text that was supposed to be inside the collapsible box but when saved the expand button appears and I can expand my lists ^.^

      But now I have another quick question: is it possible to get rid of the box as you can see here: https://gyazo.com/2740e23f74ddabc29525cf51260279fc

      and get something more similar to this: https://i.gyazo.com/fde50af6b23399380f4d973b8fe44d00.png

        Loading editor
    • Portable Infobox have a collapse function you might want to use

      <infobox theme="conflict">
        <title source="title1">
          <default>{{PAGENAME}}</default>
        </title>
        <image source="image1">
          <caption source="caption1"/></image>
        <data source="date">
          <label>Date</label></data>
        <data source="location">
          <label>Location</label></data>
        <data source="result">
          <label>Result</label></data>
      
      <group>
      <header>Belligerents</header>
        <group collapse="closed">
           <header>Belligerent A</header>
           <data source="belligerent_a"></data>
        </group>
        <group collapse="closed">
           <header>Belligerent B</header>
           <data source="belligerent_b"></data>
        </group>
        <group collapse="closed">
           <header>Belligerent C</header>
           <data source="belligerent_c"></data>
        </group>
      </group>
      
        <group>
          <header>Casualties and losses</header>
          <data source="military_lives">
            <label>Military lives</label></data>
          <data source="civilian_lives">
            <label>Civilian lives</label></data>
          <data source="materialistic_damage">
            <label>Materialistic damage</label>
          </data>
        </group>
      </infobox>
      


      If you want to flip the dark blue collapse to light blue, add this in w:c:eurion:MediaWiki:Common.css

      .portable-infobox.pi-theme-conflict .pi-collapse .pi-header { background-color: #e6ebee; color:#3a3a3a; font-size: 12px; }
      .portable-infobox.pi-theme-conflict .pi-collapse .pi-header::after { border-color:#3a3a3a; }
      


      Eurion
        Loading editor
    • Yes, you can get rid of the box. But to do that, you need to use CSS. To help you with that, I would need to be able to inspect the test page.

        Loading editor
    • Is this what you need?

      http://eurion.wikia.com/wiki/TEST

        Loading editor
    • You are getting the box because of this section in your wiki's CSS. It looks like this is from something else that got copied/adapted from another wiki. Note that other aspect besides the box are also affected.

      /* Standard Navigationsleisten, aka box hiding thingy
         from .de.  Documentation at [[Wikipedia:NavFrame]]. */
      div.mw-collapsible,
      div.NavFrame {
          margin: 0;
          padding: 4px;
          border: 1px solid #aaa;
          text-align: center;
          border-collapse: collapse;
          font-size: 95%;
      }
      div.mw-collapsible + div.mw-collapsible,
      div.NavFrame + div.NavFrame {
          border-top-style: none;
          border-top-style: hidden;
      }
      div.NavPic {
          background-color: #fff;
          margin: 0;
          padding: 2px;
          /* @noflip */
          float: left;
      }
      div.mw-collapsible div.NavHead,
      div.NavFrame div.NavHead {
          height: 1.6em;
          font-weight: bold;
          background-color: #ccf;
          position: relative;
      }
      div.mw-collapsible p,
      div.mw-collapsible div.NavContent,
      div.mw-collapsible div.NavContent p,
      div.NavFrame p,
      div.NavFrame div.NavContent,
      div.NavFrame div.NavContent p {
          font-size: 100%;
      }
      div.NavEnd {
          margin: 0;
          padding: 0;
          line-height: 1px;
          clear: both;
      }
      a.NavToggle {
          position: absolute;
          top: 0;
          /* @noflip */
          right: 3px;
          font-weight: normal;
          font-size: 90%;
      }

      The particular rules you need to be concerned about are the following.

      div.mw-collapsible,
      div.NavFrame {
          margin: 0;
          padding: 4px;
          border: 1px solid #aaa;
          text-align: center;
          border-collapse: collapse;
          font-size: 95%;
      }
      div.mw-collapsible + div.mw-collapsible,
      div.NavFrame + div.NavFrame {
          border-top-style: none;
          border-top-style: hidden;
      }
      div.mw-collapsible p,
      div.mw-collapsible div.NavContent,
      div.mw-collapsible div.NavContent p,
      div.NavFrame p,
      div.NavFrame div.NavContent,
      div.NavFrame div.NavContent p {
          font-size: 100%;
      }

      In order to fix this, you will need to use an additional class in your collapsible lists. For example:

      <div class="mw-collapsible mw-collapsed collapsible-list">
      </div>
      

      Then, in your wiki's CSS:

      div.mw-collapsible.collapsible-list {
      desired css if any
      }
      div.mw-collapsible + div.mw-collapsible.collapsible-list {
      desired css if any
      }
      div.mw-collapsible.collapsible-list p {
      desired css if any
      }
        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