Gallery of custom styles and/or scripts for the top-bar

Question

So the new top-bar is... divisive. Lots of people are mentioning custom style sheets (or scripts) in order to improve it. If we could gather all such things into a gallery of sorts, I'm sure lots of people would be grateful.

Please include a screenshot, so that people can see what the effect will be.

Also say which browser/plugin you are using, in order to minimise any possible confusion over compatibility.

For Firefox, custom style sheets can be managed using Stylish, and custom scripts can be managed using Greasemonkey.

Thanks Gilles; I didn't know that existed. I'm sure that others are in the same boat, though, so I think this Q&A will remain useful. — phils, Commented Dec 4, 2013 at 23:46
This is actually job for SO, and styles should be available in user preferences. — mpapec, Commented Dec 5, 2013 at 7:10
@mpapec Adding a customisation feature because you can't design something right in the first place is a cop-out, and not usually a good solution to the problem. — SevenSidedDie, Commented Dec 13, 2013 at 23:42
@SevenSidedDie if you're proposing that poor design choices for SO are visitor responsibility, then I don't share your viewpoint. — mpapec, Commented Dec 14, 2013 at 5:47
@mpapec No, just that it's SO's job to design it right instead of covering up bad design with a "now you can customise it!" bandaid. All this userstyle stuff is a workaround for SO not doing its job right + a demonstration of how it needs to be improved. — SevenSidedDie, Commented Dec 14, 2013 at 5:52
@SevenSidedDie yes, I've mentioned user preferences only as a kind of last resort to the recent changes. — mpapec, Commented Dec 14, 2013 at 6:10

Travis J · Accepted Answer · 2013-12-09 17:28:22Z

31

Free "LightSide" userscript (includes all .js and .css code)

Light theme

light

Hover popout

popout

--

I also made a userscript which will open the three topbar icons on hover (namely the stackexchange logo, the inbox, and the achievements modal dialogs) SE-icon-hover

edited Dec 9, 2013 at 17:28

answered Dec 4, 2013 at 23:37

Travis J

33.8k5 gold badges75 silver badges142 bronze badges

What happens when SE removes the data source that is driving the popout?
– user102937
Commented Dec 4, 2013 at 23:42
7

@TheGrinch - Then the popout functionality will break :(
– Travis J
Commented Dec 4, 2013 at 23:43
Doesn't work on non-(m)SO sites. GitHub issue created.
– Undo
Commented Dec 4, 2013 at 23:45
@Undo - When I first made the script the top bar was only on meta and SO. It has been updated to work across the exchange. Thanks for the heads up :)
– Travis J
Commented Dec 5, 2013 at 0:30
Have you thought about making this available as Firefox UserScript as well? Or are there instructions how to use it with FF (or any other non-Chrome browser)? Looks really great and promising, I'd love to try it out!
– Izzy
Commented Dec 5, 2013 at 7:32
Thank you. Used Stylebot and just the CSS file for Chrome. My eyes are thanking you.
– Swati
Commented Dec 5, 2013 at 14:59
How does one use this in FF? I know Stylish will do the css, but how can I get the whole thing to work? Is there a way to use Greasemonkey or something?
– Alyksandrei
Commented Dec 7, 2013 at 2:29

Add a comment |

phils · Accepted Answer · 2014-08-07 23:01:44Z

23

screenshot

