How to avoid "Hot Network Questions" on the sidebar

Adblock - add the following filter:

stackoverflow.com###hot-network-questions

or, if you need to do work on other SE sites:

###hot-network-questions

Also, if you use uBlock origin, you can simply right-click the element and click "block element" to implement the above.

You can turn it off when you want to read them later :) Also, you need not block any other ads if you want to support SO. I'm off to get my productivity back, good luck!

I think some of the answers here that suggest "Have some self control!" miss the point.

• Given: Seeing an interesting question automatically makes some brains trigger "work on that question" (umm, citation - you know if this describes you)
• Given: Intentionally avoiding looking at that area, or even harder, stopping the "work on that question" process, once started, requires some quantity of mental resources
• Given: mental resources are limited (for all of us) and very valuable (for many of us)

"Have more self control" is another way of saying "use some of your limited and valuable mental resources to do X".

Soo...why would you argue that StackExchange (StackOverflow is what I am on most often), that great boon to productivity everywhere (see StackOverflow about, which says: "Ask questions, get answers, no distractions") should force this distraction on all its users? If I want to be distracted, I'll go to Buzzfeed (I don't).

I guess the question comes down to: does SE want to prioritize the interests of its users, or prioritize "get more questions answered, even if it means being a parasite of mental resources like Buzzfeed"? It's a free site so I have no standing to argue that SE should prioritize my interests, but it's a question that needs to be answered.

(In closing: please allow users to choose to hide it.)

If you use Chrome but don't want to trust a third-party extension, you can roll your own pretty easily:

1. manifest.json

   {
       "manifest_version": 2,
       "name": "Stack exchange styles",
       "version": "0.1",
       "content_scripts": [{
           "matches": ["*://meta.stackexchange.com/*", "*://stackoverflow.com/*"],
           "css": ["style.css"]
       }]
   }
   

2. style.css

   #hot-network-questions { display: none; }
   

3. Open chrome://extensions/, enable "Developer mode", click on "Load unpacked extension" then select the folder containing the 2 files above.

1. Install Stylus browser extension, which allows custom CSS to be run. Download link here, for Chrome and Firefox.

2. Install this user script, or copy paste the CSS code into Stylus.

3. Test and enjoy life without distractions.

This script hides ANYTHING distracting. eg. chat rooms, network questions, linked answers, banners. Let me know if I missed anything. It works on all Stack Exchange sites, not just Stack Overflow.

What is the advantage of this method? This is faster, because it's pure CSS, no JavaScript. And you can easily enable/disable it in 2 clicks,

Full source code below for convenience,

/* ==UserStyle==
@name         Stackexchange Focus Hide All Distractions
@version      20230228.15.22
@namespace    userstyles.world/user/tinker
@description  This script hides ANYTHING distracting. eg. chat rooms, network questions, linked answers, banners. Let me know if I missed anything.

Works on all stackexchange sites not just stackoverflow.
@author       tinker
@license      No License
==/UserStyle== */

@-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:                  50% !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;
}

#footer {
    display:                none !important;
}
.site-header--container  {
    display:                none !important;
}
.js-dismissable-hero  {
    display:                none !important;
}
#left-sidebar {
    display:                none !important;
}
}

For those who use GreaseMonkey or TamperMonkey, you can easily create a user script:

// ==UserScript==
// @name       Hide Hot Network Questions 
// @namespace  http://CHANGE.TO.YOUR.WEBPAGE
// @version    0.1
// @description  Hide Hot-Network-Questions in StackExchange sites
// @match      *://*.stackexchange.com/*
// @match      *://*.stackoverflow.com/*
// @match      *://*.superuser.com/*
// @match      *://*.serverfault.com/*
// @match      *://*.askubuntu.com/*
// @match      *://*.stackapps.com/*
// @match      *://*.mathoverflow.net/*
// @exclude    *://chat.stackexchange.com/*
// @exclude    *://chat.meta.stackexchange.com/*
// @exclude    *://chat.stackoverflow.com/*
// @copyright  2012+, You
// ==/UserScript==

(function(){
    var bar = document.getElementById('hot-network-questions');
    if (bar) bar.style.display="none";
})();

One new chrome extension to rule them all. It also hides other annoying sidebars like chat!

Plus point, chrome extension allows for easy toggling.

Simply awesome!

