Firefox doesn't have a built-in text color selector for the user interface area. Text colors are partially determined by your theme (e.g., built-in theme, optional theme). For example, the color of text on the bookmarks toolbar and on tabs can be modified by the theme.

If themes don't do the job, you can modify many aspects of Firefox's interface using custom style rules. These include rules for color and font-size, among others. Are there particular areas you want to modify, for example, text on the Bookmarks Toolbar, text on the Bookmarks menu that drops from the toolbar, etc.?

Once you have a style recipe to do what you want done, you can create a userChrome.css file to do the job. More info: https://www.userchrome.org/

Thank you for the rapid response.

I am aware of the various themes, etc., but I wanted the ability to edit the actual bookmark font color individually, not globally, in my case here specifically the color of the bookmark separator descriptors.

Ref. screenshot: In this example, the dropdown of bookmarks in the Weather folder on the Bookmarks Toolbar, I would like to change the font color of the text attached to each separator, i.e., HAMMOCK DUNES WEATHER, CURRENT SURFACE WX MAPS, JACKSON WEATHER, etc.

I realize this is a browser and not Word, Pages or the like. Just wondering.

Thank you in advance for any help here.

Are those ordinary hyphens in the bookmark name? Long dashes?

You could apply a rule like this to change all bookmarks with 3 or more hyphens or dashes in their name red:

.bookmark-item[label*="---"],
.bookmark-item[label*="–––"], 
.bookmark-item[label*="———"] {
  color: red !important;
}

In English: the first three lines match any element which has .bookmark-item in its class name (bookmarks), and 3 hyphens/dashes in a row anywhere in its label (which matches the name).

I don't know how well the dashes will copy/paste.

The bookmark separators are actually a bookmark. Trick for creating separators in Safari : https://www.packafoma.com/safari/

I use these in Firefox as well. I prefer a solid line separator.

You can add a solid line separator to the menu (right-click or Ctrl+click), but there's no way to add text to those.

Thank you.

Any idea for a rule, such as you suggested above, but with a solid line such as those my bookmark separators contain?

USSER CHROME URL'S

https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/ https://www.accessfirefox.org/Theme-Font-Size-Changer.php https://www.userchrome.org/ https://www.accessfirefox.org/Firefox_Accessibility_Themes.php https://www.userchrome.org/what-is-userchrome-css.html http://techdows.com/2017/09/classic-theme-restorer-userchrome-css-modify-firefox-57-photon-ui.html http://kb.mozillazine.org/UserChrome.css https://github.com/axydavid/FirefoxUI/blob/master/README.md https://github.com/wilfredwee/photon-australis Note not all code in one place, dedicated sub-Reddit/Firefox on this

Flash 27.0 r0 Please Update Flash Player Version: 28.0.0.126 Current Version https://get.adobe.com/flashplayer/otherversions/ Step 1: Select Operating System Step 2: Select A Version (Firefox, . . . .) Note: Other software is offered in the download. <Windows Only>

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

Success! See Screen Shot 1 & 2

Thanks to the two of you: jscher2000 for your script and Pkshadow for the suggested Chrome URLs, specifically the first one: https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/

jscher2000: using your first script suggestion with the dashes didn't work. Using the Firefox bookmark editor, I selected/copied a section of the solid line of my bookmark created separator ( https://www.packafoma.com/safari/ ) and pasted it in place of the dashes on all 3 lines of your script. Voila! See script below and Screen Shot 2.

.bookmark-item[label*="────"], .bookmark-item[label*="────"], .bookmark-item[label*="────"] {

 color: red !important;

}

Thanks again for the help - couldn't have done it without you.

Hi Fox8, thanks for the update. You only need one of those selector lines, I had covered 3 of the possibilities but not that extra-long line character (Unicode 2500):

.bookmark-item[label*="────"] {
  color: red !important;
}

Figured as much but wasn't sure. Although I'm fairly tech savvy, about the only browser mods I've made have been a few about:config flag changes. When it comes to rule writing language, I'm lost.

Thanks again for all your help. Happy Holidays.

Fox8 -- a question for you or any other contributors to this thread:.

In your 12/14/17 screenshot, your separators have a round gray favicon on the left side. In your 12/15/17 screenshot, there is NO favicon.

Is there a trick to removing the favicon? When I right click on a separator and select Properties, it forces me to enter a "Location" (I entered a fake one like "http://none/") before it will let me save any changes. If I don't enter a Location, the Save button is grayed out.

Many thanks.

FarmerBill - sorry for the tardy reply:

The trick to removing the favicon is using the site below to create the separator which incorporates a blank favicon (hard to see but the favicon is a faint white square not quite visible in the screenshot: https://www.packafoma.com/safari/ (This will work in Firefox as well.)

Note that it doesn't have to be an URL, javascript:void(0); works as well.

#personal-bookmarks .bookmark-item[label^="———"] .menu-iconic-left {display:none!important;}
#personal-bookmarks .bookmark-item[label^="———"] .menu-iconic-text {color:red!important;}

The packaforma method didn't seem to work in Firefox 59. I just got a black line, not red, with the unwanted round gray favicon still present. So I messed around with cor-el's syntax a little bit.

I'm not a coder, and am not sure what "#personal-bookmarks" does. It seemed to prevent the separator from being red, so I removed it. Also, I added !important because without it, the bookmark was black not red.

Here's the entire contents of my userChrome.css file:

/* make red bookmark separators */ .bookmark-item[label^="───"] .menu-iconic-left {display:none;} .bookmark-item[label^="───"] .menu-iconic-text {color:red !important;}

This generates a solid line separator that extends from the main column into the left column where the favicons are located. This is much better than having an unwanted round gray favicon in the left column. I'd still prefer the left column be blank, and the solid line extend across the main column, but I can live with the current result.

Thanks again for everyone's help.

FarmerBill,

Using the packafoma.com method gave you the black line separator (sans icon) and that is what you want (what I started out with before starting this thread).

Next, thanks to jscher 2000 (for the code) and Pkshadow (for using userChrome.css links) I created a userChrome.css file with the following:

.bookmark-item[label*="────"] {
 color: red !important;

}

Quit/Restarted Firefox and separators/text were red (and no favicon)