FANDOM


  • I have been trying to make some infoicons on the Xbox Wiki, with these templates, Template:Platform and Template:PlatformIcon. I have been testing the icons on this page . I would like the icons to run horizontally across the page rather than being stacked like they currently are, I cannot figure out why this is happening. Also, I would like to know how to move the icons from the left side of the page to the right side of the page. Currently the icons are on the left side of the page.

    Any help will be appreciated.

      Loading editor
    • You need to add the proper CSS to have them do that. Where on the page do you want them positioned?

        Loading editor
    • I’d like them to be positioned at the top right of a page.

        Loading editor
    • Then add this CSS to your wiki.

      .topplatform-container {
          position: absolute;
          top: 0;
          right: 0;
      }
       
      .topgame {
          display: inline-block;
      }

      You will also need to modify your hatnote to have a margin at the top so they don't overlap.

        Loading editor
    • Thanks, they are now in the correct spot. But the icons are overlapping another template on the page I am testing them on .

        Loading editor
    • Yes, that was the type of template I was referring to when I said "hatnote". You can edit Template:Notice to include a top margin for the table. That should push it down a bit.

        Loading editor
    • Sorry for my continued stupidity but how would I go about doing this?

        Loading editor
    • I have edited the template for you. It should not overlap any more.

        Loading editor
    • Ok thanks for your help.

        Loading editor
    • Sorry to bother you again, but it appears that the icons are also overlapping Infoboxes. I fixed the overlapping on this Infobox , but am not sure how to fix it on these types of Infoboxes .

        Loading editor
    • Hmmm... Okay. Let's revert the changes to the other templates and use a different approach. In your site CSS, add:

      #mw-content-text {
          padding-top: 25px;
      }

      You may also want to edit the template for the icons. Instead of fixing the width, you probably want to fix the height. For example, here is how your template currently places images.

      [[File:Xbox-icon.png|25px|link=Xbox (console)]]
      

      Here is what you would want to change it to to control the height instead of the width.

      [[File:Xbox-icon.png|x25px|link=Xbox (console)]]
      

      Do you see the "x" in front of the number?

        Loading editor
    • Thank you. That fixes the overlapping. I just have one more question. How can I get the icons to be at the very top of the page, like they are here on the Forza Wiki .

        Loading editor
    • The thing creating that space is outside the main article area, so I am not sure if we are allowed to change it. That said, even if Fandom doesn't like us changing it, they probably won't be too harsh in terms of consequences. If you want to do it that way, then we will walk-back on the CSS yet again. This is what you currently should have.

      .topplatform-container {
          position: absolute;
          top: 0;
          right: 0;
      }
       
      .topgame {
          display: inline-block;
      }
       
      #mw-content-text {
          padding-top: 25px;
      }

      This is what you will want instead.

      .topplatform-container {
          position: absolute;
          top: -25px;
          right: 0;
      }
       
      .topgame {
          display: inline-block;
      }
       
      .WikiaPage .page-header__separator {
          margin-bottom: 24px;
      }
        Loading editor
    • Doing this seems to cut the tops of the icons off or makes them completely disappear

        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.