How to change the colors of only one editor toolbar button

[Ton Gerner]

Hi,

The title says it all.

I can change the background and foreground (icon) color of all editor toolbar buttons by e.g.:

.tc-editor-toolbar button {
     fill: Red;
     background-color: Yellow;

}

But I want to let one button stand out by applying colors to only one button. That is beyond my - only basic - knowledge of CSS.

In the meantime I changed the icon color and icon background color of e.g. bulleted list button by:

.tc-image-list-bullet {
     fill: red;
     background: yellow;

}

but it looks ugly with only the icon background colored and not the total button.
So 'button' must be used somewhere in the CSS, but I don't know how and where.

Is there a way to color the background of only one button?

Cheers,

Ton

[JD]

Hi Ton,

Sorry for the formatting, I'm on my phone!

I got it by doing something like this...

---

.tc-editor-toolbar > .tc-reveal > button {
display: inline-flex;
padding: 0;
}

.tc-editor-toolbar button .tc-image-button {
padding: 2px;
font-size: 1.25em;
}

.tc-editor-toolbar button .tc-image-list-bullet {
display: flex;
align-items: stretch;
justify-content: stretch;
fill: red;
background-color: yellow;
}

---

More experienced people might have a better solution, but what I basically did was to set the button to flex so that the svg it contains can fill it up, and then the svg itself can now be targeted to have a background. The background will now fill the button thanks to inline-flex.

I set a font size to tc-image-button because inline-flex affected the size of the button, and i used inline-flex instead of flex so the buttons will arrange themselves inline without needing for the whole container to be set to flex too.

I wonder if this will work nicely in all cases hehe

-jd

[Ton Gerner]

Hi JD,

Thanks.
A quick test shows it works as advertised ;-)
Now I have to learn more about 'flex' (as I wrote my CSS knowledge is only basic).
I'll play around with your solution to see the effect of the different parameters.

Thanks a lot.

Cheers,

Ton

[Mohammad]

Added to TW-Scripts

[Ton Gerner]

Hi,

I played around with JDs solution (which as such works) and tried to simplify and polish it.

To my surprise I ended up with a 'flexless' solution which - at least under my conditions (Linux Mint 19.1, Firefox & Chrome) - gives good results:

.tc-editor-toolbar > .tc-reveal > button {
     padding: 0px;
}

.tc-editor-toolbar button .tc-image-button {
     padding: 4px 0px;
     font-size: 1.45em;
}

.tc-editor-toolbar button .tc-image-list-bullet {
     fill: white;
     background-color: #0044BB;
     border-radius: 4px;
}

.tc-editor-toolbar button:hover .tc-image-list-bullet {
     fill: #0044BB;
     background-color: #D1DDF3;
}

One minor issue: the buttons are a little bit wider than normal.

Cheers,

Ton

[JD]

That's neat, and disregarding the hover effect, even has fewer lines!

Again I don't know on desktop how this looks but you can also add a width to the svg to make it narrower. This looks ok on my phone:

---

.tc-editor-toolbar button .tc-image-button {
padding: 4px 0px;
font-size: 1.45em;

width: 30px;
}

--

I just added the 30px width.

-jd

[TonyM]

Ton,

Thanks for raising this question and now the answers are online. In a related issue I have always thought if we want to add buttons and snipits etc... to the EditorToolbar it is a bit of a hassle finding new icons, so using colour will help. I think it would be nice if we could create buttons that use a simple character or fontawesome item allowing a larger range of buttons to be created as needed.

I wonder if anyone has done that?

Regards

Tony

On Friday, March 15, 2019 at 3:24:32 AM UTC+11, Ton Gerner wrote:

Hi,

I played around with JDs solution (which as such works) and tried to simplify and polish it.

To my surprise I ended up with a 'flexless' solution which - at least under my conditions (Linux Mint 19.3, Firefox & Chrome) - gives good results:

[Ton Gerner]

Hi JD,

I should have thought of image width. I totally overlooked it. Tried with padding, margin, ...
I ended up with:

width=28.5 px;

to get the same width as the buttons before coloring.

Anyway the

.tc-editor-toolbar > .tc-reveal > button

was the push in the right direction for my problem.

Many thanks.

Ton

[Ton Gerner]

Hi Tony,

I thought it was you mentioning how to obtain the separate set of fontawesome icons.

After some googling I found it: https://groups.google.com/d/msg/tiddlywiki/wp0pY_Aervc/AzjGvGlEAgAJ

Cheers,

Ton

[TonyM]

Ton

Thanks for pointing me to my own solution. I forgot I bundled them this way.

Regards

Tony