A collection of user scripts to make the main site look a bit better again, after the new design has gone live on August 3, 2018.

The scripts can be used e.g. with

  • Tampermonkey (Chrome)
  • Greasemonkey (Firefox)

A fix for recent versions of Firefox and GreaseMonkey (4.x) by @PaulGaborit.

A userContent.css example by @Skillmon.

List of answers

  • 3
    The menu bar on the left is really annoying. Hopefully someone will come up with a way to get rid of that. – Peter Grill Aug 9 at 20:03
  • 5
    @PeterGrill You can disable it in your preferences. – samcarter Aug 9 at 20:06
  • Thanks. Finally found a useful feature in the new design. – Peter Grill Aug 9 at 20:09
  • 5
    @PeterGrill I found anther very useful feature: The necessity to fix it made me learn a lot about .css files, javascript and user scripts in the last few hours! – samcarter Aug 9 at 20:14
  • @samcarter But then I can't find the navigation at all. I liked it to be somewhere! Really reluctant to run Greasemonkey .... – cfr Aug 10 at 0:05
  • Interesting to see users 'destroying' what the developers did.... – Sigur Aug 10 at 0:07
  • 3
    @cfr You mean if you disable the left bar? Then the navigation can be accessed by clicking on the 3 horizontal lines at the top left: chat.stackexchange.com/transcript/message/46130862#46130862 – samcarter Aug 10 at 0:07
  • @Sigur Not sure if there is anything left which can be destroyed ... – samcarter Aug 10 at 0:12
  • 7
    @samcarter, that is true. I should say people trying to fix what designers destroyed... lol – Sigur Aug 10 at 0:15
  • 2
    Thanks for asking this question, which has led to very useful answers. Does anyone know how to mute the new green? In the question list and the lists of related questions, instead of the rather aggressive #5fba7d, we used to have #4c9067 marking the number of answers a question has and whether there’s an accepted answer. – Thérèse Aug 10 at 2:06
  • 3
    I use the Stylus extension myself to add css to a website. (Stylus is a fork of Stylish, created after it turned out that Stylish was snooping on people without their knowledge or consent.) Greasemonkey is for adding javascript, isn't it? (I haven't looked at Tampermonkey.) And that seems a roundabout way to add css. – Harald Hanche-Olsen Aug 10 at 10:50
  • 1
    @Thérèse I added a script, see tex.meta.stackexchange.com/a/7813/36296 – samcarter Aug 10 at 13:02
  • 13
    Dear fellow TeX.SE users: I deeply appreciate your attempts to restore a modicum of usability and user-friendliness to this site. While the various proposed solutions may work well for some web browsers, they don’t seem to be all that usable on Safari on an iPhone6. And, while I can install the various scripts on my Mac laptop at home, I’m not allowed to do install any such scripts on my computer at work. In sum: the first-best solution continues to be this: Di all you can to convince the powers-that-be that they have to reverse most or all of their wretched design decisions. – Mico Aug 10 at 13:40
  • 2
    I reordered the answer list to be alphabetically sorted (I just couldn't stand this mess :) – Skillmon Aug 11 at 18:37
  • 1
    You may want to check out user styles instead of scripts. (Just stay clear of Stylish; I use Stylus instead.) – Raphael Aug 13 at 14:13

25 Answers 25

While I wholeheartedly agree with this attempt, I refuse to do anything about it.

Any site that has this much traffic should be able to hire proper UX experts and get rid of this mind-numbing stupid design. And I would like to emphasize that I choose my words very carefully. Anybody knows me over the years know that I really don't target any individuals but this:

This is an incredibly bad design that has all the don't-do's of web design. Whoever with that diamond next to their nickname reading this; only either a cheap replacement or a really stupid team lead can go against years of design experience. Just google 100 busiest sites and look at how many of them has still 3 column design.

Unbelievable that you have this many experts, and you end up with this.

  • 11
    You smell really angry. ;-) – marmot Aug 9 at 23:54
  • 11
    @marmot This is my virtual anger. I don't cash out my real anger to online sources :). But this can't go unnoticed. When people ask trivial questions over SO, all flock and bash the noobs but when it comes to their own design suddenly everything is intern-level and just subpar. – percusse Aug 10 at 6:04
  • 2
    Well, there are sayings of the type "The kids of a shoemaker walk barefooted." Unfortunately, these sayings contain a lot of truth. ;-) – marmot Aug 10 at 6:06
  • 4
    @marmot They can just ask Graphical design and User Experience SE networks and probably folks over there can simply do it better. – percusse Aug 10 at 6:08
  • I agree with all that, and I am certainly not defending them. But is also true that some medical doctors smoke. ;-) – marmot Aug 10 at 6:10
  • 1
    I think Facebook is in the 100 busiest sites? – E.P. Aug 11 at 19:23
  • @E.P. I left some comments for your kind who would ignore the statistics here with an example tex.meta.stackexchange.com/questions/7781/… – percusse Aug 11 at 23:52
  • 6
    @percusse I rather agree with you that the redesign is a step backwards and that the unwillingness of SE to step up to its promises to listen to users, particularly in a site where the expert users really are the irreplaceable experts on the topic, is an enormous red warning light. However, there's nonetheless a fair deal of hyperventilation going on from the userbase, and I don't think it furthers the cause at all (rather the opposite) and as a sympathetic external observer I would prompt you to take a more strategic approach to this issue. – E.P. Aug 12 at 8:22
  • 4
    However, since it seems that you're currently in a "you're with us or against us" phase (and if you think you're not - take a deep breath and re-read your comments) where anyone who only agrees with you 95% is a target for abusive "users like yourself" comments, I'm going to hold off until you're receptive to constructive criticism. – E.P. Aug 12 at 8:28
  • @E.P. Well maybe also you should wait until you understand the context of the criticisim and then decide to engage. Read your own comment and then tell me you are not cherrypicking. It cuts both ways. I'm tired of narrow-focused sentence-pickling arguments on this site.And you have provided exactly that. Should we go through the remaining 99 ones? Should we discuss why I've left the comment I've linked above predicting this would happen? – percusse Aug 12 at 10:52
  • I'm sorry but I have been discussing the review system, the design, the lack of support this and that for a few years now. So it's up to you first asking "Am I really reducing the whole argument to a single detail or not". Then you have the right to accuse me of "us and them"ing. – percusse Aug 12 at 10:54
  • @E.P. True. Actually, not true, Facebook has got 4 columns. However, Facebook is not about the contents anymore :) So if SE wants not to be about the contents, they can have that, but without me. – boycott.se - yo' Aug 13 at 14:46
  • I'm still waiting for the remaining 99 sites' highly esteemed and constructive analysis. – percusse Aug 13 at 18:02
  • 1
    @marmot I would summarise this new design's philosophy as "computer monitors get bigger and have higher resolution these days, so we can waste more of the space and get away with it". But hey, if you make SE ugly enough, I'm not going to pick a fight trying to fix it, I'll just go some place else. – alephzero Aug 14 at 21:58
  • @alephzero I was never defending the Powers... did I? – marmot Aug 14 at 22:00

