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

It's so cool that the notification reminds you of the colour of badge you've earned. But I am a little puzzled by the symbols:

meta workplace enter image description here

Is it feasible to use the symbol from the earned site? At the moment it uses the symbol from the site I happen to be on (as you can see by looking to the left of the dropdown in each case.)

share|improve this question
    
I imagine it's the same reason badges for all accounts are the same in your user profile. Hard to style each one differently. See: Unique Badge Icons in Summary –  mhlester Jun 2 at 16:32
    
@mhlester: it is a pretty close duplicate, I'd say. –  Martijn Pieters Jun 2 at 16:58
1  
@MartijnPieters I disagree. The profile needs to show all the badges from all the sites. That's a different task from "today's badges" so perf is less of an issue. –  Kate Gregory Jun 2 at 17:07
4  
Using the icon from the "earned site" may be infeasible/undesirable since that would mean cross-loading icons; in that case, please just use the default circles! –  Raphael Jun 2 at 19:08
1  
@mhlester: Not quite; the (left part of the) top-bar is supposed to look&feel the same everywhere, so why use different icons at all? The defaults (cf beta sites) would do and, in particular, not interfere with the site style (which is the biggest counter-argument in the question you link). –  Raphael Jun 2 at 19:11
    
"How can I sell myself" sounds so much like an Arqade title, it took me a while to realize the problem wasn't that it was displaying the Workplace icon instead of the Arqade icon. –  user2357112 Jun 3 at 6:43

1 Answer 1

up vote 8 down vote accepted

After what turned out to be a somewhat excessively long delay, version 1.16 of SOUP now includes a client-side fix for this.

Basically, what I did was add some custom styles to override the default styling for the badges in the achievements menu:

.achievements-dialog .badge1,
.achievements-dialog .badge2,
.achievements-dialog .badge3 {
    height: 8px !important;
    width: 8px !important;
    border-radius: 50% !important;
    margin: 0px 2px 4px;
}
.achievements-dialog .badge1 { background: #ffcc00 !important }
.achievements-dialog .badge2 { background: #c5c5c5 !important }
.achievements-dialog .badge3 { background: #cc9966 !important }

(The reason for all those ugly !important tags is that some SE sites, like Meta.SE, use !important in their site badge styles, so I have to use it too in order to consistently override the site styles.)

The result looks like this (on Academia.SE, which has a pretty distinct badge style):

Screenshot

Note that the custom dots are a little bit bigger than the standard ones used e.g. in the top bar here on meta, since I felt the standard dots looked too small in the menu.

share|improve this answer
2  
The SOUPinator strikes again -- great work, thanks! –  Raphael Jun 3 at 2:16
    
I use Greasemonkey on FF. I know I have seen autoupdates before and when I forced it to check for updates, it found and installed them without problem. Maybe because I "require secure updates"? –  Raphael Jul 3 at 6:25
    
@Raphael: Not sure if that's it, the update URLs do use HTTPS. But I'll keep it in mind and see if I can reproduce it. Thanks! –  Ilmari Karonen Jul 3 at 11:19

You must log in to answer this question.

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