Folks, I have long had an issue with colorising buttons, not that I use in wiki text but soon as I put them into a toolbar such as the viewtoolbar or Page controls. I believe it is the automatic coloring and on hover built into tiddlywikis core stylesheets or themes, or the toolbar classes that ca…

You can try adding and playing with these in a stylesheet tiddler… Color a lot of buttons… body.tc-body button { background-color: gold; } Color buttons with a class… body.tc-body button.tony { background-color: gold; } Color buttons inside various ui elements… body.tc-body .tc-sidebar-header …

Thanks @Brian_Radspinner this is a lot to work with. this should work well for fixed color buttons. The only issue is I would prefer to assign the foreground colour, specifically the fill, or let it come through from the actual svg (ie as set in the svg). I also want to do this programmatically…

I think we talked about something similar some time ago. But I can’t find. Something like the following could work. (With yours .mybutton and <<my_color_macro>>) .tc-tiddler-controls button.mybutton, .tc-page-controls button.mybutton {color: <<my_color_macro>>; } .tc-tiddler-controls button.mybut…

[image] Alvaro: fill: currentcolor; If this is added to Core SVG images, it would simplify colorifying text and svg with just setting text color.

[image] Alvaro: fill: currentcolor; I am not sure I follow this? [image] Alvaro: button.mybutton how do I name my button? ie where do I put “mybutton” in the button definition. is it an additional class? Another way to ask for this is I would like if possible to add a color via a cl…

mmm I don’t know if I understand you now. There is a problem with the Specifity of selectors in the styles when put in the toolbar, your styles have lower specifity than the original styles of button and svg in toolbars. To solve you need to have a value of specifity equal or highter than the defau…

Yes, perhaps this is the problem, the svg inside the toolbar have a specificity that we can’t over ride from within the button definition. I kind of understand it, but not completely. I want to create buttons such that either; I can programmatically change the color within the button definition su…

[image] TW_Tones: I plead ignorant here, but it seem to me such a basic need for someone designing buttons to control the color of the button. Either a suitable work around or ideal a redesign to make it possible a core override (whilst maintaining default values (or a core change be developed t…

@TW_Tones , one clue is a toggled button itself is not necessarily reflecting a changed “link state” … but IF you have a changed “link state” then CSS should work without refresh for any of it’s states … a:link - a normal, unvisited link. a:visited - a link the user has visited. a:hover - a link wh…

@TW_Tones , another clue is the “internal CSS cascade” most TW SVGs have two classes … 1 - Specific (every UI SVG has its own) … tc-ui-specific 2 - Global (all UI SVGs have it) … tc-image-button For instance the save button … <svg width="22pt" height="22pt" class="tc-image-save-button tc-image…

Here I go again, I just want to colourise a button in the Toolbars

pmario August 14, 2022, 7:06pm 18

I did create a new thread at the Development category, that tries to give some hints. .. No concrete answers. .. Hence a new thread.