How can I customize site in my browser to get "old feel" look of MathOverflow?

Question

It seems that some of the users are not too happy with the new design and prefer the old look.

I will admit that I have not much experience with this stuff, but from I've read on various meta sites in this network, it seems that it is possible to make modifications to a site (or even add new elements) locally (on user's side) - using various userscripts, CSS custom styles, etc.¹

Perhaps for the users who like the old look it might be useful to know what they can change on their side. And users who successfully tried something to get closer to the "MathOverflow look" would probably be willing to share their knowledge and give advice to other users what can be done.

TL;DR: Let's use this post to share various modifications which can be done on user's side to achieve look closer to the way MO looked before the redesign.

To reiterate, this is about changes that a specific user can make to influence how the site looks to them. There are already several threads discussing possibilities how to change the new design and the way the site looks for all users (without using any personal modifications). Probably this question is most prominent: How can we visually differentiate MathOverflow from MathStackExchange within the constraints of the new design themes? But most of the other posts linked there seem to be related to the same topic.

---

¹For example, it was recently mentioned in chat: " For what is worth doing a CSS that, when loaded by Firefox, moves MO to the old color scheme is almost trivial. I already did so this evening in an attack of nostalgia :)" Or, as another example, I have seen that somebody uses a script which gives specific colors to tags of their choice. And there are also large collections of scripts such as The Stack Overflow Unofficial Patch (SOUP) - which seemed to be quite popular.

Answer 1

Here is the CSS I was talking about:

/* Unanswered questions box */
.status.unanswered, .status.unanswered .mini-counts, .status.unanswered strong {
     border: none;
     background-color: #833700;
     color: #FFF
}

/* Answered questions box */
.status.answered,.status.answered .mini-counts,.status.answered strong {
    border: none;
    background-color: #65be00;
    color:#FFF;
}

/* Answer-accepted questions box */
.status.answered-accepted,.status.answered-accepted .mini-counts,.status.answered-accepted strong {
    border: none;
    color:#FFF;
    background-color: #177d00;
}

/* Votecount box*/
.votes {
    background-color: #eee;
    border-radius: 3px; /* Let's make it with rounded corners too*/
}

/* Sidebar questions */
.show-votes .sidebar-linked .spacer>a:first-child .answer-votes, .show-votes .sidebar-related .spacer>a:first-child .answer-votes {
    background-color: #eff0f1;
    color: #3b4045;
}

/* Sidebar answer-accepted questions */
.show-votes .sidebar-linked .spacer>a:first-child .answer-votes.answered-accepted,.show-votes .sidebar-related .spacer>a:first-child .answer-votes.answered-accepted {
    background-color: #177d00;
    color: #FFF;
}

/* Background for accepted answers */
div.accepted-answer {
    background-color: #e0ffe0;
}

/* Blockquote colors (needed for contrast with the accepted answer background) */
blockquote {
    background-color:#dadada;
    border-left:2px solid #ffeb8e
}

/* Background on questions with watched tags in the question list */
.question-summary.tagged-interesting {
 background-color: #fff5deb3;
}

You can use any browser extension you like to automatically load it on mathoverflow.net. I use Stylus, but any of the many similar options should work.

I am happy to do small tweaks if requested, but I want to limit the actual number of changes to a minimum. In particular I will not change the fonts, because checking that those work for all screens is complicated.

Screenshots:

Answer 2

This proposal is similar to the solution of Denis Nardin just that the colors are similar to the new theme but still bring back a bit of the old flair:

.status.unanswered { 
    border: 1px solid transparent; 
    border-color: #9B764F; 
    background-color: #e6dcd3; 
    color: #36291b;
}

.status.unanswered .mini-counts, .status.unanswered .minicounts span { 
     color: #36291b; 
}

If you want to try out this version, install Greasemonkey, Tampermonkey or other apps like this and then install this simple script, which implements the css code from above.