User blog:Tsubakura/Removing that annoying Wikia Side Rail

The Wikia Side Rail (sidebar, whatever you want to call it) has been there a long time since the Oasis skin became a thing, but it sadly came with an annoying price to pay (the fact that it shrinks your actual content on the article page and wikia uses it to display ads). We had thought about simply getting rid of it to allow people to utilize more space in an article, except it was against the wikia's ToS. We even contacted the wikia staff in a way to get rid of it, but their excuse is apparently that they don't want us to utilize the extra space, due to it not displaying properly on mobile devices.

Putting aside that wikia had always looked like shit for mobile users and that their own ToS effectively prevents our admin team from fixing the problem, we have clearly received the message that they won't assist us with resolving this issue. Since they don't want to resolve this, we have decided to take the matters in our own hands.

Workaround
While their ToS mentions that we are not allowed to do anything about the rail on a global scale, there are no rules preventing people from using customization which only affects themselves. In other words, it's perfectly fine to customize or even remove the rail yourself, as long as it doesn't affect anyone else.

With that existing loophole, I will now teach you a method to get rid of it. This method creates 2 new buttons on the top right corner of your screen. The Wide page button stretches your page even further, allowing more content to fit in. This is especially useful for people with a large monitor size, but the downside is that stretching the screen might not necessarily solve the space problem. The Hide sidebar button however, will get rid of the wikia rail once and for all, immediately putting all the extra space it left behind to good use.





Of course the wikia rail is only hidden and if you ever feel like seeing it again, you can uncheck the button and it will pop up again. This process only takes a minute at most as its mostly a process of copy pasting, the hard part has already been done for you. Don't worry about not being a programmer either, simply follow the steps and you'll be fine.

Special thanks to がか for providing all the codes and allowing this to be possible.

Note: As the Monobook skin doesn't utilize a side rail like the Oasis skin does, it's kind of pointless to perform the following steps if you're a Monobook user yourself. Of course I won't stop you from doing it anyway though.

Step 1: Enable JavaScript
As the feature is mostly JavaScript, you will need to enable JavaScript in your user settings as it is disabled by default. Go to your Preference Settings and Enable personal JavaScript. The button is displayed under the Advanced display options header, so it shouldn't be too hard to spot.

Step 2: Copy the CSS code to your personal CSS
Access your personal CSS file here and create the page. When creating the page, make sure to choose the Classic editor!

Copy and paste the following code into the page and save it! position: absolute; right: 0px; top: 85px; z-index: 9001; cursor: pointer; }   position: absolute; right: 20px; top: 87px; z-index: 9001; cursor: pointer; }   position: absolute; right: 95px; top: 85px; z-index: 9001; cursor: pointer; }   position: absolute; right: 115px; top: 87px; z-index: 9001; cursor: pointer; }
 * 1) WikiaRailCheckbox {
 * 1) WikiaRailCheckboxLabel {
 * 1) WikiaPageWideCheckbox {
 * 1) WikiaPageWideCheckboxLabel {

Although it's hard to believe that anything can go wrong, you can use this as a reference to see if you did it correctly.

Step 3: Copy the JS code to your personal JavaScript
Access your personal JavaScript file here and create the page. Once again, make sure to use the Classic editor!

Copy and paste the following code into the page and save it! (function($) {   "use strict";    $(document).ready(function { function bindToLocalStorage(element, property_name, variable_vame, on_change, on_init) { element.change(function {                var value = element.prop(property_name);                localStorage.setItem(variable_vame, JSON.stringify(value));                if (on_change) {                    on_change(element, value);                }            }); element.prop(property_name, JSON.parse(localStorage.getItem(variable_vame))); if (on_init) { on_init(element, element.prop(property_name)); }       }        $(".wds-community-header").append('Hide sidebar '); function handleWikiaRail(_, checked) { if (checked) { $(".WikiaRail").hide } else { $(".WikiaRail").show }           $(".WikiaMainContent").css({width: checked ? "100%" : ""}); }       bindToLocalStorage($("#WikiaRailCheckbox"), "checked", "wikia_rail_checked", handleWikiaRail, handleWikiaRail); $(".wds-community-header").append('Wide page '); function handleWikiaPageWidth(_, checked) { $(".WikiaPage").css({width: checked ? "90%" : ""}) $(".wds-community-header").css({width: checked ? "100%" : ""}) }       bindToLocalStorage($("#WikiaPageWideCheckbox"), "checked", "wikia_wide_checked", handleWikiaPageWidth, handleWikiaPageWidth); }); }(jQuery));

You can use this as a reference to see if you have done it correctly.

You might have to press Ctrl+F5 to refresh the css but you should be able to see 2 new buttons the top right corner now. Have fun. :)

Bonus Step: Enable this feature personally across all wikia communities
The above steps only enables this feature on KC Wikia. Chances are that you are a member across multiple communities and you wish to make use of this feature anywhere. Fear not as this is also a possibility. In fact, it's nothing special either as you will be doing steps 2 and 3 again, but this time on the community central environment of wikia.

Go here and copy paste the code as described in Step 2. After you're done with that, go here and copy paste the code as described in Step 3. You're done already. :)

If this blog has helped you, feel free to leave a comment. If not, feel free to leave a comment anyway. Oh, and don't forget to thank gaka when you see him.