FANDOM


  • How would you make a Header and section Collapsible, kinda like it is in the mobile version.

    Screenshot 20200721-205029 Chrome

    Im talking about this, it is quite cumbersome and filling when left open. Is there a way to make it collapsible, or perhaps scrollable.

      Loading editor
    • Where is that from? It looks like just a bunch of headers without any content; not content that has been collapsed. If you want to have collapsing content on desktop view, see Help:Collapsing. I am not sure how well this feature appears on mobile but it is the only option for desktop view. Mobile view headings should collapse be default.

        Loading editor
    • I think they're probably showing the image as an example of headers that they want to be collapsible. The collapsible classes don't do anything at all on mobile, but that'd be fine since the headers are already collapsible on mobile as you said.

        Loading editor
    • Yeah, they have no content yet. I was talking about making the Header at the top Collapsible so that all of the Sub Headers would dissappear.

        Loading editor
    • You'd use something like following for that, if you haven't figured it out yet:
      <div class="mw-collapsible mw-collapsed">
      == Header ==
      <div class="mw-collapsible-content">
      === Subheader #1 ===
      === Subheader #2 ===
      === Subheader #3 ===
      </div>
      </div>
      It'd result this:

      Header

      Subheader #1

      Subheader #2

      Subheader #3

        Loading editor
    • Thanks, thats perfect!

        Loading editor
    • Unrelated, but I have a question, is it possible to have seperate infoboxes be put into one, by this I mean its like a gallery, but with Infoboxes instead of pictures.

        Loading editor
    • Yes, but depending on the layout you want, you will need to use some custom CSS. By default, portable infoboxes will stack-up underneath each other on the right side of the page.

        Loading editor
    • Okay, That is the case. Just was wondering if you could make them able to be toggled between so to say.

        Loading editor
    • By "toggled between", do you mean placing them in tabs? Yes, you can do that but it won't be good on mobile. The tab feature doesn't work on mobile. The reason panels and sections works is because it is a different feature than regular tabs. I would suggest using nested panels/sections but I tried that once and it didn't work. The panels/sections feature for portable infoboxes is designed with the assumption that they aren't nested. So, it is possible but not in a way that will look good on mobile.

        Loading editor
    • O design most things with dextop in mind, and the wiki I work on and create has most people visit in desktop, mobile visiters are a minority.

      I will send a picture od the infoboxes I am talking about, they arent on my own wiki so I cant tell the stats, so do t know how many are mobile.

        Loading editor
    • Andrewds1021 wrote: [...] I would suggest using nested panels/sections but I tried that once and it didn't work. [...]
      Hmm, I'm a bit confused... I don't see how OP's purpose would require nested panels? Wouldn't just one do? Unless I'm not understanding OP's purpose, isn't something like this just what they're looking for - tabs to toggle between different information, which may imitate "separate infoboxes" - which only needs one panel?
      Zouken wrote: O design most things with dextop in mind, and the wiki I work on and create has most people visit in desktop, mobile visiters are a minority. [...]
      How do you know that mobile visitors are a minority, though? Only Fandom staff would have access to such statistics to form an informed opinion over, and unless you got such information from them, wouldn't it be just an assumption?

      Even if mobile visitors are indeed a tiny minority, their experience still matters. It's only a good practice to make design and functionality choices that can accommodate and be welcoming to users across all devices; especially when it's easily viable to do so.

        Loading editor
    • I am the Founder and Admij of the Shinza Banshou Wiki, I get sent information of vists per day, most visted pages, percentages of people who visit on mobile, tablet, or computer; the percentages that use different browsers, and the countries of origin.

      Yeah, that image seems to work.

        Loading editor
    • Ah, right, I'm sorry. I forgot that Special:Analytics provides the statistics of desktop and mobile sessions, my bad...

      And good to know! If your wiki uses portable infoboxes, then you'd use something like this to make use of panels for your purpose:
      <infobox>
        <panel>
          <section>
            <label>Infobox 1</label>
              <title><default>Title 1</default></title>
              <image><default>Example.png</default></image>
              <data><label>Label</label><default>Value</default></data>
              <data><label>Label</label><default>Value</default></data>
              <data><label>Label</label><default>Value</default></data>
              <data><label>Label</label><default>Value</default></data>
          </section>
          <section>
            <label>Infobox 2</label>
              <title><default>Title 2</default></title>
              <image><default>Example.jpg</default></image>
              <data><label>Label</label><default>Value</default></data>
              <data><label>Label</label><default>Value</default></data>
              <data><label>Label</label><default>Value</default></data>
              <data><label>Label</label><default>Value</default></data>
          </section>
        </panel>
      </infobox>
      If you need help with implementing it on your wiki, feel free to let me know! :)
        Loading editor
    • Thanks, I will add that.

      And this one isnt for my wiki, this is for another small wiki that I am adding some codes and upgrades to. This wouldnt fit kn mine, but would fit on the other.

      Basically its Book of Mario, a badly translated version of Paper Mario TTyD and 64. And I am adding this for the stats and abilities of characters that you fight multiple times in different forms.

        Loading editor
    • Also with this,
      Screenshot 20200713-214656 Chrome
      How would you make the upper part work to look more like this,
      Screenshot 20200725-100508 Chrome

      And by that I am refering to the first one being a Dark Header~esque thing.

        Loading editor
    • Ah, I see. Sounds nice!

      And can you provide link to the template in question? You want the template to have grey background for current tab and black for the rest, correct?

        Loading editor
    • No, the grey one is selected, thus it is grey due to being selected, I just want to know how to have a link-less one of the side before everything else.

      Like the Superman one, it has one before all the linked tabs that is a different colour scheme then everything else.

      Here is the link, https://shinza-bansho.fandom.com/wiki/Template:Tabs?action=edit

      You can add it and tell me how to edit colour to my liking.

        Loading editor
    • CrazyForMyself, I am not sure where I got that impression from. I think I may have been confusing this (previously) unidentified infobox with a different one from another thread.

        Loading editor
    • Zouken wrote: No, the grey one is selected, thus it is grey due to being selected, I just want to know how to have a link-less one of the side before everything else.

      Like the Superman one, it has one before all the linked tabs that is a different colour scheme then everything else.

      Here is the link, https://shinza-bansho.fandom.com/wiki/Template:Tabs?action=edit

      You can add it and tell me how to edit colour to my liking.
      I see. The template already has got parameters for that, so you just need to make use of them:
      {{Tabs
      | maintext  = Text
      | backcolor = Color
      }}
      Andrewds1021 wrote: CrazyForMyself, I am not sure where I got that impression from. I think I may have been confusing this (previously) unidentified infobox with a different one from another thread.
      Ah, I understand that. I also sometimes mix up stuff from different threads and end up confusing myself, haha.
        Loading editor
    • Maintext part works, but the backcolor didnt effect anything

        Loading editor
    • Forgot the #, but now I have another issue. Just go to this page and the issue should be obvious.

      https://shinza-bansho.fandom.com/wiki/Frederica

      Also how cpuld I change the back of all the other ones, making them not clear.

        Loading editor
    • Oh, so that parameter also changes background color for selected tabs... I got confused, my bad. The template is more cluttered than needed, IMO, especially for you needs.

      I think it'd be better that I rewrite it and add what you need along the way. So does the maintext part need to have the same specific background color (#000) for all characters, or does it need to have variable color for different characters through a certain parameter? Also, do you want to have a parameter to specify background color for the other tabs besides maintext?

        Loading editor
    • Well, I am doing something to change a bunch of things depending on which entry they were from. But for now lets just make it the same.

      So I already have selected tabs be made a different colour, just want to be able to add a linkless one like the picture I sent.

      Here is the link to the template:


      https://shinza-bansho.fandom.com/wiki/Template:Tabs?action=edit

        Loading editor
    • Sorry for coming back to you late, my internet connection wasn't working.

      All right, so I tidied it up plenty much and it should be about the same, just with a lesser cluttered source code! :) I also added a parameter for background color exclusively for linkless tab, mainbackcolor. It's #000 by default.

      On a side note, you don't have to fill tab<number> parameters if the title of tab is supposed to be the same as link<number>. So as an example, just this'll do the work on Frederica page:
      {{Tabs | maintext = Forms | link1 = Frederica | link2 = Marika}}
        Loading editor
    • Okay, thank you

        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.