Restore {Tag} braces

// ==UserScript==
// @name        TeX SE, braced tags
// @match       *://tex.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
     .post-tag::before {
        content: "{";
     }
     .post-tag::after {
        content: "}";
     }
     .post-tag {
        border-width: 0pt !important;
        color: #444 !important;
        background-color: transparent !important;
        padding: 0pt !important;
     }
` );

enter image description here

Restore the old voting icons

// ==UserScript==
// @name        TeX SE, legacy vote icons
// @match       *://tex.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
     .vote-accepted-on, .vote-accepted-off, .vote-up-on, .vote-up-off, .vote-down-on, .vote-down-off, .star-on, .star-off {
        background-image: url("http://cdn.sstatic.net/Sites/tex/img/sprites.svg") !important;
     }
     .vote-up-on, .vote-up-off, .vote-down-on, .vote-down-off {
        height: 48px !important;
     }
` );

enter image description here

  • 1
    Oh, this is great! – samcarter Aug 9 at 16:57
  • 1
    Doesn't seem to work in FF 61 (Mac), with Greasemonkey 4.6. – Alan Munn Aug 9 at 17:31
  • Would you happen to know how to replace the [] at the top of e.g. tex.stackexchange.com/questions/tagged/beamer with {} as well? i.stack.imgur.com/r1EAk.png – samcarter Aug 10 at 13:59
  • This can be done by adding Array.from(document.getElementsByTagName('h1'), h1 => h1.textContent = h1.textContent.replace(/(Questions tagged )\[(.*)\]/, "$1{$2}")) but this has to run after the document is loaded, so @run-at document-end. But then you see a flicker of the original state when you open the document. – Marcel Krüger Aug 10 at 18:13
  • @MarcelKrüger Oh thank you! That works very well! – samcarter Aug 10 at 18:59
  • A small warning: this gives bad voting icons on the mobile version of the site. – Ulrike Fischer Aug 15 at 13:19

