Move MediaWiki table of contents (TOC) to the right in Vector skin

MediaWiki is growing on me more and more as far as organising information to share between the members of a team. Sure, it has downsides which are rather obvious (e.g. maybe complicated to update), but all in all it is worth being taken into consideration as your own Wiki.

So, having the Table of contents to the right is something some people might want. So here is a solution:

MediaWiki:Common.css

Access your Common.css file with this URL: https://example.com/index.php?title=MediaWiki:Common.css and add:

/* CSS placed here will be applied to all skins */


/* Make table of contents always visible to the right, if width is big enough*/
@media screen and (min-width: 800px) {
  #toc { 
    float: right;
    position: fixed;
    top: 150px;

    margin: 0 0 1em 1em;
    right: 2em; 
    width: 20em;
  }

  #mw-content-text {
    padding-right: 22em;
  }
}Code language: CSS (css)

MediaWiki:Common.js

Access your Common.js file with this URL: https://example.com/index.php?title=MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */

/* Full width of content when no TOC */
$(function () {
  var hasTOC = $('#toc').length;

  if (!hasTOC) {
    $('#mw-content-text').css('padding-right', '0');
  }
}());Code language: JavaScript (javascript)

Last notes

As the comments in each set of mods say, this changes apply to all the skins available. Therefore, if not using the Vector skin, it might make the wiki look bad. As far as what the code does:

  1. In the URLs, replace example.com with the address of your wiki, obviously;
  2. The CSS file is loaded first and faster, so it contains the default rules;
  3. If the width of the whole content is big enough (the choice was for 800px, but you can change this to whichever value you want) then the TOC is moved to the right and some padding to the right is added to the content;
  4. As we all know, there are no IFs in CSS. Therefore, this is where Javascript and jQuery (which is loaded by default in MediaWiki) come in. The JS part checks if the TOC is there and if it is not, it changes the CSS for the content to the default.
Tags