Welcome to the Power Users community on Codidact!

Power Users is a Q&A site for questions about the usage of computer software and hardware. We are still a small site and would like to grow, so please consider joining our community. We are looking forward to your questions and answers; they are the building blocks of a repository of knowledge we are building together.

Post History

60%

+1 −0

Q&A Hide badge from Firefox extension icon

The default icon of the Tunnelbear Firefox extension looks like this: I would like to hide the "Off" badge so that it looks like this: Following a similar process as in the answer https://pow...

0 answers · posted 2mo ago by samcarter‭ · edited 2mo ago by samcarter‭

Question firefox

#4: Post edited by

samcarter‭ · 2024-03-20T21:25:38Z (about 2 months ago)

Copy Link

Raw

Markdown

The default icon of the [Tunnelbear Firefox extension](https://addons.mozilla.org/en-GB/firefox/addon/tunnelbear-vpn-firefox) looks like this:
~~![Icon of the Tunnelbear extension depicting an empty pot, overlaid by a large badge with the word "Off"](https://powerusers.codidact.com/uploads/zdft1zsy1572o0j1b2xwewqymnha)~~
I would like to hide the "Off" badge so that it looks like this:
~~![Icon of the Tunnelbear extension depicting just an empty pot, the large badge with the word "Off" is missing](https://powerusers.codidact.com/uploads/65m9peb5jj3uq6bwkdukw1j9evrm)~~
Following a similar process as in the answer https://powerusers.codidact.com/posts/288206/288207#answer-288207 I put together the following code
```css
.webextension-browser-action[data-extensionid="browser@tunnelbear.com"] .toolbarbutton-badge {
display: none;
}
```
If I try this in the style editor of the browser toolbox, it successfully removes the badge.
To make this change permanent, I tried to add the code to my `userChrome.css` file, however after restarting firefox and opening the first webpage, the badge reappears. Any ideas why this works in the browser toolbox but not if used in the `userChrome.css` file?
Environment:
- Firefox 115.9 ESR
- macOS 14.4

The default icon of the [Tunnelbear Firefox extension](https://addons.mozilla.org/en-GB/firefox/addon/tunnelbear-vpn-firefox) looks like this:
![Icon of the Tunnelbear extension depicting an empty tunnel opening, overlaid by a large badge with the word "Off"](https://powerusers.codidact.com/uploads/zdft1zsy1572o0j1b2xwewqymnha)
I would like to hide the "Off" badge so that it looks like this:
![Icon of the Tunnelbear extension depicting just an empty tunnel opening, the large badge with the word "Off" is missing](https://powerusers.codidact.com/uploads/65m9peb5jj3uq6bwkdukw1j9evrm)
Following a similar process as in the answer https://powerusers.codidact.com/posts/288206/288207#answer-288207 I put together the following code
```css
.webextension-browser-action[data-extensionid="browser@tunnelbear.com"] .toolbarbutton-badge {
display: none;
}
```
If I try this in the style editor of the browser toolbox, it successfully removes the badge.
To make this change permanent, I tried to add the code to my `userChrome.css` file, however after restarting firefox and opening the first webpage, the badge reappears. Any ideas why this works in the browser toolbox but not if used in the `userChrome.css` file?
Environment:
- Firefox 115.9 ESR
- macOS 14.4

#3: Post edited by

samcarter‭ · 2024-03-20T21:23:47Z (about 2 months ago)
Cherry pick parts of @Michael's suggested edit

Copy Link

Raw

Markdown

~~Hide badge from firefox extension icon~~

Hide badge from Firefox extension icon

The default icon of the [Tunnelbear Firefox extension](https://addons.mozilla.org/en-GB/firefox/addon/tunnelbear-vpn-firefox) looks like this:
![Icon of the Tunnelbear extension depicting an empty pot, overlaid by a large badge with the word "Off"](https://powerusers.codidact.com/uploads/zdft1zsy1572o0j1b2xwewqymnha)
I would like to hide the "Off" badge so that it looks like this:
![Icon of the Tunnelbear extension depicting just an empty pot, the large badge with the word "Off" is missing](https://powerusers.codidact.com/uploads/65m9peb5jj3uq6bwkdukw1j9evrm)
Following a similar process as in the answer https://powerusers.codidact.com/posts/288206/288207#answer-288207 I put together the following code
~~```~~
.webextension-browser-action[data-extensionid="browser@tunnelbear.com"] .toolbarbutton-badge {
display: none;
}
```
If I try this in the style editor of the browser toolbox, it successfully removes the badge.
To make this change permanent, I tried to add the code to my `userChrome.css` file, however after restarting firefox and opening the first webpage, the badge reappears. Any ideas why this works in the browser toolbox but not if used in the `userChrome.css` file?
Environment:
- Firefox 115.9 ESR
- macOS 14.4

The default icon of the [Tunnelbear Firefox extension](https://addons.mozilla.org/en-GB/firefox/addon/tunnelbear-vpn-firefox) looks like this:
![Icon of the Tunnelbear extension depicting an empty pot, overlaid by a large badge with the word "Off"](https://powerusers.codidact.com/uploads/zdft1zsy1572o0j1b2xwewqymnha)
I would like to hide the "Off" badge so that it looks like this:
![Icon of the Tunnelbear extension depicting just an empty pot, the large badge with the word "Off" is missing](https://powerusers.codidact.com/uploads/65m9peb5jj3uq6bwkdukw1j9evrm)
Following a similar process as in the answer https://powerusers.codidact.com/posts/288206/288207#answer-288207 I put together the following code
```css
.webextension-browser-action[data-extensionid="browser@tunnelbear.com"] .toolbarbutton-badge {
display: none;
}
```
If I try this in the style editor of the browser toolbox, it successfully removes the badge.
To make this change permanent, I tried to add the code to my `userChrome.css` file, however after restarting firefox and opening the first webpage, the badge reappears. Any ideas why this works in the browser toolbox but not if used in the `userChrome.css` file?
Environment:
- Firefox 115.9 ESR
- macOS 14.4

#2: Post edited by

samcarter‭ · 2024-03-19T23:04:00Z (about 2 months ago)

Copy Link

Raw

Markdown

The default icon of the [Tunnelbear Firefox extension](https://addons.mozilla.org/en-GB/firefox/addon/tunnelbear-vpn-firefox) looks like this:
![Icon of the Tunnelbear extension depicting an empty pot, overlaid by a large badge with the word "Off"](https://powerusers.codidact.com/uploads/zdft1zsy1572o0j1b2xwewqymnha)
I would like to hide the "Off" badge so that it looks like this:
![Icon of the Tunnelbear extension depicting just an empty pot, the large badge with the word "Off" is missing](https://powerusers.codidact.com/uploads/65m9peb5jj3uq6bwkdukw1j9evrm)
Following a similar process as in the answer https://powerusers.codidact.com/posts/288206/288207#answer-288207 I put together the following code
```
.webextension-browser-action[data-extensionid="browser@tunnelbear.com"] .toolbarbutton-badge {
display: none;
}
```
If I try this in the style editor of the browser toolbox, it successfully removes the badge.
To make this change permanent, I tried to add the code to my `userChrome.css` file, however after restarting firefox, the badge reappears. Any ideas why this works in the browser toolbox but not if used in the `userChrome.css` file?
Environment:
- Firefox 115.9 ESR
- macOS 14.4

The default icon of the [Tunnelbear Firefox extension](https://addons.mozilla.org/en-GB/firefox/addon/tunnelbear-vpn-firefox) looks like this:
![Icon of the Tunnelbear extension depicting an empty pot, overlaid by a large badge with the word "Off"](https://powerusers.codidact.com/uploads/zdft1zsy1572o0j1b2xwewqymnha)
I would like to hide the "Off" badge so that it looks like this:
![Icon of the Tunnelbear extension depicting just an empty pot, the large badge with the word "Off" is missing](https://powerusers.codidact.com/uploads/65m9peb5jj3uq6bwkdukw1j9evrm)
Following a similar process as in the answer https://powerusers.codidact.com/posts/288206/288207#answer-288207 I put together the following code
```
.webextension-browser-action[data-extensionid="browser@tunnelbear.com"] .toolbarbutton-badge {
display: none;
}
```
If I try this in the style editor of the browser toolbox, it successfully removes the badge.
To make this change permanent, I tried to add the code to my `userChrome.css` file, however after restarting firefox and opening the first webpage, the badge reappears. Any ideas why this works in the browser toolbox but not if used in the `userChrome.css` file?
Environment:
- Firefox 115.9 ESR
- macOS 14.4

#1: Initial revision by

samcarter‭ · 2024-03-19T22:35:46Z (about 2 months ago)

Copy Link

Raw

Markdown

Hide badge from firefox extension icon

The default icon of the [Tunnelbear Firefox extension](https://addons.mozilla.org/en-GB/firefox/addon/tunnelbear-vpn-firefox) looks like this:

![Icon of the Tunnelbear extension depicting an empty pot, overlaid by a large badge with the word "Off"](https://powerusers.codidact.com/uploads/zdft1zsy1572o0j1b2xwewqymnha)

I would like to hide the "Off" badge so that it looks like this:

![Icon of the Tunnelbear extension depicting just an empty pot, the large badge with the word "Off" is missing](https://powerusers.codidact.com/uploads/65m9peb5jj3uq6bwkdukw1j9evrm)

Following a similar process as in the answer https://powerusers.codidact.com/posts/288206/288207#answer-288207 I put together the following code

```
.webextension-browser-action[data-extensionid="browser@tunnelbear.com"] .toolbarbutton-badge {
    display: none;
}
```

If I try this in the style editor of the browser toolbox, it successfully removes the badge. 

To make this change permanent, I tried to add the code to my `userChrome.css` file, however after restarting firefox, the badge reappears. Any ideas why this works in the browser toolbox but not if used in the `userChrome.css` file? 

Environment:

- Firefox 115.9 ESR
- macOS 14.4

firefox

Communities

Post History