Bookmarks Folder color

Discussion of general topics about Mozilla Firefox
Elcid
Posts: 7
Joined: November 17th, 2017, 8:25 am

Bookmarks Folder color

Post by Elcid »

How do I change the Folder color in my Bookmarks. The folder color changed to gray when it updated to the current version.

Thank you.
User avatar
BuddhaNature
Posts: 537
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Re: Bookmarks Folder color

Post by BuddhaNature »

Yes, I too would like to change the folder colour and appearance - if that is possible. The dull grey looks awful. Something with a colour that also has the appearance of 3D would wonderful.
OS: Windows 10 Pro. x64
User avatar
BuddhaNature
Posts: 537
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Re: Bookmarks Folder color

Post by BuddhaNature »

:shock:

Morat, that looks complex and I'm no coder of any kind. :( How does a user manage to do this? Can you explain how?
OS: Windows 10 Pro. x64
Elcid
Posts: 7
Joined: November 17th, 2017, 8:25 am

Re: Bookmarks Folder color

Post by Elcid »

BuddhaNature wrote::shock:

Morat, that looks complex and I'm no coder of any kind. :( How does a user manage to do this? Can you explain how?
++
morat
Posts: 6404
Joined: February 3rd, 2009, 6:29 pm

Re: Bookmarks Folder color

Post by morat »

Here is how to fill the folder image with another color.

Code: Select all

/* Firefox userChrome.css */

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

.bookmark-item[container] {
  fill: pink !important;
}
Here is how to use the Firefox ESR 52 folder image. (for advance users only)

Code: Select all

/* Firefox userChrome.css */

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

.bookmark-item[container] {
  list-style-image: url("folder-item.png") !important;
  -moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}
http://kb.mozillazine.org/UserChrome.css

You would need to download the Firefox ESR 52 folder image to the chrome folder for the style to work correctly.

Firefox ESR 52 folder image
http://dxr.mozilla.org/mozilla-esr52/ra ... r-item.png
User avatar
BuddhaNature
Posts: 537
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Re: Bookmarks Folder color

Post by BuddhaNature »

Thanks very much, Morat, greatly appreciated.

I went with the first example you posted - it's easy for a beginner to follow - but I changed the colour from "pink" to "green" (matches my installed theme). I'll try the more complex example you posted once I research how to deal with that. But the first solution does yield a good result, much better than the awful grey folders.

For Elcid's benefit, in case he doesn't know. When you create (or edit) the userChrome.css file you should use Notepad (not a word-processor). If you get stuck with this Elcid just post here and I'll do some quick instructions for you for the first method - but a read through of the Knowledge Base article that Morat points to will probably give you all the information you need.
OS: Windows 10 Pro. x64
User avatar
BuddhaNature
Posts: 537
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Re: Bookmarks Folder color

Post by BuddhaNature »

Ah! Just tried the second method - wasn't so difficult - and now back to the old Firefox folders, just what I want.

Thanks again, Morat. Happy now. :D

EDIT: I wrote a step-by-step Guide on how do this for both methods suggested by Morat. The Guide is at the bottom of this webpage and is clearly labelled as such. If you want to implement either of Morat's solutions to the grey folder problem, and are not sure how to do that, just scroll down to the Guide and clear step-by-step instructions are given there.
Last edited by BuddhaNature on February 26th, 2018, 6:32 am, edited 1 time in total.
OS: Windows 10 Pro. x64
User avatar
LuvKomputrs
Posts: 659
Joined: June 9th, 2010, 8:15 am

Re: Bookmarks Folder color

Post by LuvKomputrs »

@morat
Thanks very much for posting the css code for changing the folder colour. :)
Instead of pink I chose brown to change the folder colour.
It goes really well with the theme that I chose.
Really, really like it. :wink:
This is what my Firefox 57 looks like at the moment with userChrome.css tweaks.
https://s8.postimg.org/3kqrhmtmt/luvkom ... tweaks.png
Last edited by LuvKomputrs on November 21st, 2017, 6:08 pm, edited 1 time in total.
Elcid
Posts: 7
Joined: November 17th, 2017, 8:25 am

Re: Bookmarks Folder color

Post by Elcid »

