FANDOM


  • Does anyone know how to get a working horizontal TOC on Fandom? I've been searching but none of the existing templates on and Wika/Fandom Wiki's work, nor is there a converted template on w:c:Templates. Even on external wiki's have been a mix, and I'm cautious of copying anything when there's no mention of licencing.

    From what I have been able to gather the main method that everyone seems to use is the template from Wikipedia:Template:Horizontal TOC though that requires extra CSS which I assume admins are just putting into their Wikia.css page.

    But is there really no other way though?

      Loading editor
    • Okay, so there is alot going on here...

      1. Why would you want a horizontal TOC? They are extremely space inefficient based on how websites are almost universally designed to scroll up and down and not left-to-right.
      2. There isn't one on Templates wiki, because of the first point, in all likelihood.
      3. The wikipedia template probably won't work, because it appears to use a custom HTML tag <templatestyles> that FANDOM almost certainly doesn't support (probably needs an extension).
      4. There is almost no way you'll get one to work without some CSS tweaking.
        Loading editor
    • The reason I was looking into it is because the wiki/article I was working on is a version/patch history for a game, and aside from restricting the layout to put everything in a table (which would also mean severally limiting writing any notes for each entry) or removing the TOC entirely it;s going to take up a lot of space. w:c:sky-children-of-the-light:Version History.

      I was doing some general browsing of other wikis to get some ideas for different possible layouts, and again other then using a table I came across one possible solution on the Kerbal Space Program Wiki. Even with he descred overall width on Fandom due to the sidebar I think this would be the only other option if I was to keep the current page layout.

      I figured it would likely need some extra CSS though I wanted to check. Other then putting there required CSS in the global file, will the template need to reference the block, such as using the "type" field when the template is being used, or somewhere within the template page itself?

        Loading editor
    • base styles:
      .page-Version_History #toc ol {
          display: inline-flex;
          flex-wrap: wrap;
      }
      .page-Version_History #toc li {
          display: inline-flex;
      }

      margins and other stuff is not included.

        Loading editor
    • In the example page, I would just float the TOC to the right and have the contents wrap to the left... Fngplg recommended some CSS, but didn't explain it.

        Loading editor
    • since it's topic about placing toc elements horizontally, so my css makes the toc to be horizontal. i thought it was obvious enough ¯\_(ツ)_/¯

        Loading editor
    • Fandyllic wrote:
      In the example page, I would just float the TOC to the right and have the contents wrap to the left... Fngplg recommended some CSS, but didn't explain it.

      Can't believe I dind't think of that. Sometimes the simplest solution really is the best. Well it's not perfect as the text looks a little squashed now but it'll do for now as it still looks better then it would otherwise. 

        Loading editor
    • I know you're hoping for solutions that result in a horizontal TOC, rather than alternatives, but one way you could reduce the TOC's existing length ('for the time being' or otherwise) is by 'hiding' the sub-headers (which are all H3 headers on your page). In other words, it is possible to restrict which headers a TOC lists.

      There are a couple of ways to achieve this. One way is to simply increase the font-size of all your sub-headings rather than actually tag them as H3 headings (e.g. using div style="font-size:16px;" for each sub-header). This way they would not be recognized as headers by the TOC.

      However, this would be time-consuming to implement and certainly not all that practical in the long-term, so another option is to use a TOClimit-type template to hide the H3 headings instead...which I now see you have indeed borrowed from the Templates Wiki, as I have done myself. Your parameter input is '2' on the Versions History page, so you clearly already thought of hiding the H3 headings... Given that the TOC is still listing them despite your parameters, evidently something has gone wrong.

      The template's documentation explains the template will not work without the required CSS, and lo, your MediaWiki:Wikia.css page is indeed blank. Ask someone with the necessary permissions to copy the template's Required CSS to your Wikia.css page.

      (Remember, you might have to purge your cache and/or hard refresh or null edit before the effects are visible.)

      If you want proof it works, here are links to the wiki where I have successfully implemented TOClimit and use the same 2 parameter: article where I use the TOClimit template | Wikia.css page with the CSS. Each Volume in the volumes list template was being detected as a H3 heading by TOC, so TOCLimit is successfully excluding them from the contents.

      You might also want to take a gander at FloatingToc, a script that adds a button to TOCs that, when clicked, turns the TOC into a floating panel users can drag around with their mouse, adjust, and dock on the right rail while they scroll through the page. I implemented this myself on the Baccano! Wiki a few months back out of the same length concern; sure, I don't know how many people actually notice or use this feature, but I think it's definitely something you could use in the interim.

      Edit: Ah, memories. I remember spending hours and hours attempting to figure out how the WoW Wiki had managed to make the TOC dock on the left rail by default when initially 'paneled' (click on the 'panel' button for this article's TOC as an example), back in the day. Trawled through their JS, played around with Inspect/Dev tools, etc; eventually I conceded retreat...

      TOC_right was also a fine suggestion; I've used it on at least one article myself, but probably could stand to make use of TOC_left and _right a little more often. I recall that The Long Dark Wiki uses it for their Changelog page. I also recall that the Hollow Knight Wiki has a horizontal TOC for its Updates page...ah, a manually made one, rather than an automatic one. That explains that.

      21May2020 Fngplg CSS Preview

      Previewing Fngplg's code via MagicCSS.

      Edit x2: Chucked Fngplg's CSS at MagicCSS for a preview; this is the result. Had to maximize my browser window to fit it all in the screenshot. As Fngplg pointed out, the code isn't yet customized margin-wise and whatnot; some experimenting might very well be in order, eh?

        Loading editor
    • Revriley wrote:
      Snip

      Thanks for all the helpful advice. I did have the TOClmit on the page but removed it when floated it to the right, and I'm not sure if it would like both templates in at the same time as I have a feeling cause some issues. Also did consider just manually styling each heading but like you said decided aginst it for being to much work.

      I think I'll leave it like that for now as while it's not perfect ​as the text now is a little squashed, it's still better then it was before. There's other projects on the wiki that I need to see to and keep putting off as I can;t help finding and distracting myself with other minor tasks.

        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.