This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

Hierdie gesprek is in die argief. Vra asseblief 'n nuwe vraag as jy hulp nodig het.

userChrome.css - cant figure out the right syntax

  • 3 antwoorde
  • 1 het hierdie probleem
  • 1 view
  • Laaste antwoord deur pedyngro

more options

I have a transparent #nav-bar and I want all the buttons on this bar to be opaque. But when I set the background-color of any button to white, it doesnt respect the shape of the button and it makes a big rectangle over the whole bar height. But I want to change only the smaller rectangle with rounded corners, which I can see when I hover the button. Im experiencing the same problem with the background-color of .tabbrowser-tab. Is there any syntax solving this issue? Any help appreciated.

I have a transparent #nav-bar and I want all the buttons on this bar to be opaque. But when I set the background-color of any button to white, it doesnt respect the shape of the button and it makes a big rectangle over the whole bar height. But I want to change only the smaller rectangle with rounded corners, which I can see when I hover the button. Im experiencing the same problem with the background-color of .tabbrowser-tab. Is there any syntax solving this issue? Any help appreciated.

All Replies (3)

more options

After hours of googling and trying I found a working code. Opaque buttons in transparent toolbar:

.toolbarbutton-icon, .toolbarbutton-badge-stack{

   background-color: white !important;

}

But I still cant figure out the syntax for hover and active...

more options

Hello there, you'll need to forward more info about the css you are using there, the "!important" only helps when website is ignoring style so you put important to set it in front. anyway the basic syntax for "hover" and "active":

.[style]:hover {

     ...

}

.[style]:active {

     ...

}

Gewysig op deur rety

more options

Thanks for a reply. I know, that the "!important" is sometimes superfluous, but it can't make something wrong, can it?

My problem: the syntax .tabbrowser-tab:not([selected]):hover .tab-content {} works fine, while .toolbarbutton-icon:hover, .toolbarbutton-badge-stack:hover{} doesn't work at all.

This is the whole (working) content of my userChrome.css:

.tabbrowser-tab .tab-background{background-color: rgba(242,241,244,0.7) !important;}

#nav-bar{background-color: transparent !important;}

.urlbar-page-action {display: none;}

#urlbar{opacity: 0.9 !important;}

.tabbrowser-tab:not([selected]):hover .tab-content {background-color: rgba(255,106,11,0.3) !important;}

.toolbarbutton-icon, .toolbarbutton-badge-stack{background-color: rgba(242,241,244,0.85) !important;}