All Products Support Forum

Hi thanks for clicking.

I'm on Linux, Zorin OS, which is Ubuntu based if I'm not mistaken, very new to Linux.

Anyway, I've made a userChrome.css and done some changes I like to Firefox. It has been working fine until I tried to change the tab bar's overflow shadows when there are more tabs than there is space in the bar.

The rest of the css edits I've made in userChrome.css works fine but this overflow shadow reference Firefox just doesn't grab. I can live edit with the Toolbox and then it works fine, but when opening Firefox as default this css definition is as if gone.

Image 1: after live edit with Toolbox Image 2: before live edit with Toolbox Image 3: my userChrome.css

What can I do to fix this?

Thanks / p

When reloading a page, or navigating to a new page, the default Stop icon momentarily appears over my own Reload icon, and the default Reload icon also appears over my Stop icon.

Please see attached image and animation.

Any idea if this is a minor bug?

Below is my code to split the Reload button into Reload & Stop buttons, then to add text to the navigation buttons, and finally to add icons to the navigation buttons.

This anomaly happens whether or not I split the Reload & Stop buttons. With just a single Reload button, I'm also seeing the default Reload icon appear over my own.

Thank you.

/* ---------- SPLIT RELOAD BUTTON INTO RELOAD & STOP ------------- */

#reload-button, #stop-button {
   display: inherit !important; 
} 

#reload-button > .toolbarbutton-icon {
  -moz-appearance: none !important; 
}

/* ------------ ADD TEXT LABELS TO NAVIGATION TOOLBAR BUTTONS --------------- */

/* Shows both icon and label for toolbarbuttons */

toolbar .toolbarbutton-1[label]{
  flex-direction: column;
  align-items: center !important;
}

toolbar .toolbarbutton-1[label]:not([disabled]):hover{ background-color: var(--toolbarbutton-hover-background) !important; }

toolbar .toolbarbutton-1[label] > .toolbarbutton-icon,
toolbar .toolbarbutton-1[label] > .toolbarbutton-badge-stack{
  padding: var(--toolbarbutton-inner-padding) !important;
  padding-bottom: 0px !important;
  height: calc(var(--toolbarbutton-inner-padding) + 16px) !important;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

toolbar .toolbarbutton-1[label] > .toolbarbutton-text {
  display: flex !important;
  min-height: 16px !important;
  padding-top: 3px !important;
  padding-bottom: 6px !important;
  background-color: transparent !important;
  overflow: hidden;
  width: 9ch; /* changes space between buttons */
}
toolbar .toolbarbutton-1[label] > .toolbarbutton-text::before{
  margin-inline: auto;
 }
:root:not([uidensity="compact"]) toolbar .toolbarbutton-1[label] > .toolbarbutton-text{ padding: 2px !important; }

/* ------------ ADD CUSTOM ICONS TO NAVIGATION TOOLBAR BUTTONS ----------- */

#back-button {
   list-style-image: url("image/back.png") !important;
   padding-top: 8px !important;
}
#back-button image{
   max-height: 16px !important; 
   max-width: 16px !important;
   padding: 0px !important;
   margin-bottom: 3px !important;
}
#forward-button {
   list-style-image: url("image/forward.png") !important;
   padding-top: 8px !important;
}
#forward-button image{
   max-height: 16px !important; 
   max-width: 16px !important;
   padding: 0px !important;
   margin-bottom: 3px !important;
}
#reload-button {
   list-style-image: url("image/reload.png") !important;
   padding-top: 8px !important;
}
#reload-button image{
   max-height: 16px !important; 
   max-width: 16px !important;
   padding: 0px !important;
   margin-bottom: 3px !important;
}
#stop-button {
   list-style-image: url("image/stop.png") !important;
   padding-top: 8px !important;
}
#stop-button image{
   max-height: 16px !important; 
   max-width: 16px !important;
   padding: 0px !important;
   margin-bottom: 3px !important;
}
#print-button {
   list-style-image: url("image/print.png") !important;
   padding-top: 8px !important;
}
#print-button image{
   max-height: 16px !important; 
   max-width: 16px !important;
   padding: 0px !important;
   margin-bottom: 3px !important;
}
#home-button {
   list-style-image: url("image/home.png") !important;
   padding-top: 8px !important;
}
#home-button image{
   max-height: 16px !important; 
   max-width: 16px !important;
   padding: 0px !important;
   margin-bottom: 3px !important;
}