Not "easy" but doable if you have patience and can follow instructions. https://www.userchrome.org/ https://www.userchrome.org/how-create-userchrome-css.html

This is the css code that I have been using for many years to colorize the Bookmarks (& History to a certain extent) Sidebar. Works decent in Quantum, but isn't perfect, as noted in a few comments.

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

Doesn't change the font but that is doable, I just don't have the code.

YIKES...this looks major scary to do for this 'ol codger...LOL...! Thought it might be a tad easier than this, but if that's what's required, I'll have to just put up with the gaudy white background. It's bad enough trying to read the instructions and split the screens somehow to actually DO the changes and not muck up the entire Firefox code... :-(

unclepine

HI, it is no more than follow the instructions and copy/paste.

A little reading and looking and you will be well on your way to bigger and grander :

• https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/
• https://www.reddit.com/r/FirefoxCSS/

Please let us know if this solved your issue or if need further assistance.

unclepine said

YIKES...this looks major scary to do for this 'ol codger...LOL...!

I'm pushing 68 yo and I can handle it - and it's not like I am a computer professional, before I retired I was an automotive service technician / independent shop owner. My only real computer experience is that I computerized my repair shop beginning back in 1984 when a computer user had to use DOS command line to even 'boot' the operating system to get started each day. As far as Firefox goes, I have been playing with userChrome.css in Firefox to do customizations since 2004 or so. A lot easier now what with all the step-by-step instructions and a lot more sources for the css code that is needed. And if you screw something up, just back out the latest changes and ask for help figuring out what was wrong with the code you tried to add.

Well, I'm a tad past 66 and been messin with this 'puter for many years but mostly surfin and lookin for either woodworking or plastic model building "stuff", or doin basic graphical things for our modeling club. I finally created a Chrome.css folder and when I tried to copy/pste the code you provided, it went to a notepad file...???? Thing is, I don't know HOW to activate the code to try and colour the sidebar even if I did get it saved properly...LOL...!! I've never messed with this stuff before but as of late I find the bookmarked faves harder to read on the white background.

Unc

hi, open a folder and then click View then Check Mark - Hidden Items and File Name Extensions

the name of the file you ar making is called userChrome.css

So what has happened is you made a file I think with the wrong name and you missed the fact that it added .txt after .css So you made a file called userChrome.css.txt

When save the file at the bottom make sure you change it to all files then .css

You can check out the 1st URL I posted and should read it before making things. It shows you in pictures how to make the file.

One of the Contributors here has a link from that page called userchrome.org See it also.

Hi, and am 63 so, we can all do it together....lol

unclepine said

I finally created a Chrome.css folder and when I tried to copy/pste the code you provided, it went to a notepad file...????

The folder has to be named chrome with a lower-case c and folders don't get a file extension or file suffix. A capital "C" won't work; Firefox won't use the folder / contents of the folder.

The userChrome.css file is to be placed in the chrome folder. Note: the capital C in Chrome with the rest of the letters being lower-case. If it's not like that Firefox will ignore the file name.

Notepad is OK to use, but when saving that file it is very important that Notepad doesn't add a .txt after the .css file extension. I don't use Windows 10, I am on Win7, but from what I have seen mentioned Win10 Notepad may automatically add the .txt to any file that is created in Notepad.

As of Firefox 57 users will need to learn to work with userChrome.css to do much of anything with modifying Firefox, IMO. 90% of the mods that previously done via an extension / add-on aren't available when installing an extension. And extension named Stylish was handy for doing more complicated mods, but is no longer available for Fx57-up; what Stylish did inside Firefox is barred.

As I mentioned, I have been using userChrome.css for minor mods for many years, but my use has expanded (like) 25X with the loss of Stylish; much of my Stylish scripts I converted to userChrome.css "@ import" files.

More help with userChrome.css can be found here: https://www.reddit.com/r/FirefoxCSS/

For more information see this Google Search for articles about userChrome.css. https://www.google.com/search?q=userChrome.css&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8num=100&gws_rd=ssl

