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

Cuireadh an snáithe seo sa chartlann. Cuir ceist nua má tá cabhair uait.

userChrome.css is not being applied

  • 2 fhreagra
  • 1 leis an bhfadhb seo
  • 112 views
  • Freagra is déanaí ó cor-el

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.

Réiteach roghnaithe

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;
}

Read this answer in context 👍 2

All Replies (2)

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.

more options

Réiteach Roghnaithe

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;
}

Athraithe ag cor-el ar