Bookmark Folder Color and Other Features

User Help for Mozilla Firefox
User avatar
BuddhaNature
Posts: 537
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Re: Bookmark Folder Color and Other Features

Post by BuddhaNature »

Apologies, dfoulkes. :oops: The code does work on the Bookmarks Toolbar - after a fashion. I was (up until now) testing if it worked in the Bookmarks drop-down menu.

What I've found is that I can specify one folder with a unique colour and it will work on the bookmarks toolbar. However, if I try specifying a second, third, . . . folder with unique colours then it doesn't work - only the first specified folder gets a unique colour. So if I have code listing of, say, three folders in sequence in the code, one following the other, only the first code-block in the sequence works (the subsequent code-blocks fail). Also the code produces a black thick-line artefact across of the top of the active tab. Ah, well.

Maybe you're right to duck-and-dive on versions. Personally I just stick with latest stable and hope for the best. Once I accommodate to it I find it just fine.
OS: Windows 10 Pro. x64
User avatar
dfoulkes
Posts: 22525
Joined: June 28th, 2008, 10:31 pm
Location: Mesquite, Nevada

Re: Bookmark Folder Color and Other Features

Post by dfoulkes »

This is in my ESR... note the various folder colors on the bar.

http://i64.tinypic.com/25p72bk.jpg

This is the code used for those folders..

Code: Select all

/* Addons folder red */
toolbarbutton.bookmark-item[label="Addons"] > .toolbarbutton-icon {
  fill:  red !important;
}
/* Morning Sites folder green */
toolbarbutton.bookmark-item[label="Morning Sites"] > .toolbarbutton-icon {
  fill: green !important;
}
/* Misc and Moz folder purple */
toolbarbutton.bookmark-item[label="Misc and MozStuff"] > .toolbarbutton-icon {
  fill: purple !important;
}
/* Read Later folder blue */
toolbarbutton.bookmark-item[label="Read Later"] > .toolbarbutton-icon {
  fill: blue !important;
}
/* Mesquite folder blue */
toolbarbutton.bookmark-item[label="Mesquite"] > .toolbarbutton-icon {
  fill: blue !important;
}
/* FaceBook Sites folder purple */
toolbarbutton.bookmark-item[label="FaceBook Sites"] > .toolbarbutton-icon {
  fill: purple !important;
}
/* Personal Private Sites folder green */
toolbarbutton.bookmark-item[label="Personal Private"] > .toolbarbutton-icon {
  fill: green !important;
}
/* Financial sites folder yellow */
toolbarbutton.bookmark-item[label="Financial sites"] > .toolbarbutton-icon {
  fill: yellow !important;
}
/* MyYahoo Portfolios folder yellow */
toolbarbutton.bookmark-item[label="MyYahoo Portfolios"] > .toolbarbutton-icon {
  fill: yellow !important;
}
As you can see she's (The CAT) always alert and on the prowl for Meoware !!
User avatar
the-edmeister
Posts: 32249
Joined: February 25th, 2003, 12:51 am
Location: Chicago, IL, USA

Re: Bookmark Folder Color and Other Features

Post by the-edmeister »

Frank Lion wrote:
the-edmeister wrote:But since Quantum came out some of us started using the @iimport url command in the userChrome.css ...
The reason that started, I suspect, was as a quasi substitute for Stylish, which packed up its chrome .css code side about then. That's fine, but it gives users exactly the same problem that Stylish did when there were problems, i.e. which of these 50 code snippets is conflicting with one or more of the other 50 code snippets?....and chaos ensues.

I first used @import urls back in 2006 for theme options and the damn things were always a pain.

That's why I always suggest novice users stick to a single userChrome.css, making sure they have a commented out (that's what the /*.....*/ stuff does) heading of what each code snippet does. Makes everything easy to follow and it's all there.
Yep, that's the reason I use separate @ import files. I don't have a problem with that, I understand enough about css code to quickly identify which file might be causing a conflict or at least narrow it down to a few 'styles'. From there I can comment out the 'usual suspects' to verify my suspicions.

In my mind one of the major differences with Stylish was the ability to have both userChrome and userContent in the same Style, which I did a few times with Australis in avoiding using CTR for one or two minor features that I wanted. I just used an existing User Style and removed the code I didn't want and then saved "my User Style" in my Stylish web account without 'publishing' it, kept it private so as to not confuse it from the original version and "step on" another persons work.

