If you haven’t tried it, gleeBox is an amazing extension. I have it installed in my Firefox and Chrome setups, and I’m more than thrilled that it’s finally available for Safari. It lets you do a lot of crazy (and useful) things with keyboard commands on any website. There’s a great writeup over at PimpMySafari.com, so I won’t go into depth on the wonderful parts. I’ll concentrate on the one thing that bugs me about gleeBox: the highlight colors on found and selected elements. They are, in my opinion, a little obnoxious.
Fortunately, another Safari extension comes to the rescue. User CSS is a pretty effective way to use slightly-modified userstyles and generate your own CSS overrides. If you happen to have both extensions installed (or are on your way to get them right now), here’s a recipe for de-uglifying gleeBox (settings screenshot):
- Create a new User CSS in the User CSS Manager
- Name it Glee Highlight Override and set the Domains field to *
- Add the code below in the Styles field:
body .GleeHL {
background-color:#eef49b !important;
-webkit-box-shadow:none !important;
border:solid 1px #dfec2c !important;
padding:0 !important;
}
body .GleeReaped {
background-color:#f6f9c9 !important;
border:solid 1px #c0c660 !important;
}
The highlights should be prettier now, even if the change is fairly subtle. The style also removes the padding and shadow on the selected item so that, in most cases, selected items don’t jump around and move other elements as you tab through the page. Let me know if it doesn’t work for you. Obviously, the colors are adjustable to taste. You could even create special overrides for certain sites to match color schemes better… I mean, if you were crazy obsessive or something. If you come up with a better all-around color set, let me know!
By the way, the Reddit Twitter style is great in Safari! Here’s a shot of it with custom gleeBox highlights!
