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!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

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

This thread was archived. Please ask a new question if you need help.

How can I change the bookmarks text color?

  • 5 replies
  • 2 have this problem
  • 1 view
  • Last reply by Banban

AmagicalFishy
AmagicalFishy
more options

For some reason, my bookmark text is super light, making them difficult to read. I think it might have been the FXChrome addon, but I'm not sure how to change it. I have Stylish installed, and have searched for a list of rules or something like this to no avail.

Does anyone have any ideas? Is there some nice list of all the .css rules that Firefox uses that I could browse through? I use Linux, so the "Font and Size Changer" addon or whatever it is isn't available for my platform.

For some reason, my bookmark text is super light, making them difficult to read. I think it might have been the FXChrome addon, but I'm not sure how to change it. I have Stylish installed, and have searched for a list of rules or something like this to no avail. Does anyone have any ideas? Is there some nice list of all the .css rules that Firefox uses that I could browse through? I use Linux, so the "Font and Size Changer" addon or whatever it is isn't available for my platform.

Chosen solution

Hi AmagicalFishy,

Indeed, there does not seem to be a list of default CSS rules for Firefox window. But, I may have a solution for you…

  • Open the folder C:\Users\[user-name]\AppData\Roaming\Mozilla\Firefox\Profiles\[profile-name]
  • If it doesn't exist, create the folder Chrome
  • Inside this new folder, create the file userChrome.css
  • In this new file, enter the 4 following lines:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); .menu-iconic-text{ color: #000 !important; }

  • Save the file
  • Close and open again Firefox

Can you tell me if this fix your issue?

Read this answer in context 👍 2

All Replies (5)

AmagicalFishy
AmagicalFishy Question owner
more options

Here's an example pic.

Banban
Banban
more options

Chosen Solution

Hi AmagicalFishy,

Indeed, there does not seem to be a list of default CSS rules for Firefox window. But, I may have a solution for you…

  • Open the folder C:\Users\[user-name]\AppData\Roaming\Mozilla\Firefox\Profiles\[profile-name]
  • If it doesn't exist, create the folder Chrome
  • Inside this new folder, create the file userChrome.css
  • In this new file, enter the 4 following lines:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); .menu-iconic-text{ color: #000 !important; }

  • Save the file
  • Close and open again Firefox

Can you tell me if this fix your issue?

Banban
Banban
more options

Sorry, I miss you are on Linux, so the location of the Profile folder is different.

In place of the first step, do this:

  • Click on the menu button in the top right-hand corner
  • Click on the ? icon then Troubleshooting Information
  • In the section "Application Basics", find the line "Profile Directory" and click on the button Open Directory

Other steps are the same.

AmagicalFishy
AmagicalFishy Question owner
more options

Banban said

Hi AmagicalFishy, Indeed, there does not seem to be a list of default CSS rules for Firefox window. But, I may have a solution for you…
  • Open the folder C:\Users\[user-name]\AppData\Roaming\Mozilla\Firefox\Profiles\[profile-name]
  • If it doesn't exist, create the folder Chrome
  • Inside this new folder, create the file userChrome.css
  • In this new file, enter the 4 following lines:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); .menu-iconic-text{ color: #000 !important; }
  • Save the file
  • Close and open again Firefox
Can you tell me if this fix your issue?

This worked perfectly. May I ask how you found that CSS rule? I fiddled about in the developer tools and came up with:

  1. BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) { 
   color: #000000  ;

}

Which achieves a similar result. Did you do the same type of thing, or is there an easier way to find these values?

Modified by AmagicalFishy

Banban
Banban
more options

Of course I will tell you! ;)

  • First, I installed the DOM Inspector add-on to find the right CSS class.
  • Then, I opened it by pressing the Alt key, then clicking Tools > Web Developer in the menu bar on the top left.
  • In the DOM Inspector window, click File > Inspect Chrome Document and select the current tab of the main window of Firefox
  • Follow this path: windows > deck > vbox > toolbox > toolbar (id = PersonalToolbar) > toolbaritem > hbox > hbox > scrollbox > xul:box > toolbarbutton (any item) > menupopup > xul:hbox > xul:arrowscrollbox > xul:scrollbox > xul:box > menuitem > xul:label
  • The class of this last element is menu-iconic-text, so you just have to use it in the userChrome.css file

Tip: when you click on an element in the DOM structure, a red box is highlighted in the Firefox window > it is useful to know which element you have selected.

So, that doesn't sound easy… Maybe there is an easier way. Mine is a little boring, but with some patience and trials you can manage to do what you want.

I tried your solution: it seems to be a different logic. For example, I didn't manage to custom the font color of the submenu items (by replacing #000000 with an other value).