What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 131 Stack Exchange communities.

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.

share|improve this question
3  
I used Stylebot to add the code to Chrome. –  Nick Dec 4 '13 at 23:35
8  
See also Stack Apps. –  Gilles Dec 4 '13 at 23:40
    
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 Dec 4 '13 at 23:46
2  
This is actually job for SO, and styles should be available in user preferences. –  mpapec Dec 5 '13 at 7:10
    
@Nick Try this github.com/imom0/so-topbar-light-theme –  iMom0 Dec 5 '13 at 7:35
    
@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 Dec 13 '13 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 Dec 14 '13 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 Dec 14 '13 at 5:52
1  
@SevenSidedDie yes, I've mentioned user preferences only as a kind of last resort to the recent changes. –  mpapec Dec 14 '13 at 6:10

10 Answers 10

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

share|improve this answer
    
What happens when SE removes the data source that is driving the popout? –  Robert Harvey Dec 4 '13 at 23:42
7  
@TheGrinch - Then the popout functionality will break :( –  Travis J Dec 4 '13 at 23:43
    
Doesn't work on non-(m)SO sites. GitHub issue created. –  Undo Dec 4 '13 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 Dec 5 '13 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 Dec 5 '13 at 7:32
    
Thank you. Used Stylebot and just the CSS file for Chrome. My eyes are thanking you. –  Swati Dec 5 '13 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 Dec 7 '13 at 2:29

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;
  }
}
share|improve this answer
2  
needz moar grey. –  Robert Harvey Dec 4 '13 at 23:34
4  
Well the aim was to prevent the thing from grabbing my attention, after all. –  phils Dec 4 '13 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! –  fredsbend Dec 5 '13 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... Dec 5 '13 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 Dec 5 '13 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 Dec 5 '13 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 Dec 5 '13 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 Dec 5 '13 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 Dec 5 '13 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 Dec 5 '13 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 Dec 5 '13 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 Dec 6 '13 at 22:26

I made a minimal version

counter

stackoverflow user experience

              - Install -
last update: 30.12.13

            (using Stylish)

share|improve this answer
    
Why an auto-expanding search box? –  Tshepang Dec 7 '13 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 Dec 7 '13 at 12:52

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;
}
share|improve this answer

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;
    }
}
share|improve this answer
    
The gap to the left of the diamond is where the flag count shows up when there are flags that need handling. –  Keen Dec 5 '13 at 22:02
    
Screenshot's out of date now, I tightened up some of the space between the 'help' link and the search box. –  Keen Dec 16 '13 at 17:42

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!

share|improve this answer
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 Dec 5 '13 at 2:30
    
@Keen how many shades of gray can there be? –  Kasra Rahjerdi Dec 5 '13 at 3:22
1  
Two hundred and fifty six :) –  phils Dec 5 '13 at 4:07
3  
Is my screen calibrated incorrectly, or is that blue Exchange nearly unreadable? –  Stijn Dec 5 '13 at 10:29
1  
@Stijn I think my screen's calibrated right, and I can't read it either. –  michaelb958 Dec 5 '13 at 10:30
    
@Stijn: Without the CSS, the "Stack" is completely unreadable. –  user Jan 18 at 8:13

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

share|improve this answer
    
Nice of you for adding info on customizing it. –  Tshepang Dec 7 '13 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 Dec 7 '13 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 Dec 10 '13 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 Jan 19 at 1:44

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

share|improve this answer

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

share|improve this answer

A userstyle to make Physics.SE compatible with the new top bar: http://userstyles.org/styles/97282/physics-se-style-to-match-the-new-top-bar

More here: http://meta.physics.stackexchange.com/a/5416/23119

share|improve this answer

You must log in to answer this question.

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