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

Le thread ibilondoloziwe. Nceda ubuze umbuzo omtsha ukuba ufuna uncedo.

Change colors of bookmark sub folders

  • 4 iimpendulo
  • 1 inayo le ngxaki
  • 87 views
  • Impendulo yokugqibela ngu Norbert38

Norbert38
Norbert38
more options

Hello:

I can change the color of Bookmarks, but would like to change the color of sub folders.

Here is the CSS code and the results

/* One line fix This colours all bookmarks */ 

.bookmark-item[container], treechildren::-moz-tree-image(container) { fill: Blue    !important; }

/* Make Shop folder Red */ toolbarbutton.bookmark-item[label="Shop"] > .toolbarbutton-icon { fill: #e74c3c !important; }

/* Make Flyers folder Red  !NOT WORKING! */ toolbarbutton.bookmark-item[label*="Flyers"] > .toolbarbutton-icon { fill: #e74c3c !important; }

thanks Norbert

Hello: I can change the color of Bookmarks, but would like to change the color of sub folders. Here is the CSS code and the results /* One line fix This colours all bookmarks */ .bookmark-item[container], treechildren::-moz-tree-image(container) { fill: Blue !important; } /* Make Shop folder Red */ toolbarbutton.bookmark-item[label="Shop"] > .toolbarbutton-icon { fill: #e74c3c !important; } /* Make Flyers folder Red !NOT WORKING! */ toolbarbutton.bookmark-item[label*="Flyers"] > .toolbarbutton-icon { fill: #e74c3c !important; } thanks Norbert
Iqhotyoshelwe imifanekiso ekwisikrini

Isisombulu esikhethiweyo

Doesn't this rule work ? 

.bookmark-item[container][label*="Flyers"] { fill: #e74c3c !important; }

You may need to toggle svg.context-properties.content.enabled => true on about:config if you use a custom SVG file.

You can't combine/nest labels, you need a separate selector for each label. 

.bookmark-item[container][label*="Flyers"],
.bookmark-item[container][label*="Shop"] {
  fill: #e74c3c !important;
}
Funda le mpendulo kwimeko leyo 👍 1

All Replies (4)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

toolbarbutton.bookmark-item only works for toolbarbutton items on the Bookmarks Toolbar. For items in a drop down list you need to use menu.bookmark-item (folder) or menuitem.bookmark-item or use only .bookmark-item to make it apply to all cases. 

menu.bookmark-item[label*="Flyers"] > .toolbarbutton-icon { fill: #e74c3c !important; }

.bookmark-item[container][label*="Flyers"] > .toolbarbutton-icon { fill: #e74c3c !important; }

Ilungisiwe ngu cor-el

Norbert38
Norbert38 Umnini wombuzo
more options

Hello Cor-el

Thanks for the suggestions. None worked. 

I tried

menu.bookmark-item[Label=" AND [label*=" menuitem.bookmark-item[Label=" AND [label*=" .bookmark-item[Label=" AND [label*="


Can I be more specific about the label? [Label="Shop;Flyers"]

thanks Norbert

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Isisombululo esiKhethiweyo

Doesn't this rule work ? 

.bookmark-item[container][label*="Flyers"] { fill: #e74c3c !important; }

You may need to toggle svg.context-properties.content.enabled => true on about:config if you use a custom SVG file.

You can't combine/nest labels, you need a separate selector for each label. 

.bookmark-item[container][label*="Flyers"],
.bookmark-item[container][label*="Shop"] {
  fill: #e74c3c !important;
}
Norbert38
Norbert38 Umnini wombuzo
more options

Thanks Cor-el

I was using .bookmark-item[container][label*="Flyers"] > .toolbarbutton-icon { fill: #e74c3c !important; }


This works!! .bookmark-item[container][label*="Flyers"] { fill: #e74c3c !important; }

Norbert