https://chrome.google.com/webstore/detail/sidebaroverflow/lhieihmjhlbhpjkamdjfjldcapnmhddp?hl=en

You can use a user stylesheet on Mozilla browsers (SeaMonkey, Firefox, Camino). It does not require any installed extensions.

Open the userContent.css file (create if necessary) in your profile folder's chrome directory, and paste the following:

@-moz-document domain(stackexchange.com), domain(stackoverflow.com), domain(serverfault.com) {
    #hot-network-questions {
        display: none;
    }
}

You will need to restart the browser for any changes to take effect.

The userContent.css file is tucked away inside the profile folder, which is a bit tough to find.

You can follow the instructions for SeaMonkey or for Firefox on the Mozillazine wiki, or here's the short version:

• ~/.mozilla/seamonkey/******/chrome/userContent.css (Unix)
• %APPDATA%\Mozilla\SeaMonkey\Profiles\******\chrome\userContent.css (Windows)
• ~/Library/Application Support/SeaMonkey/Profiles/******/chrome/userContent.css (OS X)

where '******' is your profile's name plus a random string. You know you are in the correct directory if you see the file userContent-example.css there.

Blocking the Hot Network Questions is one of the features of Stack Overflow Extras (SOX).

After installing, you need to apply some settings. This is the one:

I've written a Chrome extension to hide/filter the Hot Network Questions list. It hides all questions by default, or you can specify a whitelist or blacklist of sites and keywords you'd like to see.

You can install it from the Chrome Web Store or check out the code on GitHub.

AdBlock Plus (for Chrome) offers a simple solution. Just click on the extension's icon, click Block Element and then select the Hot Networks area with the mouse (it will light up when you hover over it). That's it! The job is done.

PS - After you click the box with your mouse pointer, ABP will open a popup window where the blocked elements will be listed -

meta.stackexchange.com###hot-network-questions
meta.stackexchange.com##.module.tex2jax_ignore

Just change the first line to

###hot-network-questions

and that will implement the fix to all SE sites.

If you don't have access to Chrome extensions and need to use Internet Explorer, (for example in a corporate environment) you can create a user stylesheet (save this as a .css file):

#hot-network-questions {
  display: none;
}

For Internet Explorer, go to Tools > Internet Options > General > Accessibility. Click the check box for "Format documents using my style sheet". Browse to your style sheet and choose it. Then click OK and relaunch the browser to apply the styles.

Style sheets can be installed for other browsers via these instructions: http://webdesign.about.com/od/userstylesheets/a/aa010906.htm

For Safari, I searched for "CSS" on the Safari Extension page at Apple. I noticed Quickstyle.

After installation of Quickstyle, I followed the instructions like this:

And the Hot Network Questions disappeared!

Thank you Ilmari Karonen for the tip.

For FireFox, there is the UnHot addon which should do just that.

Just install it to hide them.

_{I programmed it}

Here's a simple solution verified for Safari that

• does not require any add-ons
• probably should work cross-browser

When on the site in question

1. Quickly open console from browser using keyboard Cmd-Option-C (altho you get more window than nec.)

2. Enter the command $("#hot-network-questions").hide(); ~ thanks to previous answers

   • IF: it’s the first time you are using it

   • ELSE: up-arrow to issue the same command issued previously

Console log history stays intact with Safari restart

I have uBlock Origin installed in Firefox but never created any custom filters for it previously.
Inspired by @user1993 I now have the following rules (uBlock icon > Open the dashboard > My filters):

stackoverflow.com###hot-network-questions > ul > li:has(div[title="Programming Puzzles & Code Golf Stack Exchange"])
stackoverflow.com###hot-network-questions > ul > li:has(div[title="Role-playing Games Stack Exchange"])
stackoverflow.com###hot-network-questions > ul > li:has(div[title="Science Fiction & Fantasy Stack Exchange"])
stackoverflow.com###hot-network-questions > ul > li:has(div[title="Movies & TV Stack Exchange"])
stackoverflow.com###hot-network-questions > ul > li:has(div[title="Puzzling Stack Exchange"])
stackoverflow.com###hot-network-questions > ul > li:has(div[title="Arqade"])
stackoverflow.com###hot-network-questions > ul > li:has(div[title="Worldbuilding Stack Exchange"])

Anti-distractor for StackExchange is another extension you can use which allows you to hide all of the following: