UESPWiki:Javascript/Modify Sidebar

Here is a little guide to customizing the sidebar. There are two ways: the easy way, and the way available to normal users. ;) The easy way consists in simply modifying MediaWiki:Sidebar. You'll notice it's not exactly normal wiki code but something a bit different: the [[ and ]] are missing. You'll also notice you can't edit it, only view its source. (Unless you're an admin, of course.)

So since you can't modify it, how can you customize your sidebar? By hacking your skin, of course. No, put that axe down, it's jargon. Your skin, here, is something you can choose in your Preferences. It's in the second tab. By default, it's monobook, but you have other choices available. Feel free to try a few to see if any strike your fancy more than monobook does. For the rest of this little guide, I'll assume you'll stay with monobook, though; so if you change be sure to adapt the instructions accordingly (i.e., if you take Cologne Blue, you'll have to edit cologneblue.js instead of monobook.js).

Now for the hacking... Each user can tweak the appearance of the skin of his choice by creating special pages: Special:MyPage/monobook.css and Special:MyPage/monobook.js. They will be loaded after the site-wide CSS and JS and thus affect them. Now if you're not familiar with Cascading Style Sheets and JavaScript, don't despair because all the hard work is already done and what remains is very simple. Especially given that we won't even look at the CSS, only the JS.

Take a look at this common.js (common.js is applied to all skins, monobook is only applied to the default) page. It can be divided neatly in three parts. The first part, from the beginning to the closing curly braces after "return;", are the hard work that you won't have to do. It defines a function to modify the sidebar, aptly named "function ModifySidebar", and this is our hacking tool. Copy it verbatim. The second part, "function CustomizeModificationsOfSidebar", is where you can tailor your sidebar.

As you can see, it's a list of lines which call "ModifySidebar" with different parameters. I think it's self evident, but just to explain it fully, ModifySidebar("remove", "sections", "Redguard", "http://www.uesp.net/wiki/Redguard:Redguard"); will remove from the "sections" box the "Redguard" link. It is important to give both the link name and the link URL. Pay attention to things like spaces replaced by underscores. It can be tricky.

If you want to have the links in a specific order, you need to first use the "clear" function to empty it. Then you can add all the links you want in the order you want.

What if you want an indentation? The normal sidebar looks like this:

• Oblivion
• Shivering Isles
• Morrowind
• Tribunal
• Bloodmoon

And we'd rather these links looking like this:

• Oblivion
  • Shivering Isles
• Morrowind
  • Tribunal
  • Bloodmoon

Wouldn't we? Well, that's possible. You can specify up to five* additional pairs of names and links. For clarity's sake, I put line breaks and indentation within the function's argument, but that's not needed to make it work. It just looks neater than all on a single line.

    ModifySidebar("add", "sections", "Daggerfall", "http://www.uesp.net/wiki/Daggerfall:Daggerfall");
    ModifySidebar("add", "sections", "Morrowind", "http://www.uesp.net/wiki/Morrowind:Morrowind",
                                     "Tribunal", "http://www.uesp.net/wiki/Tribunal:Tribunal",
                                     "Bloodmoon", "http://www.uesp.net/wiki/Bloodmoon:Bloodmoon",
                                     "Tamriel Rebuilt", "http://www.uesp.net/wiki/Tes3Mod:Tamriel_Rebuilt",
                                     "Vvardenfell", "http://mwmap.uesp.net/"
                 );

See the difference between the Daggerfall line (only one link) and the Morrowind line (with four sub-items)? Pay attention to the closing parenthesis and semi-colon – if you put them after the Morrowind link, then it won't work.

(* Technically, extending the function to work as well with a larger number than five would be trivially easy. However, if you need six or more sub items, it probably should be a whole new section instead...)

Think about it, and tweak to your heart's desire. Oh, but I mentioned a third part, didn't I? Well, yes. Here's the third part in its entirety:

   $(CustomizeModificationsOfSidebar);

That's what will get your browser to apply all your changes to your sidebar.

Note: This documentation was originally found here and has been moved out of User space to encourage updates.