FANDOM


  • We have an older infobox on our wiki (Conflict Infobox that I would like to remake as a portable version. However, this infobox can have between 1 and 4 columns within parts of it (e.g.: 2 columns, 3 columns) and if I can avoid it, I don't want to have to build separate versions of the same infobox with different columns built in.

    Firstly, can portable inboxes support 2+ columns like this in the first place? And can a variable layout be used in a single infobox? (If so, how?)

      Loading editor
    • You can use layout="horizontal" on the group tag to make columns in a PI. If you leave a PI field empty it will just disappear so you can make 4 data tags in one horizontal group and leave 3 empty if only 1 is needed, leave 2 empty if only 2 are needed or leave 1 empty if only 3 are needed.

        Loading editor
    • Portable Infobox width has been set at 270px. Zeon Civil War is 340px wide and with 4 columns some of the data looks squashed. Maximum 2 columns in 270px would be more suitable; so I recommend that you consider a redesign.

      I have been playing with some options. I found that using a single column and grouping the sections into collapse groups was the easiest for reading. I did a mock design for Second Battle of Jachin Due (GS:E) - has 3 columns with most sections - as an example.

      Conflict Infobox


      <infobox layout="stacked" theme="conflict">
      
       <image source="image"></image>
      
       <title source="name"></title>
      
       <data source="date"><label>Date</label></data>
      
       <data source="location"><label>Location</label></data>
      
       <data source="battles"><label>Battles</label></data>
      
       <data source="status"><label>Status</label></data>
      
       <data source="universe"><label>Universe</label></data>
      
       <data source="storyline"><label>Storyline</label></data>
      
       <data source="result"><label>Part of</label></data>
      
       <data source="partof"><label>Result</label></data>
      
       <group collapse="closed"><header>Commanders</header>
        <data source="commander1"><label>{{{combatant1|}}}</label></data>
        <data source="commander2"><label>{{{combatant2|}}}</label></data>
        <data source="commander3"><label>{{{combatant3|}}}</label></data>
        <data source="commander4"><label>{{{combatant4|}}}</label></data>
       </group>
      
       <group collapse="closed"><header>Units</header>
        <data source="units1"><label>{{{combatant1|}}}</label></data>
        <data source="units2"><label>{{{combatant2|}}}</label></data>
        <data source="units3"><label>{{{combatant3|}}}</label></data>
        <data source="units4"><label>{{{combatant4|}}}</label></data>
       </group>
      
       <group collapse="closed"><header>Strategic Assets</header>
        <data source="strength1"><label>{{{combatant1|}}}</label></data>
        <data source="strength2"><label>{{{combatant2|}}}</label></data>
        <data source="strength3"><label>{{{combatant3|}}}</label></data>
        <data source="strength4"><label>{{{combatant4|}}}</label></data>
       </group>
      
       <group collapse="closed"><header>Casualties</header>
        <data source="casualties1"><label>{{{combatant1|}}}</label></data>
        <data source="casualties2"><label>{{{combatant2|}}}</label></data>
        <data source="casualties3"><label>{{{combatant3|}}}</label></data>
        <data source="casualties4"><label>{{{combatant4|}}}</label></data>
       </group>
      
      </infobox>
      


      .pi-theme-conflict { background:black; border-collapse:collapse; border:3px solid #222222; font-size:smaller; line-height:1.5;  }
      .pi-theme-conflict .pi-border-color { color:#fff; border-color: #ff0303; font-family:Century Gothic; }
      .pi-theme-conflict .pi-title { text-align:center; color:#ffffff; background:#ff0303; font-weight:bold; font-size:14px; }
      .pi-theme-conflict .pi-header { font-weight:normal; background:#222222; color:#ff0303; border-bottom:1px solid #ff0303; border-right:3px solid #222222; }
      .pi-theme-conflict .pi-data-label { color:#ff0303; }
      .pi-theme-conflict .pi-collapse-closed .pi-header::after { border-color:#ff0303; }
      .pi-theme-conflict .pi-collapse .pi-header:after { border-color:#ff0303; }
      


      w:c:gundamfanon:Help:PortableInfoboxes

        Loading editor
    • Thanks TableWiz, I was a bit concerned it would look extremely crushed but wasn't sure how bad it could be until rolling it out.

      Might go with the grouped issue, depends what the other admins like, but I'm very glad you caught that. (Thanks anyway Kocka, may find a use for that somewhere else)

        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