Making the white background less white

// ==UserScript==
// @name        _TeX SE, Swap background colour
// @match       *://tex.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
     #content {
        background-color:#fefef6  !important;
     }
` );

enter image description here

(the exact colour can be adjusted to fit your personal taste, at the moment it matches the background colour outsides)

  • 3
    +1 This is great! I've gone for the color #fefefa. This makes the content area slightly lighter than the main background color, as it was before. – Milo Aug 9 at 16:57
  • 2
    Doesn't seem to work in FF 61 (Mac), with Greasemonkey 4.6. – Alan Munn Aug 9 at 17:31
  • @AlanMunn I have a similar problem with FF 61 (Win10), just downloading Chrome to see if it works there. ... Yep, works flawless with Tampermonkey on Chrome and Firefox, but not with Greasemonkey on FF. – moewe Aug 9 at 19:35
  • @AlanMunn see tex.meta.stackexchange.com/a/7811/36296 for a solution with newer greasemonkey – samcarter Aug 10 at 12:24
  • @moewe see previous comment – samcarter Aug 10 at 12:25
  • I used Violentmonkey (not that I particularly like the name) and after Harald Hanche-Olsen's comment above I looked into Stylus and "ported" the styles to that format. Seems to work fine so far. – moewe Aug 10 at 12:26

Update: The style has been fixed in the "vanilla" website. This change seems no longer necessary.


Restore the old code appearance

// ==UserScript==
// @name        TeX SE, code display
// @match       *://tex.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
     .kwd, .dec {
         color: #894a16  !important;
     }
     .pun {
         color: #c11c21  !important;
     }
     .prettyprint {
         line-height: 1.5  !important;
     }
` );

This is an approximate attempt based on egreg's screenshot in the linked thread.

Going from

current

to

updated

  • +1 This is superb! – Milo Aug 9 at 22:57

Disable left hand menu side bar

Note this is not a user script, this feature is built into the StackExchange website.

This has been mentioned in the comments, but just for reference here are the full steps outlining how to disable the left hand menu side bar.

The new default layout

enter image description here

To disable this go to 'Edit Profile & Settings' - you can find this by going to your TeX.SE user profile page. Note that from your meta user profile page it appears as just 'Settings'

Under 'Site Settings' click 'Preferences'

Then in the 'Navigation' section you will see 'Hide left navigation' and can activate this setting.

enter image description here

The result

enter image description here

Note that you can access the menu by clicking the three horizontal lines which now appear to the left of the StackExchange logo.

enter image description here

  • 1
    This works. Amusingly, the check box doesn't get checked – it disappears, so you won't be able to undo this action. Not that I mind. 8-) – Harald Hanche-Olsen Aug 10 at 10:26
  • @HaraldHanche-Olsen Curious! What OS/web browser are you using? – Milo Aug 10 at 10:34
  • 1
    Vivaldi on macOS. (Actually, on the Mojave beta, if that matters.) It seems that all checked boxes disappear, not just this one. Oh, when I look with the inspector, I see the element is there. Must be some weird css thing that hides it. Investigating further … – Harald Hanche-Olsen Aug 10 at 10:35
  • Hmm. There is a ton of css, but I see nothing that could explain this. When I mouse over the element in the inspector, the area where the button should be is highlighted. But it's not responsive to clicking, nor is there anything visible there. – Harald Hanche-Olsen Aug 10 at 10:43

Remove blue background from the post owner

For those of you who aren't fans of the new blue colour.

enter image description here

enter image description here

You can make it transparent

// ==UserScript==
// @name        TeX SE, remove post owner background
// @match       *://tex.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
     .owner {
        background-color: transparent !important;
     }
` );

Or you can change it to whatever colour you want. Using #f7f0de returns it to how it used to be. Note that I have my content area background colour set to #fefefa as shown in Making the white background less white by @samcarter.

enter image description here

GM_addStyle ( `
     .owner {
        background-color: #f7f0de !important;
     }
` );

Shrinking/moving the right hand sidebar

  1. When the browser window is really narrow, the right sidebar disappears. That is good. And when it it really wide, it doesn't take up too much space, I think. But at intermediate widths, it is too dominating, taking space away from the main content.

  2. Why do we need the sidebar on a question page, anyhow? Edit: Because we want to have the “Related” module. See below.

  3. (New) So instead, on a question page, we reduce the sidebar to only the “Related” module, and move it from the sidebar position to sit underneath the mainbar.

The following can be imported directly into Stylus using the Import button. The first part (above the blank line) fix #1, and the rest fixes #3.

@-moz-document domain("stackexchange.com") {
#sidebar { max-width: 25%; }
#mainbar { min-width: calc(75% - 24px); }

body.question-page div#mainbar { width: 100%; }
body.question-page div#sidebar > :not(.sidebar-related) { display:none }
body.question-page div#sidebar { float: none; clear: both; width: 100%; max-width: 100%; }
}

Adjust the percentages to taste, of course.

Equivalent code for Tampermonkey/Greasemonkey - added by @Milo

// ==UserScript==
// @name        TeX SE, shrink right hand sidebar
// @match       *://tex.stackexchange.com/*
// @match       *://tex.meta.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
     #sidebar {
             max-width: 25% ;
      }
     #mainbar {
             min-width: calc(75% - 24px);
      }
     .question-page #sidebar {
             display: none;
      }
     .question-page #mainbar {
             width: 100%;
      }

     body.question-page div#mainbar {
             width: 100%;
      }
     body.question-page div#sidebar > :not(.sidebar-related) {
             display:none
      }
     body.question-page div#sidebar {
             float: none;
             clear: both;
             width: 100%;
             max-width: 100%;
      }
   ` );
  • @Milo I added to the answer, also editing your contribution in the process. I hope I got it right. – Harald Hanche-Olsen Aug 11 at 11:24
  • 1
    Yup, the script works well. While I agree that the Q&A pages look a lot nicer without the right hand side bar (I like the wider look), the only issue is we lose the 'Related Questions' list.. I often find this list useful when browsing questions and answers. I wonder, is there a way to simply increase the size of the whole content area? I've had a play around with some css but can't seem to find a way to make it wider than 1100px (or whatever its set to... I'm not 100% sure). – Milo Aug 11 at 15:06
  • @Milo Ooh, I hadn't considered the Related Questions. My bad. (I think someone withdrew their upvote, perhaps because of this?) Well, both body>.container and #content have set max-width: 110px in the site css. You'd have to override them both. – Harald Hanche-Olsen Aug 11 at 15:12
  • Thanks for the tip! I've added an answer which makes the content area wider. I really like it! – Milo Aug 11 at 15:43
  • 1
    @Milo I put the Related module back, but now it's at the bottom of the question page. And the rest of the sidebar, gone. – Harald Hanche-Olsen Aug 18 at 20:56

GreaseMonkey 4.x example

With recent versions of Firefox and GreaseMonkey (4.x), the GM_addStyle function is no longer provided.

Here is my script with a new GM_addStyle function (new constraint: just one CSS rule by call):

// ==UserScript==
// @name        TeX SE, my modifications
// @match       *://tex.stackexchange.com/*
// @run-at      document-end
// ==/UserScript==

function GM_addStyle(css) {
  const style = document.getElementById("GM_addStylePG") || (function() {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.id = "GM_addStylePG";
    document.getElementsByTagName('head')[0].appendChild(style);
    return style;
  })();
  // console.log(css);
  const sheet = style.sheet;
  // console.log(sheet);
  sheet.insertRule(css, sheet.cssRules.length);
}


GM_addStyle ( `
     .post-tag::before {
        content: "{";
     }
`);

GM_addStyle ( `
     .post-tag::after {
        content: "}";
     }
`);

GM_addStyle ( `
     .post-tag {
        border-width: 0pt !important;
        color: #444 !important;
        background-color: transparent !important;
        padding: 0pt !important;
     }
` );

GM_addStyle ( `
     .kwd, .dec {
         color: #894a16  !important;
     }
`);

GM_addStyle ( `
     .pun {
         color: #c11c21  !important;
     }
`);

GM_addStyle ( `
     .prettyprint {
         line-height: 1.5  !important;
     }
` );

Turn boxed navigation into tabs

Inspired by Remove borders around boxes, this code tries to turn the ugly boxes into the tabs found elsewhere on this site.

.tabs-filter.s-btn-group .s-btn {
  border-width: 1px 1px 0 1px;
  border-color: transparent;
  border-radius: 0;
}
.tabs-filter.s-btn-group .s-btn:focus {
  box-shadow: none;
}
.tabs-filter.s-btn-group a:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
}
.tabs-filter.s-btn-group a.youarehere:after {
  content: "";
  position: absolute;
  top: 30px;
  left: 0px;
  right: 0px;
  height: 2px;
  background-color: #fefefb;
}
.tabs-filter.s-btn-group a:hover {
  background-color: hsl(46, 42%, 97%);
  border-color: hsl(46, 42%, 95%);
}
.tabs-filter.s-btn-group a:focus {
  background-color: hsl(46, 42%, 80%);
  border-color: rgba(228, 230, 232, 0.25);
}
.tabs-filter.s-btn-group a.youarehere {
  font-weight: 600;
  background-color: transparent;
  border-color: #e4e6e8;
}
.tabs-filter.s-btn-group a.youarehere:hover {
  background-color: hsl(46, 42%, 90%);
  /*#efe9d7*/
}
.tabs-filter.s-btn-group a.youarehere:focus {
  background-color: hsl(46, 42%, 70%);
}
.tabs-filter.s-btn-group a.youarehere:before {
  background-color: #f69c55
}
.tabs-filter.s-btn-group a.youarehere:hover:before {
  background-color: #f48024
}
.tabs-filter.s-btn-group a.youarehere:hover:after {
  background-color: hsl(46, 42%, 90%);
}
.tabs-filter.s-btn-group a.youarehere:focus:after {
  background-color: hsl(46, 42%, 70%);
}
.mb16 {
  margin-bottom: 0px !important;
}

edit: more specific CSS selectors for fewer !importants and fewer possible seide-effects. Hack to integrate the tab seamlessly into the border below.

Before

navigation before: with boxes

After

navigation after: with tabs

  • That is a really good idea! – samcarter Aug 11 at 16:51
  • 3
    I love it! Way better than what I've come up with :) – Skillmon Aug 11 at 18:29

Change the image

I managed to exchange the background image with this:

.site-header--container{
background-image: url(https://i.stack.imgur.com/9tasx.png)  !important;
background-size: 5% !important;
}

(the size of 5% must be adapted to the picture you use)

enter image description here

Now I only need to make a good image with lots of ducks and bears ;-)


Some possible images to choose from:

https://i.stack.imgur.com/1d1sg.png enter image description here

https://i.stack.imgur.com/A99lA.png enter image description here

https://i.stack.imgur.com/jkXH3.png enter image description here

https://i.stack.imgur.com/981KO.png enter image description here

Original image for own modification: https://cdn.sstatic.net/Sites/tex/img/bg-header-ill.png enter image description here

  • 3
    I'd like it to include some killer rabbits. – Skillmon Aug 9 at 18:59

Bring back the top bar links

enter image description here

From Top Navigation Bar script on stackapps.com. In particular see the modified solution by @samcarter - https://stackapps.com/a/7974

Replacing TeX logo

I think the new TeX logo is too bright. The following script replaced it with a tuned down version (based on the fantastic answer of Brock Adams).

// ==UserScript==
// @name        StackExchange TEX, replace logo
// @match       *://tex.stackexchange.com/*
// @require     https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
    .site-header--link > img {
        width:  135px;  /* Sizes taken from default/native logo*/
        height: 47px;
    }
` );

document.addEventListener ("DOMContentLoaded", tweakLogo);

function tweakLogo () {
    var siteLogo = $(".site-header--link");
    if (siteLogo.length === 0) {
        console.error ("TRB userscript: Site logo not found. Page structure changed?");
        return;
    }
    //- Change image
    siteLogo.find ("img").attr ("src", "//i.stack.imgur.com/nwd7Y.png");
}

enter image description here

  • can you make the braces around the logo just a bit darker? although i know there's a problem with my monitor, i can't see them at all. – barbara beeton Aug 10 at 17:55
  • 1
    @barbarabeeton Can you try with this image: i.stack.imgur.com/3sgw7.png ? – samcarter Aug 10 at 18:08
  • yes, i can see that. (misses the nice outlining that once was there, but a lot better than an ungrouped \TeX.) – barbara beeton Aug 10 at 18:12
  • @barbarabeeton You could also try the old logo cdn.sstatic.net/Sites/tex/img/logo.png , unfortunately I could not find a version without background. Also the size might need some adjusting. – samcarter Aug 10 at 18:19
  • thanks. i'll see what i can get away with under the local rules. – barbara beeton Aug 10 at 18:34
  • @barbarabeeton I'll keep my fingers crossed in the hope you'll be able to see the {} again! – samcarter Aug 10 at 18:37

Declutter the right hand side bar

Here is a proposal which declutters the right hand side bar, which I often find is filled with things I don't want to see - e.g. the newsletter sign up, the blog/meta sidebar and hot network questions.

Home page - before and after

enter image description here

Question page - before and after

enter image description here

Code

// ==UserScript==
// @name       TeX SE, declutter right hand sidebar
// @match      *://tex.stackexchange.com/*
// @match      *://tex.meta.stackexchange.com/*
// ==/UserScript==

var bar = document.getElementsByClassName('module community-bulletin')
for (var i = 0; i < bar.length; i ++) {
    bar[i].style.display = 'none';
}

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

(function(){
    var bar = document.getElementById('newsletter-ad');
    if (bar) bar.style.display="none";
})();

(function(){
    var bar = document.getElementById('chat-feature');
    if (bar) bar.style.display="none";
})();

(function(){
    var bar = document.getElementById('feed-link');
    if (bar) bar.style.display="none";
})();

Adjusting the fonts

This is how the fonts in the old site used to look:

The old site

enter image description here

Note that the font used for the question titles was bigger beforehand. This point has been raised by @Skillmon in the post Question titles from TeX new site theme is live - "new titles look like they're squeezed".

The new 'squeezed' question titles

enter image description here

Increasing the font-size of the questions improves this somewhat.

enter image description here

However, the font of the body text (e.g. as seen in the question excerpt and tags) is not what it used to be. I leave this as an open problem for others to try and solve. Please do improve this code to try and return the look and feel of the text as it used to be.

// ==UserScript==
// @name        TeX SE, adjusting fonts
// @match       *://tex.stackexchange.com/*
// @match       *://tex.meta.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
.question-hyperlink {
    font-size: 18px;
     }
` );
  • This messes up the font sizes in the "Tools" review page, thus some context is needed, e.g. h3 a.question-hyperlink { ... }. – Heiko Oberdiek Aug 12 at 20:29

userContent.css example

Changing the site without any addons in Firefox (guaranteed to work on Firefox 61.0.2 but should work on other versions, too):

In Linux create a file ~/.mozilla/firefox/<your-profile-id>/chrome/userContent.css (I do not know the correct folder on Windows). In this file you can specify rules for specific domains with

@-moz-document domain(tex.stackexchange.com), domain(tex.meta.stackexchange.com) {
    /* your rules here */
}

On Windows you can find the correct folder to put the userContent.css into with https://superuser.com/a/319322/393639 (thanks @BMWurm for sharing that link).

In it you can specify any css content (I don't think that functions work). Changes to that file require a Firefox restart to take effect.

E.g. my current file looks like this:

@-moz-document domain(tex.stackexchange.com), domain(tex.meta.stackexchange.com) {
    .post-tag::before { content:"{"; }
    .post-tag::after { content:"}"; }
    .post-tag {
        border-width:0pt !important;
        color:#444 !important;
        background-color:transparent !important;
        padding:0pt !important;
    }
    #sidebar {
        max-width:20% !important;
    }
    .module.community-bulletin{
        background-color:#fdfbed !important;
    }
    #sidebar .related a.question-hyperlink{font-size:12px !important;}
    #mainbar { min-width:77.5% !important; }
    .question-hyperlink {
        font-size:16px !important;
        font-family:'DejaVu Serif' !important;
    }
    .s-btn {
        border-style:none !important;
        border-radius:0px !important;
    }
    .kwd, .dec {
        color:#894a16  !important;
    }
    .pun {
        color:#c11c21  !important;
    }
    .prettyprint {
        line-height:1.5  !important;
    }
    .vote-accepted-on, .vote-accepted-off, .vote-up-on, .vote-up-off, .vote-down-on, .vote-down-off, .star-on, .star-off {
        background-image:url("http://cdn.sstatic.net/Sites/tex/img/sprites.svg") !important;
    }
    .vote-up-on, .vote-up-off, .vote-down-on, .vote-down-off {
        height:48px !important;
    }
}

Results with my file:

enter image description here

Credits for all those changes go to the other answers in this thread, I just tweaked some of them. Also @William provided

#sidebar .related a.question-hyperlink{font-size:12px !important;}

Which lets you choose a different font for the sidebar's community bulletin.

  • 1
    How to find/create the correct folder on Windows to put the css file in: superuser.com/a/319322/393639 – BMWurm Aug 13 at 13:55
  • @BMWurm thank you very much! I put this information into my answer. – Skillmon Aug 13 at 13:59

Suppress "Watched Tags" and "Ignored Tags"

#sidebar div.module.js-tag-preferences-container {
    display:none !important;
}

(No user-script code around it, I'm sure you can add it if you need it)

Changing colour of questions with accepted answers

The following script changes the colour of this green square

enter image description here

// ==UserScript==
// @name        StackExchange TEX, Swap accept square
// @match       *://tex.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
     .answered-accepted{
          background-color:#4c9067  !important;
     }
` );
  • 1
    I used a color with transparancy: rgba(76,144,118,0.3) . – Ulrike Fischer Aug 15 at 20:23
  • @UlrikeFischer Good choice! This would solve @ cfr's concerns about them being to noticeable. – samcarter Aug 15 at 20:32

Remove borders around boxes

Motivated by @Skillmon posting about Boxes around everything in TeX new site theme is live, this is a script to remove the border around the 'Active', 'Featured', 'Hot', 'Week', 'Month' buttons.

Before

enter image description here

After

enter image description here

Code - with thanks to @UlrikeFischer

Updated with border-radius set to 0px, so the rounded corners go as well, as these have no relevance once the border is gone.

// ==UserScript==
// @name        TeX SE, remove borders
// @match       *://tex.stackexchange.com/*
// @match       *://tex.meta.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
    .s-btn {
        border-style: none !important;
        border-radius: 0px !important;
      }
` );

Make the content area wider

One of the big complaints about the new design has been about the width of the main content area. As @DavidCarlisle remarks - "full screen the question/answer posts are still cramped with space lost to the more or less useless left bar and apparently completely dead space to the left of the left sidebar". See Width of main content from TeX new site theme is live.

Here is a way to increase the width of the content area. (with thanks to @HaraldHanche-Olsen and @Skillmon)

You can adjust the min-width percentage accordingly. Note that 100% would make the content area stretch 'edge-to-edge' at full screen.

// ==UserScript==
// @name        TeX SE, increase width of content area
// @match       *://tex.stackexchange.com/*
// @match       *://tex.meta.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
     .container {
        min-width: 90% !important;
     }
     #content {
        min-width: 90% !important;
     }
` );

enter image description here

enter image description here

  • Wouldn't percentages be better than fixed values? (not all of us have the same resolution and not all of us use firefox fullscreen) – Skillmon Aug 11 at 15:28
  • @Skillmon Yup! Good point! I've updated the post – Milo Aug 11 at 15:33
  • @Skillmon Actually... I'm not satisfied with what I've come up with... It doesn't actually scale properly when you shrink the window. – Milo Aug 11 at 15:46
  • @Skillmon Ah, I think changing it from max-width to min-width does the trick – Milo Aug 11 at 15:49

Disable responsiveness

If you don't like the responsiveness which squishes the interesting main column first while displaying left and right columns at full width, there are good news: it can be disabled with a link hidden at the very bottom of the page:

enter image description here

Making the community bulletin less yellowish

// ==UserScript==
// @name        StackExchange TEX, Swap Bulletin Color
// @match       *://tex.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `

     .module.community-bulletin{
           background-color:#fdfbed !important;
     }

` );

enter image description here

Centre the TeX logo

div.site-header--container {
    justify-content:center !important;
}

enter image description here

Change the colour of the items in 'Active', 'Featured', 'Hot', 'Week', 'Month' buttons.

The following changes the colour of the active element in that top right nav bar (the ugly boxed one) to the same as "Ask Question" (I'm somewhat unhappy with that colour, but didn't manage to come up with a warm, beauty, fitting colour):

/* colour of selected */
.s-btn.is-selected {
    background-color: hsl(358, 47%, 42%) !important;
    color:white !important;
}
/* colour of hover */
.s-btn:hover {
    background-color: hsl(358, 47%, 84%) !important;
}
/* colour of the new elements counter (this colour choice is particularly bad, find something better! */
.bounty-indicator-tab{background:hsl(27, 53%, 38%) !important;}

enter image description here

(Note that in my picture below the ugly borders are removed thanks to @Milo and @UlrikeFischer)

Recreating the old header

My humble attempt to recreate the former page header. It is not finished yet, but @Milo asked for it (because it was in my screenshots). Feel free to edit the answer if you manage to get closer to the original page header.

So here are my current div.site-header--container settings:

div.site-header--container {
    justify-content:center !important;
    height:140px !important;
    background-image: url(https://i.stack.imgur.com/1otKE.png) !important;
    background-position:left top !important;
    background-size: 100% !important;
}

Current look:

enter image description here

  • +1 I've scaled up the size of the {TeX} logo as well :) Scaled up the default size by a factor of 1.4 using .site-header--link > img { width: 189px; height: 65.8px; } – Milo Aug 11 at 17:13
  • @Milo good idea! – Skillmon Aug 11 at 18:28
  • @Milo sadly it looks a slight bit off centre (with and without enlarging the logo), as the picture isn't properly centred. – Skillmon Aug 11 at 18:31
  • This is true... If only this was TikZ, then.. [xshift=1cm] would probably do the trick! ;) – Milo Aug 11 at 18:34
  • @Milo there is the position:relative key, but I don't think it works there (I tried it with the logo at first, but everything I tried failed except the justify-content:center approach). – Skillmon Aug 11 at 18:41

Badge icons

To get back the previous badge icons

  .badge1, .badge2, .badge3 {
     background-image: url("http://cdn.sstatic.net/Sites/tex/img/sprites.svg") !important;
  }

Or if the normal icons are too boring, they can be replaced by ducks:

  .badge1, .badge2, .badge3 {
     background-image: url("https://raw.githubusercontent.com/samcarter/shared/master/TeXse/sprites.svg?sanitize=true") !important;
  }

enter image description here

You must log in to answer this question.

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