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
A fix for recent versions of Firefox and GreaseMonkey (4.x) by @PaulGaborit.
A userContent.css example by @Skillmon.
List of answers
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.
// ==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;
}
` );
// ==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;
}
` );
[] at the top of e.g. tex.stackexchange.com/questions/tagged/beamer with {} as well? i.stack.imgur.com/r1EAk.png
Aug 10, 2018 at 13:59
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.
Aug 10, 2018 at 18:13
// ==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;
}
` );
(the exact colour can be adjusted to fit your personal taste, at the moment it matches the background colour outsides)
#fefefa. This makes the content area slightly lighter than the main background color, as it was before.
Update: The style has been fixed in the "vanilla" website. This change seems no longer necessary.
// ==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
to
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.
Note that you can access the menu by clicking the three horizontal lines which now appear to the left of the StackExchange logo.
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/*
// @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.
GM_addStyle ( `
.owner {
background-color: #f7f0de !important;
}
` );
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.
Why do we need the sidebar on a question page, anyhow? Edit: Because we want to have the “Related” module. See below.
(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%;
}
` );
body>.container and #content have set max-width: 110px in the site css. You'd have to override them both.
Aug 11, 2018 at 15:12
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 ;-)
https://i.stack.imgur.com/1d1sg.png
https://i.stack.imgur.com/A99lA.png
https://i.stack.imgur.com/jkXH3.png
https://i.stack.imgur.com/981KO.png
Original image for own modification: https://cdn.sstatic.net/Sites/tex/img/bg-header-ill.png
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;
}
` );
From Top Navigation Bar script on stackapps.com. In particular see the modified solution by @samcarter - https://stackapps.com/a/7974
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");
}
\TeX.)
Aug 10, 2018 at 18:12
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
After
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.
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";
})();
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/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
GM_addStyle ( `
.question-hyperlink {
font-size: 18px;
}
` );
h3 a.question-hyperlink { ... }.
Aug 12, 2018 at 20:29
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:
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.
#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)
The following script changes the colour of this green square
// ==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;
}
` );
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.
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;
}
` );
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;
}
` );
max-width to min-width does the trick
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:
The newest changes to the site have increased the line spacing in a way that makes text less readable to many of us. To change it back to something more readable add the following to your local .css (I use Stylus, but you can also use the Greasemonkey approaches outlined in the other answers.)
.s-prose { line-height: 1.3;
margin-bottom: 1.2em; }
// ==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;
}
` );
div.site-header--container {
justify-content:center !important;
}
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)
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:
{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; }
[xshift=1cm] would probably do the trick! ;)
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).
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;
}
A userscript to change the icon colour from the default Stackoverflow orange to your red is available from https://stackoverflow.com/a/53400946/2777074
