We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Avatar for Username

Pretraži podršku

Izbjegni prevare podrške. Nikad te nećemo tražiti da nas nazoveš, da nam pošalješ telefonski broj ili da podijeliš osobne podatke. Prijavi sumnjive radnje pomoću opcije „Prijavi zlouporabu”.

Saznaj više

Ova tema je arhivirana. Postavi novo pitanje ako trebaš pomoć.

userChrome.css is not being applied

  • 2 odgovora
  • 1 ima ovaj problem
  • 1 prikaz
  • Posljednji odgovor od cor-el

mhlangalyton
mhlangalyton
more options

I am trying to have Firefox show an "X" on every tab as soon as I hover above it. I followed a certain article and implemented this code:

/* Show Tab Close buttons only when hovered */

  1. tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]) > .tab-stack > .tab-content > .tab-close-button { 
 visibility: collapse !important;
 opacity: 0 !important;
 transition: all 250ms ease-in-out !important;

}

  1. tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]):hover > .tab-stack > .tab-content > .tab-close-button { 
 visibility: visible !important;
 opacity: 1 !important;
 transition: all 250ms ease-in-out !important;;

}

  1. tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]) > .tab-stack > .tab-content > .tab-close-button { 
 display: -moz-box !important;

}


This code is however not being implemented no matter how many times I restart Firefox. 'toolkit.legacyUserProfileCustomizations.stylesheets' is set to True The location is userChrome.css is '/home/user1/.mozilla/firefox/yqomjsh9.default-release-1672744596809/chrome/userChrome.css'

What could be the issue? I tried adding executable permissions using "chmod" but that did not change anything.

I am trying to have Firefox show an "X" on every tab as soon as I hover above it. I followed a certain article and implemented this code: /* Show Tab Close buttons only when hovered */ #tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]) > .tab-stack > .tab-content > .tab-close-button { visibility: collapse !important; opacity: 0 !important; transition: all 250ms ease-in-out !important; } #tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]):hover > .tab-stack > .tab-content > .tab-close-button { visibility: visible !important; opacity: 1 !important; transition: all 250ms ease-in-out !important;; } #tabbrowser-tabs > .tabbrowser-tab:not([pinned="true"]) > .tab-stack > .tab-content > .tab-close-button { display: -moz-box !important; } This code is however not being implemented no matter how many times I restart Firefox. 'toolkit.legacyUserProfileCustomizations.stylesheets' is set to True The location is userChrome.css is '/home/user1/.mozilla/firefox/yqomjsh9.default-release-1672744596809/chrome/userChrome.css' What could be the issue? I tried adding executable permissions using "chmod" but that did not change anything.

Izabrano rješenje

Try to keep the code simple and do not try to add all nodes (you missed #tabbrowser-arrowscrollbox). 

/* Show Tab Close buttons only when hovered */
#tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
  visibility: collapse !important;
  opacity: 0 !important;
  transition: all 250ms ease-in-out !important;
}
#tabbrowser-tabs .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  visibility: visible !important;
  opacity: 1 !important;
  transition: all 250ms ease-in-out !important;;
}
#tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
  /* only use one of these */
  display: -moz-box !important; /*xx-112*/
  display: inline-flex !important; /*113+*/
}

/* TAB: close button colors on hover */
.tab-close-button:hover {
  background-color: rgba(255,0,0,.7) !important;
  fill: white !important;
}

Pročitaj ovaj odgovor u kontekstu 👍 2

Svi odgovori (2)

James
James
  • Moderator
  • Top 10 Contributor
more options

People are still welcome to try and get help with userChrome.css edits here as there are some people familiar with such here.

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Odabrano rješenje

Try to keep the code simple and do not try to add all nodes (you missed #tabbrowser-arrowscrollbox). 

/* Show Tab Close buttons only when hovered */
#tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
  visibility: collapse !important;
  opacity: 0 !important;
  transition: all 250ms ease-in-out !important;
}
#tabbrowser-tabs .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  visibility: visible !important;
  opacity: 1 !important;
  transition: all 250ms ease-in-out !important;;
}
#tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
  /* only use one of these */
  display: -moz-box !important; /*xx-112*/
  display: inline-flex !important; /*113+*/
}

/* TAB: close button colors on hover */
.tab-close-button:hover {
  background-color: rgba(255,0,0,.7) !important;
  fill: white !important;
}

Izmjenjeno od cor-el