Replacing the Iceweasel button with an icon

Recent Iceweasel betas allows to replace the menu bar with a Iceweasel button. This is not enabled by default, but right-clicking on the menu bar allows to disable the menu bar, which enables the Iceweasel button.

The button is not exactly very appealing, and takes quite a lot of horizontal space on the tab bar. But with a few lines of CSS, this can fortunately be changed. Edit the chrome/userChrome.css file under your user profile, and add the following lines:

#appmenu-toolbar-button {
  list-style-image: url("chrome://branding/content/icon16.png");
}
#appmenu-toolbar-button > .toolbarbutton-text,
#appmenu-toolbar-button > .toolbarbutton-menu-dropmarker {
  display: none !important;
}

This what Iceweasel looks like, then:

2011-01-15 15:49:20+0200

firefox

You can leave a response, or trackback from your own site.

21 Responses to “Replacing the Iceweasel button with an icon”

  1. kabniel Says:

    Thanks, much better :)

    As a user of the pentadactyl (vimperator) addon, I had to choose between the menubar or the big iceweasel button, and i dont really need any of them, but i can live with the small icon.

  2. foo Says:

    3 logos in one screenshot, well done!

  3. Cambia el botón “Firefox” por un icono en Firefox 4 (también válido para Iceweasel) « De pingüinos y otras aves Says:

    [...] “Iceweasel” en el caso de Debian), por un iconito. Para ello, y como nos cuentan en el blog del desarrollador de Iceweasel deberemos añadir las siguientes líneas al archivo userChrome.css [...]

  4. glandium Says:

    foo: only one of them is always the iceweasel logo. The others vary.

  5. Dom Says:

    Mike, I thought putting this in /etc/iceweasel/profile/chrome/userChrome.css would apply it across all my profiles but it didn’t. Am I missing something or could it be just due to the fact that I’m running a beta version of Iceweasel (from mozilla.debian.net repository)? Meaning it should work once Iceweasel 4 lands in Debian?

  6. glandium Says:

    Dom: /etc/iceweasel/profile is only used when creating a profile.

  7. denk Says:

    Thanks for the tip, really nice!
    One thing is weird: the Iceweasel button appears on the right end of the window instead on the left. I would like to have it on the left. Any idea how to achieve that?

  8. glandium Says:

    denk: you most probably have changed the order of buttons in the tab bar before. Anyways, you are subject to https://bugzilla.mozilla.org/show_bug.cgi?id=626055

    You can fix this, though, by editing the localstore.rdf file in your user profile, search the RDF:Description with RDF:about=”chrome://browser/content/browser.xul#TabsToolbar” and change the currentset so that it starts with appmenu-toolbar-button.

    You can also press the “Restore Default Set” button in the customize dialog for toolbars, but you will lose your previous toolbar customizations.

  9. Anonymous Says:

    Now if only I could figure out why the bookmarks toolbar items have a huge amount of extra space to their right. Wherever I put them, they end up with a pile of blank space reserved to the right of the rightmost item.

  10. Anonymous Says:

    Why can’t “Customize” move the menu button around?

  11. glandium Says:

    > Why can’t “Customize” move the menu button around?

    Because it’s not moveable.

  12. Anonymous Says:

    @glandium: Yes, that much I could tell. Hence my asking why. :)

  13. glandium Says:

    Because the button is not meant to be moved. Except it’s painful in the unfortunate case where it ends up in an unexpected place. (which only happens if you used a previous beta *and* customized buttons on the tab bar).

  14. denk Says:

    @glandium: Thanks, that did the trick!

  15. will Says:

    I like the tweak, but it makes the tabbar a bit taller than with the plain text button. Any idea how to trim that back down? I tried adding 0px to padding/margin/border for the button but that didn’t seem to help. If I set the height to 15px the height looks right but the button gets squished :(

  16. glandium Says:

    will: try a negative padding value.

  17. Dom Says:

    @glandium: Oh… Thanks for clarifying that. I automatically assumed it’s there for the same purpose as /etc/iceweasel/prefs/…

  18. Anonymous Says:

    “not meant to be moved” still doesn’t answer my question, it just restates the thing I’m asking about. *Why* can’t I move the button when I can move anything else on the toolbars? Why not just treat the menu as a normal customizable toolbar item? For what reason does this limitation exist?

  19. glandium Says:

    Actually, it might just be about it being unremovable, which, as a side effect, makes it unmovable.

  20. Anonymous Says:

    @glandium: OK, that makes sense, and sounds a lot like a bug. “unremovable” definitely seems reasonable for the menu, since otherwise you could get into an unrecoverable situation. Moving it around seems reasonable though.

  21. shoes Says:

    I am truly eager of reading glandium.org » Blog Archive » Replacing the Iceweasel button with an icon concerning making new website, or even regarding SEO.

Leave a Reply