We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

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 for Firefox 68 needed/MacOS Mojave 10.14.6

more options

Running 10.14.6 with iMac 10,1 (Late '09) unsupported with dosdude's Mojave patcher. Since the GPU is non-metal I am forced to use Dark Mode, which turns the Firefox 68esr bookmarks/history sidebars (among other Firefox items) to almost unreadable black text on black background. Partial workaround I have found is this CSS, below, which works perfectly for the history sidebar, but not for the bookmarks sidebar. (Note, the same CSS works perfectly in Waterfox Classic, using Classic Theme Restorer, Custom CSS Code, for both history and bookmarks, where the different sidebars can be selected from buttons, instead of only from a dropdown in the FF68.)

EDIT: PLEASE NOTE, after posting, the CSS is not formatted correctly. Not seeing any way to format as code, nor do I see any other formatting options for this original post. Several of the number/hash signs (#) are replaced by 1, which is not correct. Other formatting issues as well. PLEASE SEE SCREENSHOT OF CORRECTLY FORMATTED CSS: https://i.postimg.cc/XNrPjtZG/CSS-correctly-formatted.png

/*bookmarks sidebar*/

:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-row {
  margin-top: 2.0px !important;
  min-height: 14.7px !important;
  height: 14.7px !important;
}

#sidebar-header,#sidebar-search-container,#bookmarks-view-children,#historyTree {
  color: #000!important;
  background-color: #EDEDED !important;
  -moz-appearance:none!important;
  border-color:transparent !important;
}
#bookmarksPanel, #history-panel {
  color: #fff !important;
  background-color: #F5F5F5 !important;
}
/* Bookmarks sidebar: change hover color */
#bookmarks-view treechildren::-moz-tree-cell(hover) {
  background-color: #989898 !important;
}

With the history sidebar selected the appearance this CSS produces is black text on light grey background, which is quite readable and not distracting. https://i.postimg.cc/q71PcgsZ/FF68esr-history-with-CSS.png

But with the bookmarks sidebar selected, the same CSS creates an anemic white text on dark grey background. https://i.postimg.cc/CxzkMQvB/FF68esr-bookmarks-with-CSS.png

Wondering what edits or additions I can make to the above CSS to allow the FF68 bookmarks sidebar to have the same appearance. (Or possibly needs completely re-written CSS?) Since it works perfectly for both bookmarks and history in Waterfox, could it be the issue is with how the current FF CSS doesn't take into account the way the bookmarks sidebar is selected only from a dropdown? https://i.postimg.cc/j50Jqq9C/FF-sidebar-selection-dropdown.png

