8

I would like to gain some screen estate when viewing Stack Exchange sites. The sidebar seldom shows information I need.

  • I know most help content displayed when composing questions.
  • Most related answers are found by the same search that already brought me to the question I am currently viewing, so I already have them open in other browser tabs anyways.
  • Hot Network Questions always distracts me to scifi.

I know there is a userstyle to hide the Hot Network Questions and one that completely removes the sidebar leaving an ugly hole where it once was. Is it possible to hide it and have the question, list, or whatever content takes the main part of the page expand to claim its place?

Improve this question

6 Answers 6

Reset to default
9

Okay, the following Stylish style should be a good start.

You can also see / install it at userstyles.org. 

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document
    domain("askubuntu.com"), domain("mathoverflow.net"), domain("serverfault.com"), domain("stackapps.com"),
    domain("stackexchange.com"), domain("stackoverflow.com"), domain("superuser.com")
{
    #sidebar {
        display:                none !important;
    }
    #mainbar, .mainbar, #questions, .question-summary, #answers, .answer {
        min-width:              728px !important;
        width:                  100% !important;
    }
    .summary {
        min-width:              630px !important;
        width:                  calc(100% - 120px) !important;
    }
    .question > table {
        width:                  100% !important;
    }
    .post-text, .wmd-preview, .post-editor, .wmd-input {
        min-width:              660px !important;
        width:                  100% !important;
    }
    .wmd-button-bar {
        min-width:              634px !important;
        width:                  100% !important;
    }
}

Important!

  • This has not been extensively tested and only on Firefox, but it should work with stylish for Chrome, Opera, etc. too.
  • I don't use this style. Support for this low demand functionality will be limited.
Improve this answer
4
  • That is a very good start. On the question pages, it does exactly what I want. Other pages are still slightly misformatted. Would you be willing to post it on e.g. GitHub? This would make it easier to point to the places it still lacks and improve upon it.
    – XZS
    Commented Oct 30, 2015 at 12:35
  • i edited the width of the #mainbar to 50%. My requirement is to keep the default content width setting. But when I reduce the size of the window width, it should still to stay the same width.
    – tinker
    Commented Apr 28, 2021 at 7:22
  • I still needed this script, because simply hiding using, #sidebar { display:none !important; } , the content width will be shrinked too small, when the window width is reduced. (Eg. I put my monitor in portrait mode, and maximise the window)
    – tinker
    Commented Apr 28, 2021 at 7:26
  • 1
    Stylus extension is now recommended over Stylish (privacy concerns).
    – tinker
    Commented Apr 28, 2021 at 9:48
4

I made a userscript that allows the user to toggle the visibility of the sidebar (the userscript's source code is also on GitHub):

// ==UserScript==
// @name         Toggle the right sidebar
// @version      0.5.2
// @author       double-beep
// @contributor  Scratte
// @description  Add the ability to toggle the right sidebar
// @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)/*
// @exclude      https://*.*/review*
// @updateURL    https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @downloadURL  https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @license      MIT
// @grant        none
// ==/UserScript==

(function() {
    const buttonWrapper = document.createElement('li');

    const toggleButton = document.createElement('a');
    toggleButton.id = 'hide-sidebar';
    toggleButton.title = 'Toggle visibility of right sidebar';
    toggleButton.innerHTML = '❯';
    toggleButton.classList.add('s-topbar--item');

    buttonWrapper.appendChild(toggleButton);

    document.querySelector('.s-topbar--content').appendChild(buttonWrapper);

    const sidebar = $(document.querySelector('#sidebar, .sidebar'));
    const mainbar = document.querySelector('#mainbar, .mainbar');

    document.querySelector('#hide-sidebar').addEventListener('click', ({ target }) => {
        if (sidebar.is(':visible')) {
            sidebar.hide(200);
            $(mainbar).animate({ width: '100%' }, 200);
            target.innerHTML = '❮';
        } else {
            sidebar.show(200);
            mainbar.style.width = 'calc(-324px + 100%)';
            target.innerHTML = '❯';
        }
    });
})();

The button is in the menu bar:

Improve this answer
3
  • interesting. I tried this, it works but i can't click the same button to unhide it. useful if it can hide by default too.
    – tinker
    Commented Apr 28, 2021 at 9:41
  • to run this, need to install tampermonkey, on chrome/firefox.
    – tinker
    Commented Apr 28, 2021 at 9:46
  • Works like a charm in Firefox, but only on the Q&A pages. Is that intentional?
    – Joachim
    Commented May 9, 2021 at 22:56
1

and this too: StackOverflow CodeBox Options

options-menu

Improve this answer
0

Nice small chrome extension. Adds a toggle button to show/hide. Minor con though, it shows the sidebar for a millisecond before the javscript kicks in.

Toggle Stackoverflow sidebar - Chrome Web Store

enter image description here

Improve this answer
0

You can find my plugin which does just that for Firefox here.

Improve this answer
1
  • But it is exclusively for StackOverflow, and not the Stack Exchange platform, so not really appropriate for the OP.
    – Joachim
    Commented May 9, 2021 at 23:02
0

You can just block the element with Brave's right click menu, or the uBlock Origin add-on.

Improve this answer
1
  • Welcome to Stack Apps! Could you please elaborate a bit - for instance, does it work across all sites in the network?
    – Glorfindel ♦
    Commented Mar 19 at 20:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .