# Make TeX.SX look nice again!

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.

• 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 '18 at 20:03
• @PeterGrill You can disable it in your preferences. – user36296 Aug 9 '18 at 20:06
• Thanks. Finally found a useful feature in the new design. – Peter Grill Aug 9 '18 at 20:09
• @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! – user36296 Aug 9 '18 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 '18 at 0:05
• Interesting to see users 'destroying' what the developers did.... – Sigur Aug 10 '18 at 0:07
• @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 – user36296 Aug 10 '18 at 0:07
• @Sigur Not sure if there is anything left which can be destroyed ... – user36296 Aug 10 '18 at 0:12
• @samcarter, that is true. I should say people trying to fix what designers destroyed... lol – Sigur Aug 10 '18 at 0:15
• 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 '18 at 2:06
• 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 '18 at 10:50
• @Thérèse I added a script, see tex.meta.stackexchange.com/a/7813/36296 – user36296 Aug 10 '18 at 13:02
• 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 '18 at 13:40
• I reordered the answer list to be alphabetically sorted (I just couldn't stand this mess :) – Skillmon Aug 11 '18 at 18:37
• You may want to check out user styles instead of scripts. (Just stay clear of Stylish; I use Stylus instead.) – Raphael Aug 13 '18 at 14:13

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.

• You smell really angry. ;-) – user121799 Aug 9 '18 at 23:54
• @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 '18 at 6:04
• Well, there are sayings of the type "The kids of a shoemaker walk barefooted." Unfortunately, these sayings contain a lot of truth. ;-) – user121799 Aug 10 '18 at 6:06
• @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 '18 at 6:08
• I agree with all that, and I am certainly not defending them. But is also true that some medical doctors smoke. ;-) – user121799 Aug 10 '18 at 6:10
• I think Facebook is in the 100 busiest sites? – E.P. Aug 11 '18 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 '18 at 23:52
• @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 '18 at 8:22
• 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 '18 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 '18 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 '18 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. – yo' Aug 13 '18 at 14:46
• I'm still waiting for the remaining 99 sites' highly esteemed and constructive analysis. – percusse Aug 13 '18 at 18:02
• @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 '18 at 21:58
• @alephzero I was never defending the Powers... did I? – user121799 Aug 14 '18 at 22:00

## Restore {Tag} braces

// ==UserScript==
// @name        TeX SE, braced tags
// @match       *://tex.stackexchange.com/*
// @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;
}
);


## Restore the old voting icons

// ==UserScript==
// @name        TeX SE, legacy vote icons
// @match       *://tex.stackexchange.com/*
// @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;
}
);


• Oh, this is great! – user36296 Aug 9 '18 at 16:57
• Doesn't seem to work in FF 61 (Mac), with Greasemonkey 4.6. – Alan Munn Aug 9 '18 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 – user36296 Aug 10 '18 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 '18 at 18:13
• @MarcelKrüger Oh thank you! That works very well! – user36296 Aug 10 '18 at 18:59
• A small warning: this gives bad voting icons on the mobile version of the site. – Ulrike Fischer Aug 15 '18 at 13:19
• Unfortunately today's update of the site broke your fantastic voting icon script. I already miss them deeply! – user36296 Dec 21 '18 at 16:17
• @samcarter I, too, miss them. TeX.SX turned a bit uglier again. – Skillmon Jan 5 at 20:15

# Making the white background less white

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

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


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

• +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 '18 at 16:57
• Doesn't seem to work in FF 61 (Mac), with Greasemonkey 4.6. – Alan Munn Aug 9 '18 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 '18 at 19:35
• @AlanMunn see tex.meta.stackexchange.com/a/7811/36296 for a solution with newer greasemonkey – user36296 Aug 10 '18 at 12:24
• @moewe see previous comment – user36296 Aug 10 '18 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 '18 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/*
// @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

to

• +1 This is superb! – Milo Aug 9 '18 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

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.

## The result

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

• 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 '18 at 10:26
• @HaraldHanche-Olsen Curious! What OS/web browser are you using? – Milo Aug 10 '18 at 10:34
• 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 '18 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 '18 at 10:43

# 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/*
// @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 '18 at 11:24
• 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 '18 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 '18 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 '18 at 15:43
• @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 '18 at 20:56

# Remove blue background from the post owner

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

You can make it transparent

// ==UserScript==
// @name        TeX SE, remove post owner background
// @match       *://tex.stackexchange.com/*
// @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.

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


# 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==

const style = document.getElementById("GM_addStylePG") || (function() {
const style = document.createElement('style');
style.type = 'text/css';
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;
}
);

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

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

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


## 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)

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

### Some possible images to choose from:

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

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

# Bring back the top bar links

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/*
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( 
width:  135px;  /* Sizes taken from default/native logo*/
height: 47px;
}
);

function tweakLogo () {
if (siteLogo.length === 0) {
return;
}
//- Change image
siteLogo.find ("img").attr ("src", "//i.stack.imgur.com/nwd7Y.png");
}


• 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 '18 at 17:55
• @barbarabeeton Can you try with this image: i.stack.imgur.com/3sgw7.png ? – user36296 Aug 10 '18 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 '18 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. – user36296 Aug 10 '18 at 18:19
• thanks. i'll see what i can get away with under the local rules. – barbara beeton Aug 10 '18 at 18:34
• @barbarabeeton I'll keep my fingers crossed in the hope you'll be able to see the {} again! – user36296 Aug 10 '18 at 18:37

# 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;
}
.tabs-filter.s-btn-group .s-btn:focus {
}
.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

After

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

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

## Question page - before and after

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(){
if (bar) bar.style.display="none";
})();

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

(function(){
if (bar) bar.style.display="none";
})();


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

The old site

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

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

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/*
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( 
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 '18 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) {
}


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;
}
#sidebar {
max-width:20% !important;
}
.module.community-bulletin{
background-color:#fdfbed !important;
}
#mainbar { min-width:77.5% !important; }
font-size:16px !important;
font-family:'DejaVu Serif' !important;
}
.s-btn {
border-style:none !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:

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.

• How to find/create the correct folder on Windows to put the css file in: superuser.com/a/319322/393639 – BMWurm Aug 13 '18 at 13:55
• @BMWurm thank you very much! I put this information into my answer. – Skillmon Aug 13 '18 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

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

GM_addStyle ( 
background-color:#4c9067  !important;
}
);

• I used a color with transparancy: rgba(76,144,118,0.3) . – Ulrike Fischer Aug 15 '18 at 20:23
• @UlrikeFischer Good choice! This would solve @ cfr's concerns about them being to noticeable. – user36296 Aug 15 '18 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.

### After

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/*
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( 
.s-btn {
border-style: none !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/*
// @run-at      document-start
// ==/UserScript==

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


• 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 '18 at 15:28
• @Skillmon Yup! Good point! I've updated the post – Milo Aug 11 '18 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 '18 at 15:46
• @Skillmon Ah, I think changing it from max-width to min-width does the trick – Milo Aug 11 '18 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:

# Making the community bulletin less yellowish

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

GM_addStyle ( 

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

);


# Centre the TeX logo

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


# 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;}


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

• How did you make the header larger! I really want that too :) – Milo Aug 11 '18 at 15:39
• @Milo I posted it in chat. I'll create an answer here. – Skillmon Aug 11 '18 at 16:20
• – Skillmon Aug 11 '18 at 16:24

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:

• +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 '18 at 17:13
• @Milo good idea! – Skillmon Aug 11 '18 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 '18 at 18:31
• This is true... If only this was TikZ, then.. [xshift=1cm] would probably do the trick! ;) – Milo Aug 11 '18 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 '18 at 18:41

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;
}


# Fix incorrect colour of icons in post editor

A userscript to change the icon colour from the default Stackoverflow orange to your red is available from https://stackoverflow.com/a/53400946/2777074