The Hickensian

Alternative Sage Toolbar Icon

My previous modifications to the Firefox Toolbar have one problem. Certain extensions’ toolbar icons become borked. This is due to forcing a css priority, unintentionally overriding css rules for these icons.

The fix is simple, the following rules just need to be re-applied in userChrome.css, after the rules for the main toolbar:

 #sage-button {
  list-style-image: url("chrome://sage/skin/sage.png") !important;
}
toolbar[iconsize="small"] #sage-button {
  list-style-image: url("chrome://sage/skin/sage-small.png") !important;
}

So, while I was at it, I created a new toolbar icon for Sage, based on the new RSS Live Bookmarks icon:

Screenshot of the Sage Icon

I’ve revised the Sage mod kit to include the new icon, which you can download here and add this to your userChrome.css instead:

#sage-button {
  list-style-image: url("sage.png") !important;
}
toolbar[iconsize="small"] #sage-button {
  list-style-image: url("sage-small.png") !important;
}

Comments | RSS

No.1

AkaXakA said 1687 days ago:

Wow… That icon sure looks good!

Any chance of donating that icon to the sage project itself so we can all enjoy it?
No.2

Jon Hicks said 1687 days ago:

Not sure – I tend to think that they already have an icon that ties in with their name. Not sure if they’d want it!
No.3

Stuart said 1687 days ago:

Hi Jon. I was already using your great modification to the Sage look so it was just a case of grabbing your new icon and adding the changes to the userChrome.css however when I hover or click on the icon it disappears and remains invisible until I exit Sage. Any ideas please?
No.4

Sembazuru said 1687 days ago:

Both the Gravatars and the new icon are nice.
No.5

Josh Jarmin said 1687 days ago:

The new icon is really great. Another great work of art from the master, Jon Hicks. Jon, you should just start designing icons for everything.
No.6

Erik Arvidsson said 1686 days ago:

That’s beautiful Jon. It is a bit too macish for my liking… Any chance of making it fit better with WinStripe? (In other words remove the shadow?)

May we use this?
No.7

Laurens Holst said 1686 days ago:

I prefer the pretty leaf icon, so nah… let Sage keep its icon :).

By the way, Sage 1.3 was released about a week ago!

~Grauw
No.8

Oscar said 1686 days ago:

i like the gravatars and the sage icon.
No.9

David House said 1686 days ago:

I think that could too easily be confused with the RSS live bookmarks image, myself. They’re pratically identical, with just the colours reversed.
No.10

Jon Hicks said 1686 days ago:

David – Eh? They’re supposed to look alike – thats the whole point! Its all in the post. Anyway, the status bar icon does a different job to the toolbar icon. There isn't a toolbar icon for live bookmarks, so where's the confusion? Its consistency, especially as Sage 1.3 integrates Live Bookmarks.
No.11

Neczy said 1686 days ago:

Nice Jon, looks awesome.
No.12

Stuart said 1686 days ago:

I’ve sorted that problem out Jon.
No.13

Peter Lairo said 1685 days ago:

Looks nice!
No.14

David House said 1684 days ago:

Jon: you misunderstand. While Sage and Live Bookmarks do a similar job, it’s not identical, and they’re certainly not the same program. I’d click that myself thinking that it would lead me to a live-bookmarks management screen or similar, but instead up pops the Sage sidebar. That’s counter-intuitive. Sage is not Live Bookmarks, even though one may feature the other. Just the right amount of visual differentiation is needed, and I think you’ve got too little.

On the upshot, it’s a lovely icon :)
No.15

Jon Hicks said 1684 days ago:

David, if you have taken the trouble to install Sage, and then the alternative icon, and get confused as to which is which, you shouldn’t be allowed to use a computer! ;o)

I don’t want differentiation – I want consistency, plus once you install Sage, livemarks and Sage feeds integrate.
No.16

Josh Jarmin said 1684 days ago:

I agree with Jon about the icon. If you are smart enough to read this blog and to figure out how to install Sage, then you should be smart enough to tell the difference between Sage and Live Bookmarks.
No.17

Nikole Jolie said 1676 days ago:

Looks good!! Keep it up! :)
No.18

TwisterMc said 1673 days ago:

Is it just me or is the small version of the icon missing?
No.19

Adam said 1672 days ago:

Yes, Jon, where’s the “sage-small.png” icon? It’s a beatiful button icon, but since I use small toolbar buttons to preserve screenspace on my 12” PB, I’d love a small one! I can do it myself in Photoshop or Graphics Converter, if I knew the small icon size. Any help?
No.20

Adam said 1672 days ago:

And for some reason, this isn’t working in 1.0 Final (small or large). I’ve changed the userChrome.css as instructed, and it’s still showing the icon from my installed theme “GrApple Brazil Pro”, which, by the way, is a fantastic Mac-ish theme—the best I’ve seen.
No.21

Jon Hicks said 1670 days ago:

Apologies – I missed out the small icon. Its now there, so just re-download the pack.

As for why it doesn’t work with theme – not sure I’m afraid.
No.22

ericdfields said 1670 days ago:

I’ve been snooping around the net for a while but i can’t seem to find a comprehensive list of all the various elements one can actually modify in userChrome.css and userContent.css. Is there such an animal?

Also, no matter how hard i try i can’t get Firefox to use the button icons i perscribe for the [submit], etc. buttons. I”m going by the post a few days back. Provided that button.png is in the same folder as userContent.css, shouldn’t ‘background: url(button.png) !important’ do the trick? I know the rest of this forum seems to be using a mac and, alas, i am on PC (stupid! stupid!), but i doubt this should be part of the problem.

Thanks guys—eric
No.23

Jon Hicks said 1669 days ago:

Eric – Thats right, that should be OK. Are you using Kevin Gerich’s fancy widgets at all? And have you specified background-color:transparent?
No.24

ericdfields said 1669 days ago:

Jon – I am not using Kevin Gerich’s fancy widgets at all. I tried them though… i think something is amiss in the world of userContent.css and userChrome.css editing in the land of XP Firefox (unfortunately i can’t try it on my linux box right now). As far as i can see, there’s no reason why it wouldn’t load the png as the button background. I’ve tried everything i could possibly think of as the url (relative, static, relocating the image, etc.).

if you scroll up, i think other PC users are having similar issues. i’ll snoop around moz’s bugzilla and see if it’s an issue at all. thanks for the inspiration though! i knew naught about the userChrome/Content files before i came upon your site!

Elsewhere

The Rissington Podcast - weekly shenanigans with Jon Oxton Hicksmade - unique handmade goods by Leigh Hicks

Hickr | RSS