24
$\begingroup$

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.1

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.


1For 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.

$\endgroup$
2
  • $\begingroup$ I was a bit unsure which tags to choose for this question. The tag (color-scheme) seems to be close to CSS's. I have created (user-scripts) tag - tag with this or similar name exists on some other metas, like Meta Stack Exchange, Meta Mi Yodeya, Meta Mathematics. $\endgroup$ Dec 14, 2018 at 10:32
  • 1
    $\begingroup$ Recently I found a userstyle on Meta Drupal to return the layout to the "old feel". I believe the userstyle still needs to be adjusted to suit this site's theme. $\endgroup$
    – Andrew T.
    Dec 15, 2018 at 17:50

2 Answers 2

21
$\begingroup$

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: Main page

Answer with sidebar

Accepted answer with sidebar

$\endgroup$
12
  • 2
    $\begingroup$ This is great! Thanks! $\endgroup$ Dec 17, 2018 at 13:09
  • 4
    $\begingroup$ Wow, it's amazing how much difference just a little color can make to the appearance of the site! $\endgroup$
    – Tim Campion Mod
    Dec 17, 2018 at 18:54
  • 4
    $\begingroup$ Yeah, I'd like to point out how small this change is. Literally just a few colors in strategic places. $\endgroup$ Dec 17, 2018 at 19:20
  • $\begingroup$ Is is possible to edit to get the question highlighting on the front page for watched tags? $\endgroup$
    – David Roberts Mod
    Dec 18, 2018 at 0:53
  • $\begingroup$ @DavidRoberts I never changed it, so you still have question highlighting. It is true that the color is very light, so you might want to replace it with something else. In that case, yes it is possible, but which color (hex code, please) would you like to use? $\endgroup$ Dec 18, 2018 at 6:52
  • $\begingroup$ To clarify: the current "highlighted" background is #fffbec, while the background of other questions is white, #fff. $\endgroup$ Dec 18, 2018 at 7:14
  • 1
    $\begingroup$ Last comment and then I'll shut up: the old color used to be #fff5de, but I cannot literally see any improvement with it, so I don't see any reason to change it. If people want it though I can easily add it. $\endgroup$ Dec 18, 2018 at 8:48
  • $\begingroup$ Aaand, I went on and added it anyway. $\endgroup$ Dec 18, 2018 at 9:02
  • 1
    $\begingroup$ @DenisNardin thanks, I couldn't see any question highlighting because there happened to be no such questions on the page at the time I complained! $\endgroup$
    – David Roberts Mod
    Dec 18, 2018 at 11:26
  • 1
    $\begingroup$ Great answer. And to remove the rounded corners, one could add: * { border-radius: 0px !important; }. $\endgroup$
    – jeq
    Dec 18, 2018 at 16:59
  • 1
    $\begingroup$ @jeq Thanks! I'm not sure if this is precisely what you meant, but I simply added your code snippet to the very end of Denis' file and it worked! $\endgroup$
    – Tim Campion Mod
    Dec 18, 2018 at 17:44
  • 3
    $\begingroup$ @jeq That removes rounded corners everywhere. To remove them only on the boxes in the question list it suffices to add 'border-radius: 0px ! important;' in all the corresponding sections $\endgroup$ Dec 18, 2018 at 18:03
3
$\begingroup$

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:

enter image description here

.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.

$\endgroup$

You must log in to answer this question.

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