Hey buddy, I must be the dumbest radish in the bunch...!!!! For the life o me I cannot seem to be able to copy/paste the code you gave to the chrome file I created. I can't seem to paste it in the chrome "folder"...! Either I'm doin somethin over and over again...with the same result...which I know is the definition of insane...but hey, maybe I am...LOL...!! I think the problem is, I am a spatial kinda guy, if I can't see it in front of me, like a piece of wood, I cannot seem to visualize tech talk in my mind...I know, I know, we gotta learn this stuff to stay current and all, but GEEZ...rocket science it ain't but my grey matter just can't wrap itself around this...I think after reading all the posts, it's got to be something in the way it's being explained...there are certain phrases and "step by steps' that seem to be missing...IMHO that is... that are causing me to "miss" sumthin... sorry for bein a real PITA... ;-(

Pictures, step by step as said : https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/

Watch the video : https://www.userchrome.org/how-create-userchrome-css.html

Ok, I've done that via help from video...I have a "Folder" named chrome...I clicked on that and grated a txt file called userChrome.css and saved it along with a shortcut on my desktop. So...all is good...SO FAR...!! Our good friend the edmeister who is also helping this 'ol fart out, posted a mess o code that supposed to help me change colours etc. on my sidebar bookmarks. I tried copy/paste route to get it in to the userChrome.css file...no go...?? Even if I COULD get it there, how do I open/initialize it to do what I want and is there a GUI interface or extension where I can customize the settings...??? GEEZ... I wish I'd started doin this years ago...LOL...!!!

Ok, do I copy/paste ALL of the above code...or just the parts pertaining to color...? Bear with me me mate, I'm a real jellyhead with stuff that doesn't have 3 dimensions...LOL...! I've tried copy/paste just the parts I THINK will be related to color INSIDE the brackets...but no luck there. I've GOTTA be doin something wrong but damned if I know WHAT that is... :-(...sorry

Unc

Sorry that you are having a problem with this.

You didn't respond to the information that I posted here: https://support.mozilla.org/en-US/questions/1220199#answer-1118582\ Upper & lower case for the file and folder name is of utmost importance, along with the chrome folder being in the Profile folder and the file be named userChrome.css ! "Close" may count in playing horseshoes, but with userChrome.css the folder / file names and "case" have to be correct.

Plus, you need to be sure that Windows Notepad didn't add a .txt suffix to the file name. Many users have posted here that after struggling with this they discovered that file name ultimately became userChrome.css.txt. If that happens it ain't gonna work.

As far as generating a useable file try using this page. Jefferson Scher is regular contributor here at SUMO. https://www.userchrome.org/download-userchrome-css.html Using that you will avoid potential issues with Windows and Notepad.

As far as the code itself goes, best to use everything I posted. I know that works as good now as it has for many years; except the Sidebar Search field is broken now and not worth my time figuring out a fix. Mozilla hasn't yet completely ruined the Sidebar as they have other areas of the User Interface. IMO, Mozilla is going to break userChrome in the future; they're already investigating how many users are using userChrome and discussing what limits to impose.

ok, so here is what I have at present in the Notepad file under userChrome.css......copy/pasted from mSupport....

height: .75 em !important; }

1. bookmarks-view, #historyTree {

  background-color: rgb(235,235,235) !important;

}

1. bookmarksMenuPopup * {

 background-color: rgb(235,235,235) !important;
 color: #333333 !important;

}

 /* Standard folder */

1. bookmarks-view treechildren::-moz-tree-image(container),
2. PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
3. PlacesToolbarItems menu[container="true"] .menu-iconic-left,
4. BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon {

 fill: #e8bb00 !important; /* slightly muted gold */

}

 /* Live Bookmark (RSS Feed) */

1. bookmarks-view treechildren::-moz-tree-image(container, livemark),
2. PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
3. PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
4. BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon {

 fill: orange !important;

}

 /* Smart bookmark folder */

1. bookmarks-view treechildren::-moz-tree-image(container, query),
2. PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
3. PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
4. 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 */

1. bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {

 fill: olive !important;

}

1. bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {

 fill: olive !important;

}

1. bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {

 fill: olive !important;

1. bookmarks-view, #historyTree {

  background-color: rgb(235,235,235);

}

PLEASE...remember I am NOT by any stretch comfortable in computer lingo as far as messing around with any kind of code...all I was hoping for was a straight forward approach at POSSIBLY getting a fix to my issue of the hard to read bookmarks sidebar. I fully appreciate any help from those "in the know", and do try my best to attempt the suggestions. It appears that many folks at online help sites perhaps figure the person asking has some skills if they are already dealing with Firefox. This is NOT the case with me...! I admit my shortcomings in this area but being a much more "spatial" oriented person, I deal in 3D objects my entire life...wood, metal, airbrush, etc., so when it comes to digital data and code wizardry, I am like a man with one arm so to speak.

To that end I will understand should my request for help not be taken up by the community with no hard feelings. It is hard enough to deal with issues that are hard to explain in words over the net, much less dealing with a "non-techie" type...LOL...!!

Regards, Unc

Hi unclepine, I think if you are only interested in these specific items mentioned in your new thread --

• make the grayish-black font darker
• make the font size larger
• make the selection highlight more visible

-- then the original rules in this thread are not what you're looking for.

Problem is that styling bookmark "trees" is a messy business. Here's a link to the source code file where all the critical bits are defined -- these are the rules that need to be overridden. It's undecipherable to most people because it relates to Firefox's very nonstandard "treechildren" items. I think it would be easiest if someone with Windows 10 could work on it because the styling varies between different Windows versions.

https://dxr.mozilla.org/mozilla-release/source/toolkit/themes/windows/global/tree.css#333

https://developer.mozilla.org/docs/Mozilla/Tech/XUL/Tutorial/Styling_a_Tree

OMG...!!! I think I will just have to struggle along with the state the bookmarks are in right now... :-(...! All that code is pretty much gibberish to this 'ol fart. Perhaps in the near future, an Add-On or something might come out that THIS humble net user can use. I can appreciate folks that can get their heads around this .css stuff, but unless its got wood grain, made of styrene, or can be drilled and bolted together, coding of this nature is just a dream for me.

Thank you for the links. I did read them and only got even MORE confused...must be all the "snow on the roof"...LOL...!!

Regards, and thanks again for going to the heart of my query...

Unclepine

HI, did you take out the the .txt part of the usserChrome.css please make sure you did by going to File Explorer then show all hidden extensions

Here is a screen grab of my file

Unc