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$
  • $\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$ – Martin Sleziak Dec 14 '18 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 '18 at 17:50
20
$\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$
  • 2
    $\begingroup$ This is great! Thanks! $\endgroup$ – Harry Gindi Dec 17 '18 at 13:09
  • 3
    $\begingroup$ Wow, it's amazing how much difference just a little color can make to the appearance of the site! $\endgroup$ – Tim Campion Dec 17 '18 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$ – Denis Nardin Dec 17 '18 at 19:20
  • $\begingroup$ Is is possible to edit to get the question highlighting on the front page for watched tags? $\endgroup$ – David Roberts Dec 18 '18 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$ – Denis Nardin Dec 18 '18 at 6:52
  • $\begingroup$ To clarify: the current "highlighted" background is #fffbec, while the background of other questions is white, #fff. $\endgroup$ – Denis Nardin Dec 18 '18 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$ – Denis Nardin Dec 18 '18 at 8:48
  • $\begingroup$ Aaand, I went on and added it anyway. $\endgroup$ – Denis Nardin Dec 18 '18 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 Dec 18 '18 at 11:26
  • 1
    $\begingroup$ Great answer. And to remove the rounded corners, one could add: * { border-radius: 0px !important; }. $\endgroup$ – jeq Dec 18 '18 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 Dec 18 '18 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$ – Denis Nardin Dec 18 '18 at 18:03
4
$\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 .