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

css code to customize Bookmark Toolbar DropDowns

more options

Hi, I have an issue with making the separators in the bookmark toolbar drop-downs visible. I am running Firefox 95 with the Quantum - dark Blue theme installed. I am running Linix Mint Uma.

The dropdown have separator - space - but no line showing that there is a separator. I have tried many ways to make the separators visible and with light-grey colouring in the userChrome.css file but nothing changes.

Anybody have any idea what can be done or where I might change the Quantum-DarkBlue coding to incorporate the visible separators?

Haagen

Hi, I have an issue with making the separators in the bookmark toolbar drop-downs visible. I am running Firefox 95 with the Quantum - dark Blue theme installed. I am running Linix Mint Uma. The dropdown have separator - space - but no line showing that there is a separator. I have tried many ways to make the separators visible and with light-grey colouring in the userChrome.css file but nothing changes. Anybody have any idea what can be done or where I might change the Quantum-DarkBlue coding to incorporate the visible separators? Haagen

Chosen solution

Could you try something alone these lines:

#PlacesToolbar {
  --panel-separator-color: #ccc !important;
}


--panel-separator-color is a CSS variable which is defined centrally for each theme and then referenced when the color of a separator in a newer style drop-down needs to be specified. If you were to attach a new rule for this variable to the :root element, it would affect all separators in the browser. The above rule changes the definition just for the Bookmarks Toolbar.

Success?

P.S. In case you were wondering how I knew which variable was setting the color, it was by using the Browser Toolbox to poke around. https://developer.mozilla.org/docs/Tools/Browser_Toolbox

Read this answer in context 👍 0

All Replies (2)

more options

Chosen Solution

Could you try something alone these lines:

#PlacesToolbar {
  --panel-separator-color: #ccc !important;
}


--panel-separator-color is a CSS variable which is defined centrally for each theme and then referenced when the color of a separator in a newer style drop-down needs to be specified. If you were to attach a new rule for this variable to the :root element, it would affect all separators in the browser. The above rule changes the definition just for the Bookmarks Toolbar.

Success?

P.S. In case you were wondering how I knew which variable was setting the color, it was by using the Browser Toolbox to poke around. https://developer.mozilla.org/docs/Tools/Browser_Toolbox

more options

Thank you very much. That did the trick.