One of the problems I ran into when collecting new code specific to Quantum was that too much of the code that other users share doesn't have comment lines and it was sometimes hard to understand what the lines actually do without the comments. That made the situation chaotic for me. Each to his own though; each person can do as they see right for them.
A mind is a terrible thing to waste. Mine has wandered off and I'm out looking for it.
flaneurb
Posts: 622
Joined: December 10th, 2011, 3:50 am

Re: Bookmark Folder Color and Other Features

Post by flaneurb »

BuddhaNature wrote:Apologies, dfoulkes. :oops: The code does work on the Bookmarks Toolbar - after a fashion. I was (up until now) testing if it worked in the Bookmarks drop-down menu.

What I've found is that I can specify one folder with a unique colour and it will work on the bookmarks toolbar. However, if I try specifying a second, third, . . . folder with unique colours then it doesn't work - only the first specified folder gets a unique colour. So if I have code listing of, say, three folders in sequence in the code, one following the other, only the first code-block in the sequence works (the subsequent code-blocks fail). Also the code produces a black thick-line artefact across of the top of the active tab. Ah, well.

Maybe you're right to duck-and-dive on versions. Personally I just stick with latest stable and hope for the best. Once I accommodate to it I find it just fine.
Hi,

I can get folders with different colors even when they are placed one after the other. After reading dfoulkes post, I have:

Code: Select all

toolbarbutton.bookmark-item[label="Fx"] { color: yellow !important; }
toolbarbutton.bookmark-item[label="KDE"] { color: blue !important; }
toolbarbutton.bookmark-item[label="Bugs"] { color: white !important; }

