Where did you install Firefox from? Help Mozilla uncover 3rd party websites that offer problematic Firefox installation by taking part in our campaign. There will be swag, and you'll be featured in our blog if you manage to report at least 10 valid reports!

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.