Style sheet (using Stylish for Firefox).

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("stackoverflow.com"),
               domain("superuser.com"),
               domain("serverfault.com"),
               domain("stackexchange.com")
{
  .topbar,
  .topbar .icon-achievements.icon-achievements-unread,
  .topbar .icon-achievements .unread-count {
    color: #999 !important;
    background: #eee none !important;
  }
  .topbar .topbar-icon:hover,
  .topbar .topbar-icon-on,
  .topbar .topbar-icon-on:hover,
  .topbar .topbar-links .profile-me:hover,
  .topbar .topbar-links .topbar-menu-links a:hover,
  .topbar .icon-achievements.icon-achievements-unread:hover .unread-count {
    background-color: #ddd !important;
  }
  .topbar .icon-achievements,
  .topbar .icon-achievements .unread-count,
  .topbar .topbar-links a,
  .topbar .topbar-links a:visited,
  .topbar .topbar-links .topbar-menu-links a,
  .topbar .topbar-links .topbar-menu-links a:visited,
  .topbar .topbar-links .topbar-flair .reputation,
  .topbar .topbar-links .topbar-flair .badgecount {
    color: #999 !important;
  }
  .topbar .avatar-me {
    display: none !important;
  }
  .topbar .topbar-links .search-container input[type="text"] {
    border-color: inherit !important;
  }
  .topbar .icon-site-switcher {
    background-position: 11px 11px !important;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAAOCAYAAAAGw8N3AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QwEFTgjh/NzFQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAP5SURBVFjD7Vg9jyNFEH2LLmS5MxJ/wPsHkLw/wf4Jdkhyki2BBOIIxiJ4wSOxJSSI0HkQSKQ2IRGeBCER7eQnkCYgIrrRQciHSV6fisH2zN6uk9WWNLJ7pqe7ql7Vq+o5I/kYwGcAznFc/gDwoaSvcC93Qh4A+BzA6x3mnntuK/gkVwCm4VYOYC6pvi3FSQ4BbCWdddQhSSXp4hX33AHIJc3uBPiSzm9zQZJrAAMA0UFTAEMAm+DEkaTiBlv1O87LG+P6PucNPsnfO87dAdhJetQybwxgImlzBIDrgHcjuStZeiraPz/BuoOU5QeoEwBWJDNJFyTHAFYAes7MWQoekj0AazMHDtEuyQWADMCFpKqFnTIAC5ei5YFxZn0K3y+TbSSvbGNhXaugwzTYkUuaN8pQ7gRB43m0s/T7/VSiXOZWTprSOhUtdn4K4KMDjz94cKhm3kDmABYGtARQASiSopLOHAAzSYkRhn6v9P81yQTi1o4YeW5mR0Ujp3bsZRP4EGxJLgzw0HqWBrpsBMLGuo+Dw1Ng5x5PDciIZD+UtsrzMpK1pGUjMZZeNyNZ2Q8J+DyUymRD334oQvBsg48OyScA3gHwVuP+MwBftNH+zlek0UctNLskWdiQgX8zkvOGEw5Rc+kMGhqYQSObCzskOSaxxiRkZ5eaPwNwFYJrEpxeSJqEYI6ySfo6CMe2oQJwSXLgzC9D4EQZSapJ5gCe274UFEVYux/YLjHFMtiQmGR+BIsXJD8G8GUz6yX9dRLaNwjlHppdttDwvvKBluhe2xnDfaXmUM2XVBmAzIBWoRc5Rqf1vv8hO/stvqnTbwpgS8+M8fJUsqc/2jaW63WA42sA7wF42+PvJH2fuv1bpX2SvT1HuvrI/IGBv0yZG6g6jftHAmBmR21JFo1GEy37ZinbSebev3rFZjTzexehB9hd4/26sW9/TyC09jN7gu0fku8D+AHAnwCeHOv2/0f1XWnfNPic5MZZ2AuOaYLSd7bEMQLVQVJp6l+RXIa1JmFO7r03ruFFDD43Wv9xspusVegltu4zLl0mFj6yppo/7xBUVehJqkDnXaV0qVuFPuhlqXGCrF1Se35+qNQ1MfuR5LcAfpX0S7r/mmk/Xm8AeHjg+rkDpY0ctWs7eNGooSlbMwBrKz/3/CsbVQdnjgLlbf2Rpm7QYlqzt6d8TBvX2D3FIHTxM+u8cF8yT72K9+mSbblBmlqHRONdvytMXG6moeNHKHujEPxjl6ryGsH1BIDijbMOX7SS438C8FTSb/cn5NMLyS2AgaQ3T3nOb5NvADyW9Pc9JCcFe+ysjrSen/ojzzF5CuBdSbt7eE4uVaD1GsAyfQA6lfwLhNsGYDinnG8AAAAASUVORK5CYII=) !important;
  }
}

edited Aug 7, 2014 at 23:01

answered Dec 4, 2013 at 23:29

phils

9296 silver badges12 bronze badges

2

needz moar grey.
– user102937
Commented Dec 4, 2013 at 23:34
4

Well the aim was to prevent the thing from grabbing my attention, after all.
– phils
Commented Dec 4, 2013 at 23:44
9

I personally don't like when there is a bold nav bar at the top. I already know there is a nav bar there, I don't need to be constantly reminded with standout colors, blinking lights, and bells and whistles. OMG, I've become my grandfather, demanding that things be less flashy!
– user212646
Commented Dec 5, 2013 at 0:22
1

