If the problem is in direct rule of svg ,that they are inside the tiddler controls, and it overwrite the inherited style. We can solve removing(/changing) de direct rule or declaration, or we solve playing with selector’s specificity, for example if we apply class or inline style in the svg tag.
You have to think in "how many color am I going to add?" "Will i reuse them? Or will i going to add different color each time?". If you look in the CSS framework (tailwind, bootstrap,...), they have clases for a numbers of colors and then they are reused. The user customization is there. Yes, it is possible have a easier user customization but it requires a hard rework in the CSS. P.S. I think that the following article could be helpful about these CSS "problems" https://www.smashingmagazine.com/2010/04/css-specificity-and-inheritance/ El miércoles, 19 de mayo de 2021 a las 0:46:25 UTC+2, TW Tones escribió: > Álvaro, > > Thanks - I am now getting closer to a full understanding of this. In this > case I have the color value available in a variable or field value, I > wanted to find a way to pass the color to the button display > "programaticaly". > > - It supports my suspicion that button css is not as hackable as you > would expect from tiddlywiki, making this a harder than average to > customise this aspect of the User Interface, while making use of the CSS > to > define a button in the view toolbar (and elsewhere) > > > Ideally the tiddlywiki designer can just supply a hex or named color, > rather than a need to define a range of classes (colors). > > Perhaps there is an argument that the tiddlywiki toolbar buttons css need > to be change to permit a programaticaly set color to be provided > (optionally). > > Álvaro, can you think of a way to open this to user customisation? I think > it is important enough to consider some changes. > > Regards > Tones > > On Wednesday, 19 May 2021 at 03:25:50 UTC+10 Álvaro wrote: > >> The svg has two styles, one the inherited fron inline style in span and >> "direct rules" (*.tc-tiddler-controls button svg* ). When you apply >> direct rules the inherited rules are gone (they are overwritten by >> direct). You can see it in the inspector of your browser, "fill:red" is >> strikethrough. >> >> You need add inline style in svg or add new class, for example in button. >> button.icon-blue svg{fill:blue;} >> >> and use it like >> ... >> <$button message="tm-add-tag" param="$tag$" tooltip="Toggle $tag$" >> class="tc-btn-invisible icon-blue"> >> <$transclude tiddler="$:/PSaT/check-tag/button/checked-icon" /> >> </$button> >> ... >> >> Then you don't need wikify and you have a reusable style for the icon in >> buttons. You can change/add class dynamically to button like tiddlywiki >> does with varible and filter in *$:/core/ui/ViewTemplate/title* >> El martes, 18 de mayo de 2021 a las 17:33:21 UTC+2, TW Tones escribió: >> >>> Álvaro >>> Thanks for you help >>> >>> So the fill in the css is forcing the button to "fill: #cccccc;" >>> >>> The problem is I want to display it with a color provided to a macro and >>> use it instead. Meaning the button have multiple colors depending on the >>> value provided. >>> >>> This is the macro I want to display a colored button. >>> >>> \define check-tag-button(tag:"select" color:"blue" >>> display-filter:"[all[current]is[tiddler]]" ) >>> \whitespace trim >>> <$list filter="$display-filter$" variable=display> >>> <$wikify name=style text="""fill: $color$;"""> >>> <$fieldmangler> >>> <$list filter="[all[current]!tag[$tag$]]" variable=has-tag> >>> <$button message="tm-add-tag" param="$tag$" tooltip="Toggle >>> $tag$" class="tc-btn-invisible"> >>> <span style=<<style>> ><$transclude >>> tiddler="$:/PSaT/check-tag/button/unchecked-icon" /></span> >>> </$button> >>> </$list> >>> <$list filter="[all[current]tag[$tag$]]" variable=not-tagged> >>> <$button message="tm-remove-tag" param="$tag$" tooltip="Toggle >>> OFF $tag$" class="tc-btn-invisible"> >>> <span style=<<style>> ><$transclude >>> tiddler="$:/PSaT/check-tag/button/checked-icon" /></span> >>> </$button> >>> </$list> >>> </$fieldmangler> >>> </$wikify> >>> </$list> >>> \end >>> <!-- >>> <$macrocall $name=check-tag-button tag="" color="" display-filter=""/> >>> <$macrocall $name=check-tag-button tag="reference" color="red" >>> display-filter=""/> >>> --> >>> >>> Thanks >>> Tones >>> >>> >>> On Wednesday, 19 May 2021 at 00:31:04 UTC+10 Álvaro wrote: >>> >>>> When you put a button (with the svg) in the viewtoolbar, it take style >>>> from here >>>> *.tc-tiddler-controls button svg*, .tc-tiddler-controls button img, >>>> .tc-search button svg, .tc-search a svg { >>>> fill: #cccccc; >>>> } >>>> >>>> You'll need add a class to the button >>>> >>>> >>>> El martes, 18 de mayo de 2021 a las 14:36:44 UTC+2, TW Tones escribió: >>>> >>>>> Folks, >>>>> >>>>> I have 2 svg icons from https://morosanuae.github.io/tw-icons/ >>>>> >>>>> I have created a button inside a macro and have used a number of >>>>> methods to get the colored result in a tiddler, however when I add >>>>> the $:/tags/ViewToolbar to a tiddler to get it into the view tool bar the >>>>> color disappears. >>>>> >>>>> I want to use the same buttons again and again with only the tooltip, >>>>> actions and color changing. This save buttons and color coding is helpful. >>>>> >>>>> Can anyone tell me how to get past what ever styling is stopping the >>>>> use of the color? >>>>> >>>>> Thanks in advance for any hints. >>>>> Tones >>>>> >>>> -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/bb975ecf-b5c5-4a36-b996-26ace95ec20dn%40googlegroups.com.