toolbarbutton.bookmark-item[label="KFN"] { color: #3d7e9a !important; }
toolbarbutton.bookmark-item[label="AU"] { color: #b13022 !important; }
toolbarbutton.bookmark-item[label="AU+"] { color: #b13022 !important; }
toolbarbutton.bookmark-item[label="YT"] { color: gray !important; }
toolbarbutton.bookmark-item[label="News"] { color: gray !important; }
where the first three lines are for folders which are placed immediately one after another. The others are not folders, just bookmarks for other sites that I'd like to have looking different from other bookmarks in the bookmarks toolbar.

This is with Firefox 65.0.1 on Linux.
Wiggam72
Posts: 451
Joined: July 30th, 2013, 9:05 am

Re: Bookmark Folder Color and Other Features

Post by Wiggam72 »

First of all let me say everyone in this thread has been very helpful.

Second, I ended up kind of doing a Frankenstein's monster with the codes. I prefer the old style solid folders, not the transparent ones that are currently being used. So I used the code from the link http://forums.mozillazine.org/viewtopic ... #p14777671 that BuddhaNature provided to use the old style folders. It requires using a provided image file that needs to be placed in the chrome folder.

The only drawback with using the code for the old style folders is that I can't figure out a way to change the folder colors. Can someone tell me how to do that? It appears whatever is in the code, is giving it folder color hierarchy, (or could it be the image) so either something in that code has to change, or a something has to be added to the other code, or a whole different code would have to be used. Thankfully at least the font colors changed.

The code that worked with the code for the old style folders that was able to change the font colors was provided by flaneurb. Here's the code with the old style code first, then the code for changing the color:

/* Firefox userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gateke ... s.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;
}

toolbarbutton.bookmark-item[label="Articles"] { color: #00FFFF !important; }
toolbarbutton.bookmark-item[label="Articles 2"] { color: #7FFF00 !important; }
toolbarbutton.bookmark-item[label="Articles 3"] { color: #00FFFF !important; }

toolbarbutton.bookmark-item[label="Articles 4"] { color: #7FFF00 !important; }
toolbarbutton.bookmark-item[label="Articles 5"] { color: #8B0000 !important; }
toolbarbutton.bookmark-item[label="Computer 1"] { color: #00FFFF !important; }
toolbarbutton.bookmark-item[label="Computer 2"] { color: #8B0000 !important; }
toolbarbutton.bookmark-item[label="Fishing"] { color: #8B0000 !important; }
toolbarbutton.bookmark-item[label="Receipes"] { color: #00FFFF !important; }
toolbarbutton.bookmark-item[label="YouTube 1"] { color: #8B0000 !important; }
toolbarbutton.bookmark-item[label="YouTube 2"] { color: #00FFFF !important; }
toolbarbutton.bookmark-item[label="Table Tennis"] { color: #8B0000 !important; }
User avatar
BuddhaNature
Posts: 537
Joined: January 3rd, 2008, 9:44 am
Location: Scotland

Re: Bookmark Folder Color and Other Features

Post by BuddhaNature »

I managed to work out how to get the code to work to colourise more than one folder in the Bookmarks Toolbar. First of all to get this code to work on folders in the Bookmark Toolbar it is (it seems) necessary to be using Firefox Quantum's default bookmark folders (the kind of by default grey folders that look semi-transparent if colourised). Explanation as follows via comments in the code.

Dealing first with Bookmark Toolbar folders and there associated text labels I'll refer to this as "code block 1":

Code: Select all

/* Following code colourises Bookmark Toolbar folder TEXT LABELS */
toolbarbutton.bookmark-item[label="Test"] { color: brown !important; }
toolbarbutton.bookmark-item[label="Test 2"] { color: blue !important; }
toolbarbutton.bookmark-item[label="Test 3"] { color: purple !important; }

/* Following code colourises Bookmark Toolbar FOLDERS */
/* Code only works when using Firefox Quantum 'Transparent Folders' */
toolbarbutton.bookmark-item[label="Test"] > .toolbarbutton-icon { color: brown !important; }
toolbarbutton.bookmark-item[label="Test 2"] > .toolbarbutton-icon { color: blue !important; }
toolbarbutton.bookmark-item[label="Test 3"] > .toolbarbutton-icon { color: purple !important; }
Then I tried getting a single bookmark icon to change colour on the Bookmark Toolbar with the following results I'll refer to this as "code block 2":

Code: Select all

/* Following code colourises Bookmark Toolbar (single) BOOKMARK TEXT */
toolbarbutton.bookmark-item[label="Guardian"] { color: brown !important; }
toolbarbutton.bookmark-item[label="The National"] { color: blue !important; }

/* Following code colourises Bookmark Toolbar (single) BOOKMARK ICON */
/* Couldn't get this code to work at all. I suppose I'm doing something wrong with it but can't work out what. */
toolbarbutton.bookmark-item[label="Guardian"] > .toolbarbutton-icon { color: white !important; }
toolbarbutton.bookmark-item[label="The National"] > .toolbarbutton-icon { color: black !important; }
Using code block 1 I was able to uniquely colourise more than a single folder. So why did that happen this time and not during previous attempts. The reason was that I had the following code active in the userChrome.css file I'll refer to this as "code block 3":

Code: Select all

/* FILL QUANTUM NEW STYLE 'TRANSPARENT' BOOKMARK FOLDERS WITH SPECIFIED COLOUR */
/* THIS ALSO WORKS WHEN USING "Show All Bookmarks" */
.bookmark-item[container], treechildren::-moz-tree-image(container) {
  fill: green !important;
}
Code block 3 has global effect on all folders and would, in this case, turns them all green. However, having that code active also had the effect of only allowing one of a sequence of folders in the Bookmark Toolbar to be uniquely colourised by using the folder code in code block 1. Once I commented out code block 3 then a sequence of folders on the Bookmark Toolbar could be uniquely colourised.

Hope my explanation is clear.


@Wiggam72,

I suspect the reason you can't colourise the folders if you are using the old-style yellow folders is because they are being specified from the content of an image and hence you can't colourise the content of an image using Firefox. Just confirming your suspicion on that one. However, as you have noticed yourself, if you are using the old-style yellow folders you can still colourise the folder text labels in the Bookmark Toolbar.
OS: Windows 10 Pro. x64
Wiggam72
Posts: 451
Joined: July 30th, 2013, 9:05 am

Re: Bookmark Folder Color and Other Features

Post by Wiggam72 »

Frank Lion wrote:
Wiggam72 wrote:Are ALL codes entered into just one userChrome.css file in a Profile?...
Yes, all .css code. Sometimes .css code from other files is 'called' by the use of @import urls in the userChrome.css file, but only if there is a good reason for it.

Your stuff is just ordinary code, so would all go in the one file.
Lost in all of the help I got in this thread, I failed to specifically thank Frank Lion for answering the most important question I had at the beginning of the thread. This is very important to know for css newbies like me. Thanks Frank! =D>
Post Reply