Avatar for Username

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

This thread was archived. Please ask a new question if you need help.

In Firefox 58, is it possible to change the backgroud color and text color in the sidebar? Thanks in advance to anyone that can assist.

  • 3 replies
  • 5 have this problem
  • 5 views
  • Last reply by cor-el

nonspectas
nonspectas
more options

I had a theme prior to upgrading that made the sidebar and menu bar dark. I can't seem to find anything that works to make the sidebar dark or black. Any assistance would be greatly appreciated.

I had a theme prior to upgrading that made the sidebar and menu bar dark. I can't seem to find anything that works to make the sidebar dark or black. Any assistance would be greatly appreciated.

Chosen solution

Here's the userChrome.css code that I have been using for many years for the bookmarks sidebar, along with other areas of the UI. Discard what you don't want. Works pretty good in Quantum. 

/* Colored folders for bookmark sidebar, toolbar, menu button */

/* old code used for years - works in Fx 57 except sidebar column header is still white */

#bookmarks-view-children, #historyTree {
height: .75 em !important;
}
#bookmarks-view, #historyTree {
   background-color: rgb(235,235,235) !important;
}

#bookmarksMenuPopup * {
  background-color: rgb(235,235,235) !important;
  color: #333333 !important;
}

  /* Standard folder */
#bookmarks-view treechildren::-moz-tree-image(container),
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
  fill: #e8bb00 !important; /* slightly muted gold */
}
  /* Live Bookmark (RSS Feed) */
#bookmarks-view treechildren::-moz-tree-image(container, livemark),
#PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
  fill: orange !important;
}
  /* Smart bookmark folder */
#bookmarks-view treechildren::-moz-tree-image(container, query),
#PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
  fill: #69c !important; /* similar to blue smart folder color */
}
  /* These "containers" are SVG in the sidebar, not yet on the menu */
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
  fill: olive !important;
}
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
  fill: olive !important;
}
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
  fill: olive !important;
}

https://www.userchrome.org/

Read this answer in context 👍 1

All Replies (3)

the-edmeister
the-edmeister
  • Moderator
more options

Chosen Solution

Here's the userChrome.css code that I have been using for many years for the bookmarks sidebar, along with other areas of the UI. Discard what you don't want. Works pretty good in Quantum. 

/* Colored folders for bookmark sidebar, toolbar, menu button */

/* old code used for years - works in Fx 57 except sidebar column header is still white */

#bookmarks-view-children, #historyTree {
height: .75 em !important;
}
#bookmarks-view, #historyTree {
   background-color: rgb(235,235,235) !important;
}

#bookmarksMenuPopup * {
  background-color: rgb(235,235,235) !important;
  color: #333333 !important;
}

  /* Standard folder */
#bookmarks-view treechildren::-moz-tree-image(container),
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {
  fill: #e8bb00 !important; /* slightly muted gold */
}
  /* Live Bookmark (RSS Feed) */
#bookmarks-view treechildren::-moz-tree-image(container, livemark),
#PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {
  fill: orange !important;
}
  /* Smart bookmark folder */
#bookmarks-view treechildren::-moz-tree-image(container, query),
#PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon {
  fill: #69c !important; /* similar to blue smart folder color */
}
  /* These "containers" are SVG in the sidebar, not yet on the menu */
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
  fill: olive !important;
}
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
  fill: olive !important;
}
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
  fill: olive !important;
}

https://www.userchrome.org/

nonspectas
nonspectas Question owner
more options

Thank you! Between this and some other info I found, I was able to black out and change the font color on the sidebar. The top (where it says bookmarks and has the search bar) is still white, but I can live with that. Thanks for your help!

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

The sidebar header as id: #sidebar-header The search bar container has id: #sidebar-search-container