Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Tabs to have a highlighted color when playing audio .

  • 3 replies
  • 1 has this problem
  • 233 views
  • Last reply by duuejv

more options

I am using this css to make tabs have a highlighted color when they are playing audio:

/* Turn tabs playing audio gold */

.tabbrowser-tab[soundplaying="true"] .tab-background {

background-color: #cc0 !important;

}

After updating to FF-119 does not work. Do i have to do any change to it , to work again ? Thank you in advance.

I am using this css to make tabs have a highlighted color when they are playing audio: /* Turn tabs playing audio gold */ .tabbrowser-tab[soundplaying="true"] .tab-background { background-color: #cc0 !important; } After updating to FF-119 does not work. Do i have to do any change to it , to work again ? Thank you in advance.

Chosen solution

I tryed: [soundplaying] instead of [soundplaying="true"] and it works again. Now my CSS is:

/* Turn tabs playing audio gold */

.tabbrowser-tab[soundplaying] .tab-background {

 background-color: #cc0 !important;

}

Read this answer in context 👍 0

All Replies (3)

more options

hello duuejv,

As of my last knowledge update in January 2022, the CSS you provided should work to change the background color of tabs that are playing audio in Mozilla Firefox. However, it's possible that there have been changes in Firefox's internal structure or CSS classes in newer versions that are causing this code to no longer work as expected.

To address this issue in a newer version of Firefox, you may need to adjust the CSS selector or code. Here's a modified version of the CSS that may work for Firefox 119:

/* Turn tabs playing audio gold in Firefox 119+ */

.tabbrowser-tab[playing-audio] .tab-content {

   background-color: #cc0 !important;

}

In this updated CSS:

1. The attribute selector [soundplaying="true"] has been replaced with [playing-audio]. This updated attribute selector should work with recent versions of Firefox.

2. The CSS class has been changed from .tab-background to .tab-content to match the newer structure of Firefox tabs.

Please insert this modified CSS code into your userChrome.css file. If you haven't used userChrome.css before, here are the steps:

1.mOpen a new tab in Firefox and enter about:config in the address bar.

2.Search for the preference toolkit.legacyUserProfileCustomizations.stylesheets and set it to true by double-clicking it.

3.Go to your Firefox profile folder. You can access it by typing about:support in the address bar and clicking the "Open Folder" button next to "Profile Folder."

4.In your profile folder, create a folder named chrome (if it doesn't already exist).

5.Inside the chrome folder, create a text file named userChrome.css.

6.Open the userChrome.css file with a text editor and paste the modified CSS code into it.

7.Save the file.

8.Restart Firefox.

Thanks Regards Arman

more options

It didn't work , and also this css you suggested to me breaked another css i have in the userChrome.css file, which is : /* ACTIVE TAB Gold BACKGROUND COLOR */ .tab-content[selected] {

 color: black !important;
 background-color: #FFFFA0 !important;

}

more options

Chosen Solution

I tryed: [soundplaying] instead of [soundplaying="true"] and it works again. Now my CSS is:

/* Turn tabs playing audio gold */

.tabbrowser-tab[soundplaying] .tab-background {

 background-color: #cc0 !important;

}