5

How do i turn off the new skin? Its horrible, you cant even read the headings anymore, body text is sort of passable.

Who has time to make a user script that will actually, you know fix the design?

  • 2
    So long as they keep pretending fixed-size fonts and fixed-width containers that max out without updating their font size, measure, leading, and letterfit depending on whether we're talking display/titling fonts versus text/body fonts versus caption/tiny fonts as being "responsive", they still don't understand what responsiveness is supposed to be based on how real people really use the web on high-resolution screens these days. Until and unless they hire someone who truly understands how these affect typography, they're just wasting time and money cranking out ever-more-unhelpful mis-designs. – tchrist Dec 7 '18 at 20:01
  • 2
    Problem with the webpage is that its hardly responsive at all. It dont work on the phone well and it kinda works on a desktop. But the old one did both better, on phone and desktop. – joojaa Dec 7 '18 at 20:44
7

To get the Open Sans font back, add this as a user style. You can either use an extension, or your browser's built-in capabilities. Google will tell you how to do it.

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

html, body, h1, h2, h3, h4, p, a, ul, ol, li, input, textarea {
    font-family: 'Open Sans', sans !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    line-height: 1.5em;
}

#question-header .question-hyperlink {
    font-family: 'Open Sans', sans !important;
}

If you want the red colours back on your buttons, links, tabs, etc, add this:

.s-btn__primary,
.s-btn__filled,
input[type="submit"]:not(.s-btn),
input[type="button"]:not(.s-btn),
button:not(.s-btn),
.button,
a.button,
a.button:visited,
.btn,
.hero-box.double-panel .panel.white .btn {
    border-color: #b03340;
    box-shadow: none;
    background: #ea4a5a;
    color: white;
}

.s-btn__primary:hover,
.s-btn__filled:hover,
.s-btn__filled:active,
input[type="submit"]:not(.s-btn):hover,
input[type="button"]:not(.s-btn):hover,
button:not(.s-btn):hover,
.button:hover,
a.button:hover,
a.button:visited:hover,
.btn:hover,
input[type="submit"]:not(.s-btn):focus,
input[type="button"]:not(.s-btn):focus,
button:not(.s-btn):focus,
.button:focus,
a.button:focus,
a.button:visited:focus,
.btn:focus {
    border-color: #ea4a5a;
    box-shadow: none;
    background: #b03340;
    color: white !important;
}

.s-btn-group {
    margin-top: 10px;
    margin-bottom: 10px;
}

.s-btn__muted.s-btn__outlined,
.s-btn__muted.s-btn__outlined:focus,
.s-btn__muted.s-btn__outlined.is-selected {
    color: #2f3337;
    border-color: #adb3b9;
    box-shadow: none;
}

.s-btn__muted.s-btn__outlined.is-selected {
    background-color: #eeeff1;
}

a,
.s-link,
.started .mod-flair,
.started a:not(.started-link),
.topbar-dialog a,
.topbar-dialog .related-links a {
    color: #ea4a5a;
}

a:hover,
.s-link:hover,
a.s-link__visited:hover,
.s-link.s-link__visited:hover,
a:active,
.s-link:active,
a.s-link__visited:active,
.s-link.s-link__visited:active,
.started .mod-flair:hover,
.started a:not(.started-link):hover,
.started-link:hover,
#sidebar .community-bulletin .bulletin-item-content a:hover,
.topbar-dialog a:visited,
.topbar-dialog.review-dialog .modal-content li > a:visited,
.topbar-dialog .related-links a:visited,
.topbar-dialog.help-dialog a:visited,
.topbar-dialog.siteSwitcher-dialog a:visited,
.topbar-dialog .header .-right a {
    color: #b03340 !important;
}

.mod-flair {
    color: #ea4a5a;
}

.bounty-indicator-tab {
    background-color: #ea4a5a;
}

.s-badge__bounty {
    background-color: #ea4a5a;
}

#tabs a.youarehere:before,
.tabs a.youarehere:before {
    background-color: #ea4a5a;
}

.page-numbers.current {
    background-color: #ea4a5a;
}

.subtabs a.youarehere,
.filter a.youarehere,
.subtabs a.active,
.filter a.active {
    border-color: #ea4a5a;
}

.subtabs a.youarehere,
.filter a.youarehere,
.subtabs a.active,
.filter a.active,
.subtabs a:hover,
.filter a:hover,
.subtabs a.youarehere:hover,
.filter a.youarehere:hover,
.subtabs a.active:hover,
.filter a.active:hover {
    border-color: #eeeff1;
}

.top-bar .indicator-badge._important {
    background-color: #ea4a5a;
}

.top-bar .-secondary .-link._danger-indicator:after {
    background: #ea4a5a;
}

If you want to get rid of those silly borders everywhere:

.flush-left {
    border: 0;
}

.question-summary {
    padding: 15px 10px;
    border: 0;
    border-radius: 3px;
    margin-left: 8px;
}

.subheader {
    border: 0;
}

.dashboard-item {
    padding: 15px 0;
    border-bottom: 0;
}

#question-header {
    border: 0;
    padding-bottom: 15px;
}

.comments {
    border: 0;
}

ul.comments-list .comment > * {
    border: 0;
    padding: 10px 0;
}

If you want all of these shenanigans plus some extras: download the FF code here (for other uses, just delete the FF wrapper around the CSS)

Example of the homepage:

enter image description here
Full size

Example of the homepage with dark mode (external extension) turned on:

enter image description here
Full size

  • 2
    hero of the day... – Luciano Dec 12 '18 at 10:25
  • 4
    just the day? ^_^ – PieBie Dec 12 '18 at 10:57
  • 1
    I added support for uls and ols. – Vincent Dec 12 '18 at 12:29
  • 1
    I found this question useful for trying this out on Chrome. Have you tried using this custom styling on other sites around the network? If you find it generally useful, you might consider posting to Meta Stack Exchange so more people can benefit. (That said, I found the lack of horizontal rules in familiar places disorienting. Stockholm syndrome, I suppose. ;-) – Jon Ericson Dec 12 '18 at 20:51
  • 1
    Hi Jon, thanks for the follow-up. I mentioned in chat that I indeed used Stylus. But the how is not really relevant for this answer. // I did not try it on different SE sites. Since a large part of this is bringing back our custom red colour, I don't think other sites will find much use in it. A possibility would be to use CSS variables to parametrise the colour, but support is patchy. – PieBie Dec 13 '18 at 8:17
  • 1
    Also, I'm the first to admit getting rid of the borders was a personal preference more than a usability concern. That said, they do make the design very heavy. – PieBie Dec 13 '18 at 8:18
0

YOU DON'T

It's here to stay 😿

  • 1
    Thts fine the site operators can do whatever they want but thats not stopping us form making a theme that actually works. – joojaa Dec 7 '18 at 16:22

You must log in to answer this question.

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