Changing/hiding the hamburger button icon in Firefox

[LuvKomputrs]

For those of you who don't like the hamburger button icon appearance in Firefox here are two ways to change it with using some handy userChrome.css tweaks.

1. Hiding the hamburger button icon:

Copy and paste the following code to your userChrome.css file.

Code: Select all

#PanelUI-menu-button { display: none !important;
 }

And voila! No more hamburger button icon!
https://s8.postimg.org/6mhjrswjp/hide_h ... tweaks.png

2. Changing the hamburger button icon:

Copy and paste the following code to your userChrome.css file.

Code: Select all

#PanelUI-menu-button 
{
    list-style-image: none !important;
    background: transparent url("https://s8.postimg.org/z5m57c739/blackcat.png") no-repeat  !important;
    background-size: 18px !important;
}

Second method:

Code: Select all

#PanelUI-menu-button
{
    list-style-image: none !important;
    background: transparent url("blackcat.png") no-repeat  !important;
    background-size: 18px !important;

And voila! Instead of the three line hamburger button icon there's a little black cat icon instead!
https://s8.postimg.org/rjdrwhhpx/change ... tweaks.png
https://s8.postimg.org/u78sao05x/with_d ... .luvko.png

Method 1. You can also change the image in the url("https://s8.postimg.org/z5m57c739/blackcat.png") to one of your choice.

Method 2. You can also change the image here ( url("blackcat.png") to one of your choice.
Make sure the image is saved in your chrome folder for userChrome.css.
https://s8.postimg.org/hsm0a30v9/user_C ... folder.png

You can also change the size of the px depending on how large your image is.
Try not to make it larger than 20px at the most for the best appearance for your browser.

3. Make sure that you have this in your userChrome.css in the very first line for it to function properly. Do not edit or remove it.
All the rest of your css code comes below that line as you edit or add to your userChrome.css.

Code: Select all

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 

Here is an example of content in a userChrome.css file.
https://s8.postimg.org/g768bua7p/exampl ... tweaks.png
(Many of your css codes may be different in what you add or remove, yet the placement of code in the file is similar to the example shown.)

To tweak or not to tweak? That is the question!

Have fun! and Happy userChrome.css Tweaking!

[efox99]

Nice job. I might use this code and slap this baby ( ) on. Would work lovely with the dark theme.

[mightyglydd]

^IMIO that should have been the new Fx icon... Sure is here

[LuvKomputrs]

Nice job. I might use this code and slap this baby ( ) on. Would work lovely with the dark theme.

Thanks!
Love that icon!

[BuddhaNature]

Thanks for that, LuvKomputrs. You just taught me something about referencing external content in userChrome.css files.

However, I think one part of the code you posted is in error:

3. Make sure that you have this in your userChrome.css in the very first line for it to function properly. Do not edit or remove it.
All the rest of your css code comes below that line as you edit or add to your userChrome.css.

Code: Select all

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /*

The part that is in error is that you end that line with the characters " /*" Doing that, in effect starting a "comment" there, could potentially disrupt some or all of the code that follows from functioning properly - it depends on the code that follows and position of other any comments in that code. So the correct code-line should be:

Code: Select all

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

You also show that error in the image: example_of_user_Chrome.css

[Brummelchen]

and how do you enter settings for features which are not available in hamburger menu or alt-menu?

[LuvKomputrs]

@BuddhaNature
Thanks for pointing that out.

I amended my original post and the image with the correct code omitting the /*.
Now it shows correctly:

Code: Select all

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

Note: I used an example of my userChrome.old file instead of my userChrome.css file.

The amended example of userChrome.css file image.
https://s8.postimg.org/g768bua7p/exampl ... tweaks.png

[LuvKomputrs]

and how do you enter settings for features which are not available in hamburger menu or alt-menu?

What particular features are you referring to and would like to add?

I did some research online as well to find out examples of adding code to a userChrome.css file.

Two very handy sites that I use for finding out information:
https://stackoverflow.com/questions/448 ... ontent-css
https://www.userchrome.org/find-user-style-recipes.html

[BuddhaNature]

@LuvKomputrs
Just out of sheer curiosity (which got the cat, gulp); why didn't you just put the "blackcat.png" image in the chrome folder and then use the code:

Code: Select all

#PanelUI-menu-button
{
    list-style-image: none !important;
    background: transparent url("blackcat.png") no-repeat  !important;
    background-size: 18px !important;
}

I tried, this works as expected. But if I rename the "blackcat.png" to something else, then restart FF, nothing shows up where the "hamburger" icon should be (though if I click in the space were the icon should be I still get the dropdown menu). All of which suggests that, if using your original code, and, for whatever reason, a connection isn't made to the address you have the image stored at then the user doesn't get the cat - just blank space.

Also, if accessing the image from a website there is a (admittedly, very minor) performance hit on FF. Got to fetch the image from the website on every launch.

[LuvKomputrs]

@LuvKomputrs
Just out of sheer curiosity (which got the cat, gulp); why didn't you just put the "blackcat.png" image in the chrome folder and then use the code:

Code: Select all

#PanelUI-menu-button
{
    list-style-image: none !important;
    background: transparent url("blackcat.png") no-repeat  !important;
    background-size: 18px !important;
}

I tried, this works as expected. But if I rename the "blackcat.png" to something else, then restart FF, nothing shows up where the "hamburger" icon should be (though if I click in the space were the icon should be I still get the dropdown menu). All of which suggests that, if using your original code, and, for whatever reason, a connection isn't made to the address you have the image stored at then the user doesn't get the cat - just blank space.

Also, if accessing the image from a website there is a (admittedly, very minor) performance hit on FF. Got to fetch the image from the website on every launch.

Good point.

You've got to save the image on your computer and put it in the chrome folder where you have your userChrome.css file.
https://s8.postimg.org/hsm0a30v9/user_C ... folder.png

And another example of userChrome.css.
https://s8.postimg.org/kmp5nmq7p/anothe ... tweaks.png

With different code in userChrome.css as shown:

Code: Select all

#PanelUI-menu-button
{
    list-style-image: none !important;
    background: transparent url("blackcat.png") no-repeat  !important;
    background-size: 18px !important;

https://s8.postimg.org/u78sao05x/with_d ... .luvko.png

[Frank Lion]

For those not familiar with this chrome folder/ userChrome.css stuff, don't forget there is an easy way to get it here - http://forums.mozillazine.org/viewtopic ... #p14005643

There are also quite a few tips on the subject of .css generally on the pages of that thread.



@LuvKomputrs - don't forget to moz-ord the hamburger soon, as many people like it on the left.

[LuvKomputrs]

For those not familiar with this chrome folder/ userChrome.css stuff, don't forget there is an easy way to get it here - http://forums.mozillazine.org/viewtopic ... #p14005643

There are also quite a few tips on the subject of .css generally on the pages of that thread.


@LuvKomputrs - don't forget to moz-ord the hamburger soon, as many people like it on the left.

Thanks for the link to that thread!
Am not quite sure yet on how to moz-ord that dang hamburger button icon yet.
I also like it on the left too.
I want it after the forward-button icon and have it positioned there with a different icon.
Haven't gotten it quite figured out yet, but, I'm working on it!
If anyone else wants to add that code here in this thread please don't hestiate.
Thanks everyone for the responses and tips!

[Suze]

my cat came soooo small its llike a black blotch

[LuvKomputrs]

my cat came soooo small its llike a black blotch

Sorry to hear that.

The image I used was very small to begin with 18px in size.

Have you tried saving another image and replacing the cat image?

Here's an image link that you can download and save on your computer for a larger cat.
Please feel free to use it.
https://s8.postimg.org/nydazbdg5/blackkitty.png


This one is 24px in size.

You can see this cat is a little larger in the image here.
https://s8.postimg.org/qqkid1nad/blackk ... tweaks.png

Code: Select all

#PanelUI-menu-button
{
    list-style-image: none !important;
    background: transparent url("blackkitty.png") no-repeat  !important;
    background-size: 24px !important;
}

You can replace the image url("blackkitty.png") with one of your choice.

Again make sure that you have the image saved in your userChrome.css file in your chrome folder.
https://s8.postimg.org/vdqkeisk5/luvkom ... .files.png

Hope this helps you and Happy userChrome.css tweaking!

[Mory]

hi,

nice !! thanks LuvKomputrs

But, there's something wrong with mine. Have a look : the image isn't at the right place.
When the mouse's over the real place, you can see it.
So, the new image is a little higher/left.

http://pix.toile-libre.org/upload/origi ... 433766.jpg

an idea ?

thank you