This is an example of why design needs a designer. The bar above is good design, the new bar is not. It's pretty cut and dry. Design is not some fuzzy discipline - it has rules. What really boggles me is that, for a site that otherwise does so well at following these rules, for whatever reason they were completely thrown out with the new bar. It feels like one huge compromise that was rolled out after its designers gave up. Rather than unifying the style of all SE sites, it just makes them all look equally bad. Surely this begs re-examination of the underlying problem.
– J...
Commented Dec 5, 2013 at 11:24
Useful additions, if you want the MultiCollider fixed (keeping its position even when scrolling down): .topbar { position:fixed; top:0; left:0; } #header { margin-top:30px !important; } – plus, for android.stackexchange.com (and maybe some other SE sites) body { background: none !important;} (to get rid of the second "gray bar").
– Izzy
Commented Dec 5, 2013 at 12:45
1

I like this, but it breaks gravatars in chat for me -- I don't see them, nor their alt text when images are blocked, in the "people in the room" area. Cutting out the gravatar block at the top fixes that.
– Monica Cellio
Commented Dec 5, 2013 at 15:19
2

@MonicaCellio try this UserStyle. I've decided to collect the ideas and compile them to a userscript hosted there. All credits given (hopefully; if not, let me know and I add the missing).
– Izzy
Commented Dec 5, 2013 at 16:50
2

I'm currently using this with two changes to use the original "black" but with 70% opacity: rgba(33, 33, 33, 0.7) for the background and rgba(68, 68, 68, 0.7) for the hover. It's great, because this automagically pulls in colour from the underlying site, giving a unified cross-site bar look with subtle but effective per-site colour unification.
– SevenSidedDie
Commented Dec 5, 2013 at 18:31
1

SevenSidedDie: Nice idea; I'll have to try that out myself. MonicaCellio: Good point. I dislike avatar images in general, so my preference was to remove them all, but that was a bit over-zealous for this answer, so I've updated the stylesheet to only target the top-bar avatar.
– phils
Commented Dec 5, 2013 at 21:42
@phils to remove the gravatar only from the MultiCollider™, .avatar-me should be sufficient (just tried, seems to work). My userstyle has it enabled by default. I also just updated it with some comments inside, to make adjustments easier. Also includes an alternative "colorized" SE logo, but defaults to the nice gray style you designed. Ah, and has the MultiCollider™ floating.
– Izzy
Commented Dec 5, 2013 at 22:36
Izzy: Yes indeed, and already done. (After deleting the non-top-bar parts, I moved this selector further down for slightly nicer organisation.)
– phils
Commented Dec 5, 2013 at 22:55
Yeah, saw it a couple of minutes after posting the comments (required a refresh). You still might need to fix it in your other post – but as you linked from there to here, and pointed out the "prefered version", that seems to be optional :) // Btw: Posted my modified variant as a separate answer (with screenshot, see below/above, depending on your sorting). Credits given, of course :)
– Izzy
Commented Dec 6, 2013 at 22:26

Add a comment |

Community · Accepted Answer · 2020-06-03 13:30:57Z

Due to the recent implementation of the topbar, the review numbers have been removed for 10k users. After seeing this request to have the feature back, I decided to create a custom script.

Here is an example of what the custom script does:

Other options..

..you can also easily tweak the CSS to something else too.

Download the script on GitHub - works in Chrome

Also - if you want a gray topbar, here is a little CSS

.topbar {
    background: #eee!important;
}