Running 10.14.6 with iMac 10,1 (Late '09) unsupported with dosdude's Mojave patcher. Since the GPU is non-metal I am forced to use Dark Mode, which turns the Firefox 68esr bookmarks/history sidebars (among other Firefox items) to almost unreadable black text on black background. Partial workaround I have found is this CSS, below, which works perfectly for the history sidebar, but not for the bookmarks sidebar. (Note, the same CSS works perfectly in Waterfox Classic, using Classic Theme Restorer, Custom CSS Code, for both history and bookmarks, where the different sidebars can be selected from buttons, instead of only from a dropdown in the FF68.) EDIT: PLEASE NOTE, after posting, the CSS is not formatted correctly. Not seeing any way to format as code, nor do I see any other formatting options for this original post. Several of the number/hash signs (#) are replaced by 1, which is not correct. Other formatting issues as well. PLEASE SEE SCREENSHOT OF CORRECTLY FORMATTED CSS: https://i.postimg.cc/XNrPjtZG/CSS-correctly-formatted.png <pre><nowiki>/*bookmarks sidebar*/ :-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-row { margin-top: 2.0px !important; min-height: 14.7px !important; height: 14.7px !important; } #sidebar-header,#sidebar-search-container,#bookmarks-view-children,#historyTree { color: #000!important; background-color: #EDEDED !important; -moz-appearance:none!important; border-color:transparent !important; } #bookmarksPanel, #history-panel { color: #fff !important; background-color: #F5F5F5 !important; } /* Bookmarks sidebar: change hover color */ #bookmarks-view treechildren::-moz-tree-cell(hover) { background-color: #989898 !important; } </nowiki></pre> With the history sidebar selected the appearance this CSS produces is black text on light grey background, which is quite readable and not distracting. https://i.postimg.cc/q71PcgsZ/FF68esr-history-with-CSS.png But with the bookmarks sidebar selected, the same CSS creates an anemic white text on dark grey background. https://i.postimg.cc/CxzkMQvB/FF68esr-bookmarks-with-CSS.png Wondering what edits or additions I can make to the above CSS to allow the FF68 bookmarks sidebar to have the same appearance. (Or possibly needs completely re-written CSS?) Since it works perfectly for both bookmarks and history in Waterfox, could it be the issue is with how the current FF CSS doesn't take into account the way the bookmarks sidebar is selected only from a dropdown? https://i.postimg.cc/j50Jqq9C/FF-sidebar-selection-dropdown.png
Lampirkan skrinsyot

Diubah oleh cor-el

All Replies (3)

more options

Try to replace #bookmarks-view-children with #bookmarks-view.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/*bookmarks sidebar*/

:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent)
treechildren::-moz-tree-row {
  margin-top: 2.0px !important;
  min-height: 14.7px !important;
  height: 14.7px !important;
}

#sidebar-header,#sidebar-search-container,#bookmarks-view,#historyTree {
  color: #000!important;
  background-color: #EDEDED !important;
  -moz-appearance:none!important;
  border-color:transparent !important;
}
#bookmarksPanel, #history-panel {
  color: #fff !important;
  background-color: #F5F5F5 !important;
}
/* Bookmarks sidebar: change hover color */
#bookmarks-view treechildren::-moz-tree-cell(hover) {
  background-color: #989898 !important;
}
more options

Thanks for the help COR-EL

The CSS you offered didn't solve the issue, unfortunately. That CSS results with still dark text on dark background. What I was searching for was a way to allow the appearance of the bookmarks sidebar to resemble the history sidebar, with dark text on light grey background.

Found that the way to go, with some help from Aris, was to modify the original sidebar CSS accordingly (I suppose that the formatting here will mess this up, by replacing the # with a 1, but I think you'll get the idea):

:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-row {
  min-height: 17px !important;
  height: 17px !important;
  color: #fff !important;
  background-color: #F5F5F5 !important;
}
#sidebar-header,#sidebar-search-container,#bookmarks-view-children,#historyTree {
  color: #000!important;
  background-color: #EDEDED !important;
  -moz-appearance:none!important;
  border-color:transparent !important;
}
#bookmarks-view treechildren::-moz-tree-cell(hover) {
  background-color: #989898 !important;
}

Diubah oleh cor-el

more options

Running 10.14.6 with iMac 10,1 (Late '09) unsupported with dosdude's Mojave patcher. Since the GPU is non-metal , forced to use Dark Mode, which turns the Firefox 68esr bookmarks/history

sidebars (among other Firefox items) to almost unreadable black 

text on black background. Partial workaround then have found is this CSS, which works perfectly for the history sidebar, but not for the bookmarks sidebar. (Note, the same CSS works perfectly in Waterfox Classic for both history and bookmarks, where the

different sidebars can be selected from buttons, instead only 

from a dropdown in the FF68.)

  1. sidebar-header,#sidebar-search-container,#bookmarks-view-children,#historyTree {

color: #000!important;

background-color: #EDEDED !important;

-moz-appearance:none!important;

border-color:transparent !important;

}

  1. bookmarksPanel, #history-panel {

color: #fff !important;

background-color: #F5F5F5 !important;

}

/* Bookmarks sidebar: change hover color */

  1. bookmarks-view treechildren::-moz-tree-cell(hover) {

background-color: #989898 !important;

}