I still could not figure out how to do this. I have a pea size computer illiterate brain. :(

Can someone post a step by step way for idiots? I'm using Windows 8.1 if that is relevant.
User avatar
BuddhaNature
Posts: 537
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Re: Bookmarks Folder color

Post by BuddhaNature »

Elcid, I'll do a step-by-step guide for you sometime tonight, when I get the time. I'll do the second solution (the most complex one) as once you can do that you will be able to do the first solution with no problems (because you'll have the understanding then).

I'm on Win7 but, as far as the solution goes, you being on Win8 shouldn't affect doing this userChrome.css thingy. However, in preparation for this you would need to make sure that on your Win8 you have Windows Explorer setup so that you can see the "extension" of all filenames. For example, for a file titled "New Text Document.txt" you need to be able to see that ".txt" part of the filename (and of course once you have that setup you'll be able to see the extensions for all files). I don't know how to that on a Win8 system but on Win7 it is done this way:

In Win7 to view the extensions of files you would go in Explorer (Menu) Tools > Folder Options... Once the "Folder Options" dialogue opens up, click on the "View (tab)". Now look for an entry titled "Hide extensions for known file types". If there is a tick in that box then untick it (so that you will be able to see all file extensions).

If you set that up for yourself I'll post up this evening with further instructions. But, who knows, maybe someone else will jump in first.
OS: Windows 10 Pro. x64
Elcid
Posts: 7
Joined: November 17th, 2017, 8:25 am

Re: Bookmarks Folder color

Post by Elcid »

BuddhaNature wrote:Elcid, I'll do a step-by-step guide for you sometime tonight, when I get the time. I'll do the second solution (the most complex one) as once you can do that you will be able to do the first solution with no problems (because you'll have the understanding then).

I'm on Win7 but, as far as the solution goes, you being on Win8 shouldn't affect doing this userChrome.css thingy. However, in preparation for this you would need to make sure that on your Win8 you have Windows Explorer setup so that you can see the "extension" of all filenames. For example, for a file titled "New Text Document.txt" you need to be able to see that ".txt" part of the filename (and of course once you have that setup you'll be able to see the extensions for all files). I don't know how to that on a Win8 system but on Win7 it is done this way:

In Win7 to view the extensions of files you would go in Explorer (Menu) Tools > Folder Options... Once the "Folder Options" dialogue opens up, click on the "View (tab)". Now look for an entry titled "Hide extensions for known file types". If there is a tick in that box then untick it (so that you will be able to see all file extensions).

If you set that up for yourself I'll post up this evening with further instructions. But, who knows, maybe someone else will jump in first.
Done. Thanks. :D
User avatar
BuddhaNature
Posts: 537
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Re: Bookmarks Folder color

Post by BuddhaNature »

I'm writing the instructions now. Do you mean you've done the whole thing yourself? Or do you mean that you just see the extensions now?
OS: Windows 10 Pro. x64
Elcid
Posts: 7
Joined: November 17th, 2017, 8:25 am

Re: Bookmarks Folder color

Post by Elcid »

BuddhaNature wrote:I'm writing the instructions now. Do you mean you've done the whole thing yourself? Or do you mean that you just see the extensions now?
I search Folder Option and uncheck "Hide extensions for known file types".
User avatar
BuddhaNature
Posts: 537
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Re: Bookmarks Folder color

Post by BuddhaNature »

This is step-by-step guide to creating and using a userChrome.css file. As an example for the guide, code is provided to implement Morat's two ways (given above) of changing the (awful) grey Bookmarks folders in Firefox Quantum. Morat's first solution was to give the user choice over the Bookmarks folder colour by allowing the user to specify an alternative "fill-colour" for the grey folders. His second solution was to replace the grey folders with the (traditional) old-style yellow Bookmarks folders. There was a problem with both code-blocks that Morat offered to manage this - both solutions did work with the (Menu) Bookmarks drop-down but neither solution worked when going (Menu) Bookmarks > Show All Bookmarks. At a later date I came across "improved" code that allowed this for both solutions. The code-blocks used in this guide are the improved code. Nevertheless, huge thanks to Morat for pointing in the right direction.


A Beginner's Guide to Creating and Using a userChrome.css File
- Example: How to Change Firefox's Grey Bookmarks Folders


(A) Setting Windows Explorer to Show Filename Extensions
(1) In Windows a filename "extension" is the characters that occur from (and include) the last 'dot/period' of a filename. For example, in a file named "New Text Document.txt" the "extension" is the characters ".txt". In a file named "Good.music.flac" the extension is ".flac". To do the filename manipulations that are in this guide we must be able to see filename "extensions" in Windows Explorer. I will explain how to do this for a Windows 7 system. (If you are using another version of Windows you will need to work out how to make the equivalent setting in your version of Windows.)
(2) In Windows Explorer go (Menu) Tools > Folder Options...
(3) When the "Folder Options" dialogue opens click on the "View (tab)"
(4) Look for an entry titled "Hide extensions for known file types". If there is a tick in that box then untick it (so that you will be able to see all file extensions in your Explorer windows) then click the "OK" button.

(B) Getting to Your Profile Folder
(1) In Firefox select (Menu) Help > Troubleshooting Information
(2) In that tab look at the Application Basics table information.
(3) You will see an entry titled "Profile Folder" to the right of that entry you will see a button titled "Open Folder". Click on that button and an Explorer window will open showing the content of your Profile folder.

(C) Create a chrome Folder (if one doesn't already exist)
(1) In the root of your Profile folder (which is where Firefox opened the Explorer window - so you don't have to drill into any other folder) look to see if there is a folder titled chrome
(2) If such a folder doesn't exist create one. (It must have the title chrome - all lower-case characters.)
(3) Now double-click the chrome folder to open it. We are going to put some files in there.

(D) Getting the Image File Needed to Work with the CSS Code
(1) Click on this link: folder-item.png A webpage will open with an image in the page.
(2) Right-click on the image and select "Save image as..."
(3) Download the image to your system. Do not change the name of the file, the CSS script relies on the image file having the title folder-item.png
(4) Now make a copy of the image file into the chrome folder.
Note: You do not need the folder-item.png file in the chrome folder if you intend to only use the fill-colour method of dealing with the Bookmark folders. However, it does no harm to have the file in the chrome folder in case you want to use the old-style Bookmark folders in the future.

(E) Create a userChrome.css File
(1) In some empty space in your chrome folder right-click and select New > Text Document
Windows should create a new Notepad file in the folder with the title "New Text Document.txt"
(2) Rename that file to userChrome.css For the filename use upper- and lower-case characters exactly as shown here.
(3) Windows will give a warning that you are changing the extension of the file - click "Yes" to that, you definitely want to change the extension of that file.
(4) If by some means you rename the file and find you end up with a file titled "userChrome.css.txt" then you need to delete the ".txt" part out of the file name. (i.e. you are deleting an unwanted extension - we need the extension to be .css).

(F) Paste the CSS Code into the userChrome.css File
(1) Right-click on the userChrome.css file and select Open with > Notepad
(2) Now choose ONE of these code-blocks below to use in your userChrome.css file and copy and paste ALL of that code into the Notepad window:

Choose this code below to change the fill-colour of the grey Bookmark folders:

Code: Select all

/* Firefox userChrome.css */

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

/* FILL NEW STYLE BOOKMARK FOLDERS WITH SPECIFIED COLOUR */
/* THIS ALSO WORKS WHEN USING "Show All Bookmarks" */
/* This code does not require the image file "folder-item.png" inside the chrome folder */
.bookmark-item[container], treechildren::-moz-tree-image(container) {
  fill: green !important;
}
Note: if you use the above code you can change the colour "green" in the code to anything you prefer. To see a list of colour-names that should work see this webpage: CSS Colors


Choose this code below to change the Bookmarks folders to the (traditional) old-style yellow folders:

Code: Select all

/* Firefox userChrome.css */

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

/* USE OLD-STYLE YELLOW BOOKMARK FOLDERS IN BOOKMARKS DROP-DOWN MENU. */
/* ALSO FORCES USE OLD-STYLE BOOKMARK FOLDERS WHEN VIEWING "Show All Bookmarks" */
/* This code requires the image file "folder-item.png" to be inside the chrome folder */
.bookmark-item[container], treechildren::-moz-tree-image(container) {
  list-style-image: url("folder-item.png") !important;
  -moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}
(3) Important Note: All userChrome.css files should include the code-line:
@namespace url("http://www.mozilla.org/keymaster/gateke ... s.only.xul");
That line is known as the "namespace line" and it should be at the top of the code though it's okay to have a comment-line(s) before it. (In the code shown above the line /* Firefox userChrome.css */ is a comment-line - Firefox just ignores those lines when executing the code. They are really for the user to enter helpful comments into the code.) It is not necessary to have multiple instances of the namespace line in the code - one instance is sufficient and it should be at the top. All your code should only be pasted in after the namespace line. If you paste your code in before that line your code might fail to work because you have done so.
(4) Now Save the Notepad file - (Menu) File > Save Then close Notepad.
(5) After the Save double-check that the file is still titled userChrome.css - it should be - if it isn't give it that name.

(G) Testing if it Works
(1) Close down Firefox.
(2) Relaunch Firefox.

And hopefully you should see the folder changes you wanted. If you want to try the method you didn't use just delete the code you did use and paste in the code you didn't use (then save the file) and you are good to go.

Hope this guide was found helpful.

========================================================

VERY IMPORTANT EDIT (02 January 2020): As from Firefox v68 it might be the case that you find that the above userChrome.css code doesn't work even though you have followed the guide step-by-step. The problem might be that you are now using a Firefox version that will by default not search for userChrome.css (and userContent.css) when Firefox is launched. To fix this do the following:

(1) Click in Firefox to get a new tab.
(2) At the new tab enter the following 'address' about:config then press the enter key.
(3) A warning page will be shown. Just click to acknowledge the risk and continue.
(4) In the Advanced Preferences page search-box enter the following search term: toolkit.legacyUserProfileCustomizations.stylesheets (you can copy and paste it from here). The search will occur automatically and the preference will be shown below the search box.
(5) If the preference is set to false double-click on the preference to toggle it to true. True means Firefox supports CSS files, False that it ignores them.
(6) Close the tab and restart Firefox.

For more background details on this see the following page: https://www.ghacks.net/2019/05/24/firef ... y-default/
Last edited by BuddhaNature on January 2nd, 2020, 4:28 am, edited 39 times in total.
OS: Windows 10 Pro. x64
Post Reply