Firefox Forum podrške

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

I've been trying to connect to discord for a while, left it on for 2 hours and hasnt loaded. when i opened the console log, all it said was "Firefox can’t establish a connection to the server at wss://gateway.discord.gg/?encoding=json&v=9&compress=zlib-stream" all over. Please help.

Hi All,

I'm trying to set the border color for my url & search bars to gray when non-focused, and blue when receiving the focus.

The following code works for the search bar, but the url bar is receiving a separate blue border around the gray border, instead of changing the color from gray to blue.

Can someone suggest how I might set the url bar to blue (just a single border, not the double it has now), both when it has focus and when it's expanded?

Thank you!

/* set non-focused url & search bars to gray border */
#urlbar > #urlbar-background, #urlbar[breakout][breakout-extend] > #urlbar-background, #searchbar { border: 1px solid #a1a6b5 !important; outline: none !important; border-radius: 0px !important; }

/* set focused search bar to blue border */
#urlbar-background, #urlbar[breakout][breakout-extend] > #urlbar-background:focus-within, #searchbar:focus-within { border: 1px solid #0078d7 !important; }

/* set focused url bar to blue border */
#urlbar-background, #urlbar[breakout][breakout-extend] > #urlbar-background:focus-within, #urlbar:focus-within { border: 1px solid #0078d7 !important; }

Hi All,

I'm trying to change the appearance of the "Bookmarks Toolbar / Chevron >>" popup menu, which (after version 88) has turned bright white with extra padding between menu items and rounded corners.

I'm a fan of system menus, so I would really like the popup menu to look like the regular bookmarks menu from the top menu bar (see attached image).

I also like the subtle chiseled vertical line separating the favicons and the descriptions, and the 1px gray border around the menu, plus square corners.

I took a guess at some of the variable names, but only the menu's background color has changed.

Maybe someone knows how to change other attributes such as border color, radius, menu-item-height, padding, and add in the 3D vertical column line?

Thank you!

Here is my first attempt at the code...

#PersonalToolbar menupopup {
  /* Text color */
  --menu-color: #000 !important;
  --arrowpanel-color: #000 !important;
  --panel-color: #000 !important;
  /* Background color */
  --menu-background-color:  #f0f0f0 !important;
  --arrowpanel-background: #f0f0f0 !important;
  --panel-background: #f0f0f0 !important;
  /* Border color (if any) */
  --menu-border-color: #606060 !important;  /* not working on boomarks toolbar menu */
  --menu-border: 1px !important;  /* not working on boomarks toolbar menu */
  --menu-border-radius: 0px !important;  /* not working on boomarks toolbar menu */
}

/*** Tighten up drop-down/context/popup menu spacing (8 Sep 2021) ***/
menupopup:not(.in-menulist) > menuitem, 
menupopup:not(.in-menulist) > menu {
  padding-block: 0px !important; /* reduce to 3px, 2px, 1px or 0px as needed */ 
  min-height: unset !important; /* v92.0 - for padding below 4px */
}