.topbar .icon-site-switcher {
    background-position: 11px 11px !important;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAAAOCAYAAAAGw8N3AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QwEFTgjh/NzFQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAP5SURBVFjD7Vg9jyNFEH2LLmS5MxJ/wPsHkLw/wf4Jdkhyki2BBOIIxiJ4wSOxJSSI0HkQSKQ2IRGeBCER7eQnkCYgIrrRQciHSV6fisH2zN6uk9WWNLJ7pqe7ql7Vq+o5I/kYwGcAznFc/gDwoaSvcC93Qh4A+BzA6x3mnntuK/gkVwCm4VYOYC6pvi3FSQ4BbCWdddQhSSXp4hX33AHIJc3uBPiSzm9zQZJrAAMA0UFTAEMAm+DEkaTiBlv1O87LG+P6PucNPsnfO87dAdhJetQybwxgImlzBIDrgHcjuStZeiraPz/BuoOU5QeoEwBWJDNJFyTHAFYAes7MWQoekj0AazMHDtEuyQWADMCFpKqFnTIAC5ei5YFxZn0K3y+TbSSvbGNhXaugwzTYkUuaN8pQ7gRB43m0s/T7/VSiXOZWTprSOhUtdn4K4KMDjz94cKhm3kDmABYGtARQASiSopLOHAAzSYkRhn6v9P81yQTi1o4YeW5mR0Ujp3bsZRP4EGxJLgzw0HqWBrpsBMLGuo+Dw1Ng5x5PDciIZD+UtsrzMpK1pGUjMZZeNyNZ2Q8J+DyUymRD334oQvBsg48OyScA3gHwVuP+MwBftNH+zlek0UctNLskWdiQgX8zkvOGEw5Rc+kMGhqYQSObCzskOSaxxiRkZ5eaPwNwFYJrEpxeSJqEYI6ySfo6CMe2oQJwSXLgzC9D4EQZSapJ5gCe274UFEVYux/YLjHFMtiQmGR+BIsXJD8G8GUz6yX9dRLaNwjlHppdttDwvvKBluhe2xnDfaXmUM2XVBmAzIBWoRc5Rqf1vv8hO/stvqnTbwpgS8+M8fJUsqc/2jaW63WA42sA7wF42+PvJH2fuv1bpX2SvT1HuvrI/IGBv0yZG6g6jftHAmBmR21JFo1GEy37ZinbSebev3rFZjTzexehB9hd4/26sW9/TyC09jN7gu0fku8D+AHAnwCeHOv2/0f1XWnfNPic5MZZ2AuOaYLSd7bEMQLVQVJp6l+RXIa1JmFO7r03ruFFDD43Wv9xspusVegltu4zLl0mFj6yppo/7xBUVehJqkDnXaV0qVuFPuhlqXGCrF1Se35+qNQ1MfuR5LcAfpX0S7r/mmk/Xm8AeHjg+rkDpY0ctWs7eNGooSlbMwBrKz/3/CsbVQdnjgLlbf2Rpm7QYlqzt6d8TBvX2D3FIHTxM+u8cF8yT72K9+mSbblBmlqHRONdvytMXG6moeNHKHujEPxjl6ryGsH1BIDijbMOX7SS438C8FTSb/cn5NMLyS2AgaQ3T3nOb5NvADyW9Pc9JCcFe+ysjrSen/ojzzF5CuBdSbt7eE4uVaD1GsAyfQA6lfwLhNsGYDinnG8AAAAASUVORK5CYII=) !important;
}

.topbar-icon:hover, .profile-me:hover, .topbar-menu-links a:hover {
    background-color: #DDD!important;
}

.topbar .reputation, .topbar .badgecount, .topbar a, .topbar a:visited {
    color: #464646!important;
    font-weight: bold;
}

.topbar input[type=text] {
    border: 1px solid #fff!important;
}

RienNeVaPlus · Accepted Answer · 2013-12-30 01:52:02Z

10

I made a minimal version

counter

stackoverflow user experience

- Install - last update: 30.12.13
_{(using Stylish)}

edited Dec 30, 2013 at 1:52

answered Dec 7, 2013 at 1:20

RienNeVaPlus

2001 silver badge5 bronze badges

Why an auto-expanding search box?
– tshepang
Commented Dec 7, 2013 at 7:17
2

To keep it as minimalistic as possible! But feel free to disable it by editing .topbar .topbar-links .search-container input[type="text"] :)
– RienNeVaPlus
Commented Dec 7, 2013 at 12:52

Add a comment |

jim · Accepted Answer · 2013-12-05 21:24:37Z

8

Using Stylish (Firefox):

enter image description here

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("stackexchange.com"), domain("stackoverflow.com"), domain("superuser.com"), domain("serverfault.com"), domain("askubuntu.com"), domain("stackapps.com") {

  .user-gravatar32,
  .gravatar,
  .avatar-me {
    display: none !important;
  }

  .topbar {
    color: #ccc !important;
    background: #777777 none !important;
  }

  .topbar 
  .topbar-links 
  .topbar-flair 
  .reputation, 
  .topbar 
  .topbar-links 
  .topbar-flair 
  .badgecount {
    color: #ccc !important;
  }
}

In truth, I could spend more time tweaking, but main job was to get my eyes back!

edited Dec 5, 2013 at 21:24

user158781

answered Dec 5, 2013 at 0:03

jim

1814 bronze badges

1

Keen: That could certainly be a different Q&A. This one is more so people who are thinking "Ah, my eyes!" can scan through the screenshots in the gallery and pick the one that they like (or combine and tweak things as they prefer, and then post that as another alternative :)
– phils
Commented Dec 5, 2013 at 2:30
@Keen how many shades of gray can there be?
– Kasra Rahjerdi StaffMod
Commented Dec 5, 2013 at 3:22
1

Two hundred and fifty six :)
– phils
Commented Dec 5, 2013 at 4:07
3

Is my screen calibrated incorrectly, or is that blue Exchange nearly unreadable?
– Stijn
Commented Dec 5, 2013 at 10:29
1

