u/Cobalt288

Hi, I've been trying to follow guides to get the custom CSS stuff working as kind of a newcomer to this stuff. In particular I want to either hide the little speaker icon on a tab that is playing audio, or disable the event of muting the audio when clicking on the icon, as I have often accidentally muted a tab playing audio in the background while doing other things. I have the tabs set up such that they are just on the left side of the screen, with only the page icons visible, but the speaker icon takes up about a quarter of the page icon and is easy to accidentally click.

I have everything set up correctly as far as I can tell:

• I have the setting 'toolkit.legacyUserProfileCustomizations.stylesheets' set to true in about:config;
• I have gone to the user folder in about:profiles and about:support (for me, \AppData\Roaming\Mozilla\Firefox\Profiles\{xxxxx}.default-release) and created a folder within named 'chrome';
• Within 'chrome', I have created two css files named 'userChrome.css' and 'userContent.css' and verified they are not .txt;
• Within userChrome.css, I have entered the following code snippet based upon answers from previous times a similar question has been asked on different forums:

​

.tab-audio-button{
  pointer-events: none !important;
  /* alternatively, to hide button altogether */ 
  /* display: none !important; */
} 

• Saved the userChrome.css file, and restarted Firefox via "Restart normally..." in about:profiles

However, after going through all of these steps, the speaker icon still mutes upon clicking it. I have tried it the other way, removing the pointer-events code and replacing with display, but this also does not work. Any help would be appreciated.

I am on Firefox Version 152.0.4, and Windows Version 25H2, build 26200.8655.