Adding color to TB buttons

[Ed1]

I am using TB 102.3.2 and would like to add some color to some buttons in the Mail Toolbar.

1. Calendar button - I would like to color fill the icon to the left of the text of this button and have tried this code, without success:

Code: Select all

/* Not working */
.calendar-button {
  fill: pink  !important;
}

/* Not working */
#button-calendar {
  fill: pink  !important;
}

2. With the App Button / Library Button, none of these code items work to change the horizontal bars color of the icon (does work in Firefox):

Code: Select all

/* Not working */
 #button-appmenu {
  fill:  royalblue !important;
}

#button-library {
   fill: crimson !important;
}

.appmenu-button {
  fill: crimson !important;
}


.library-button {
  fill: crimson !important;
}

3. I'd also like to give the background of the Quick Filter button a different color than the default gray. I've tried these without success:

Code: Select all

/* Not working */
#button-qfb-show-filter-bar {
  fill:  dodgerblue !important;
}

/* Not working */
.qfb-show-filter-bar-button {
  fill: dodgerblue !important;
}

What have I done wrong?

[morat]

Are you just making up selectors? Some of your classes and ids don't exist.

Reference
http://searchfox.org/comm-esr102/search ... dar-button
http://searchfox.org/comm-esr102/search ... n-calendar
http://searchfox.org/comm-esr102/search ... on-library
http://searchfox.org/comm-esr102/search ... filter-bar

Try something like:

Code: Select all

#button-appmenu .toolbarbutton-icon {
  color: lime !important;
}
#qfb-show-filter-bar .toolbarbutton-icon {
  color: lime !important;
}

[Ed1]

Not being knowledgeable is this area, I just tried copying and modifying some code for other buttons. Guess I didn't do a great job at it!

Your code works, of course, for those two button icons. And following the link you provided, I was able to get the top portion of the Calendar button icon colored as well, using this code:

Code: Select all

#lightning-button-calendar .toolbarbutton-icon {
  fill: pink  !important;
}

I'll just leave the gray background on the qfb as is.

Thanks for your help, morat.

[morat]

You're welcome.

P.S.

How to get DOM info
http://forums.mozillazine.org/viewtopic ... #p14866214

[morat]

Here is how to color the quick filter button.

Code: Select all

#qfb-show-filter-bar[checked="true"] {
  background-color: khaki !important;
}
#qfb-show-filter-bar .toolbarbutton-icon {
  color: green !important;
}
#qfb-show-filter-bar .toolbarbutton-text {
  color: blue !important;
}