@Stijn I think my screen's calibrated right, and I can't read it either.
– michaelb958--GoFundMonica
Commented Dec 5, 2013 at 10:30

Add a comment |

Community · Accepted Answer · 2021-01-18 11:50:44Z

8

Colorized Gray bar

Based on the style by phils, I included some of the suggestions from here and from the blog, then combined it to my own UserStyle, which I uploaded to UserStyles.Org. Some comments are included as well, to make it easier to adapt to "personal preferences":

stays on top when you scroll (as the screenshot shows)
includes a colorized SE logo (see screenshot again). By default, the gray one is used; simply remove the comments around the colorized variant.
you also can hide the avatar completely, or have it replaced by your plain-text username, by simply removing the enclosing comments from the resp. CSS code blocks
achievements-icon can be hidden when there's no news in that box, again in the same way as the previous example
again optionally: smaller, but on focus auto-expandable search box
adjusted size of the dropdown-boxes (inbox, achievements) and their font-size
tested on multiple sites, including StackOverflow, StackApps, Android, DBA

Please forgive me for not cross-posting the entire CSS here. Two good reasons for that: easier maintenance (in one place), and keeping this page compact :)

edited Jan 18, 2021 at 11:50

CommunityBot

1

answered Dec 6, 2013 at 22:14

Izzy

6781 gold badge5 silver badges16 bronze badges

Nice of you for adding info on customizing it.
– tshepang
Commented Dec 7, 2013 at 7:24
1

That's often the first thing I'm looking for. And especially in this case I deemed it necessary: Some didn't like the avatar – others insisted on. Some wanted the bar floating, others not. The alternative would have been to make at least 4 different versions :)
– Izzy
Commented Dec 7, 2013 at 12:39
1

I've updated the script a couple of times meanwhile. Added some optional CSS which is initially commented out, such as replacing the avatar with your username (or hide it completely), or having an initially small, but on focus auto-resizing search box. Again, most things are taken from other scripts here (except for the avatar-replace, which is my own work completely :)
– Izzy
Commented Dec 10, 2013 at 23:15
After the horrible colors on AskUbuntu have caused me headaches long enough, I've added support for that stack as well now :)
– Izzy
Commented Jan 19, 2014 at 1:44

Add a comment |

score 8 · Accepted Answer · 2013-12-16 17:42:21Z

8

After using a userscript to add back a few missing items, I then ended up with a cluttered topbar, with elements overlapping. I used this userCSS to tighten up some of the spacing between elements. Here's a before/after: screenshot showing topbar before and after customizations

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("stackexchange.com"), domain("stackoverflow.com"), domain("superuser.com"), domain("serverfault.com"), domain("askubuntu.com"), domain("stackapps.com") {

    /* Tighten up the spacing between elements in the topbar. */
    .profile-me {
        margin-right: 0px !important;
    }
    .topbar-menu-links {
        margin-left: 5px !important;
    }
    .topbar-menu-links a {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .topbar #search input {
        margin-left: 5px !important;
    }
}

edited Dec 16, 2013 at 17:42

answered Dec 5, 2013 at 21:59

user158781

The gap to the left of the diamond is where the flag count shows up when there are flags that need handling.
– user158781
Commented Dec 5, 2013 at 22:02
Screenshot's out of date now, I tightened up some of the space between the 'help' link and the search box.
– user158781
Commented Dec 16, 2013 at 17:42

Add a comment |

Community · Accepted Answer · 2017-04-13 12:25:42Z

3

I have a userscript that supports userscript "plugins" to modify the topbar, if anyone wants to build scripts on, or contribute to, it.

on GitHub
on Stack Apps

edited Apr 13, 2017 at 12:25

CommunityBot

1

answered Dec 5, 2013 at 0:14

michaelb958--GoFundMonica

6,8252 gold badges24 silver badges53 bronze badges

Add a comment |

Community · Accepted Answer · 2017-04-13 12:25:43Z

2

A Userscript to hide or semi-hide the green rep notifications that some people seem to find intrusive.

edited Apr 13, 2017 at 12:25

CommunityBot

1

answered Dec 5, 2013 at 10:34

fredley

16.5k2 gold badges40 silver badges83 bronze badges

Add a comment |

Stack Exchange Network

Gallery of custom styles and/or scripts for the top-bar

9 Answers 9

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged
discussion
top-bar
.

Linked

Hot Network Questions

Gallery of custom styles and/or scripts for the top-bar

9 Answers 9

You must log in to answer this question.

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

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
discussion
top-bar
.