3

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?

6

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 | |
  • 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 Oct 30 '15 at 12:35
  • This is very nice. It would be even better if it would box the sidebar with an arrow of some sort, so users could hide/expand the sidebar with a simple click :) For example, I like the sidebar information on my flag-history, and when I feel like looking at "Linked"/"Related" posts. Currently I go and enable/disable the userscript. – Scratte Mar 20 at 9:50
0

and this too: StackOverflow CodeBox Options

options-menu

| improve this answer | |
0

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.3
// @author       double-beep
// @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)/(questions/\d+/|review/*)
// @exclude      /^https://*.*/review/(suggested-edits|reopen)/*
// @updateURL    https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function($) {
  $('.-secondary').append('<li class="-item"><a class="-link" id="hide-sidebar" title="Toggle visibility of right sidebar">&#10095;</a></li>');

  function defineOnClick() {
    const sidebar = $('#sidebar, .sidebar'), mainbar = $('#mainbar, .mainbar');
    $(document).on('click', '#hide-sidebar', function() {
      if (sidebar.is(':visible')) {
        sidebar.hide(200);
        mainbar.animate({'width': '100%'}, 200);
        $(this).html('&#10094;');
      } else {
        sidebar.show(200);
        mainbar.css('width', 'calc(-324px + 100%)');
        $(this).html('&#10095;');
      }
    });
  }
  if (window.location.pathname.match(/\/questions\/\d+/)) defineOnClick();

  var origOpen = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function() {
    this.addEventListener('load', () => {
      if (this.responseURL.match(/\/review\/(next-task|task-reviewed)/)) defineOnClick();
    });
    origOpen.apply(this, arguments);
  };
})(jQuery);
| improve this answer | |

You must log in to answer this question.

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