[TW5]Defining a class for a button

[FrD]

Hi,

I'm trying to create a class for buttons.
The only difference with a standard button is the background color : I want it light green.

So I create a tiddler, tagged with $:/tags/Stylesheet :

html body.tc-body .ens-btn svg { fill:#66ff33; color: #66ff33; }

html body.tc-body .ens-btn:hover svg { fill: #33cc33;}

When I inspect the button, the class attribute is "ens-btn" but this class does not seem to be defined, and the button looks like a standard button.

Any idea of what could be wrong ?

Thanks

FrD

[Jed Carty]

The normal buttons aren't svg images, so take that part out and instead of fill use background-color like this:

html body.tc-body .ens-btn { background-color:#66ff33; color: #66ff33; }

html body.tc-body .ens-btn:hover { background-color: #33cc33;}

Tiddlywiki uses svg images for the toolbar buttons which is why those classes have svg in the definition. What you have would apply to svg images put inside the button widget.
Putting <$button class='ens-btn'>{{$:/core/images/delete-button}}</$button> with your version of the class defined would make the icon change color but nothing else.

[FrD]

Hi,

Thanks a lot ; it works. I should have notice the svg thing !
I've deleted the "color" part since the texte was the same color as the background.
I'll add some rounded corners  and it will be OK for me.

FrD