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

#1

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 cause this.

Can anyone tell me how to apply a color inside a class, span or the actual SVG tiddler such that when used in the view toolbar I regain control of its color and background color, and ideally a way to pick a hover color to match?

  • I am keen to point to a different coloured tiddler or set the color within the button definition according to a status/condition.
  • I have tried overriding and replacing the existing CSS with no sucess.

Please help :pray:

Ideally we could find a stylesheet which when installed we can assign a class to the button widget that permits the button colour to be set within the button or just use the SVG’s existing fill style.

  • That is I just want tiddlywiki css or part there of to P–s off when I do not want it.
How button styling in TiddlyWiki works -- one possibility
Core variable that contains the selected text?
How button styling in TiddlyWiki works -- one possibility
How to visualize the content type of a tiddler?
#2

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 .tc-page-controls button { background-color: lawngreen; }

body.tc-body .tc-tiddler-frame .tc-tiddler-controls button { background-color: red; }

body.tc-body  .tc-tiddler-edit-frame .tc-editor-toolbar button { background-color: bisque; }
1 Like
#3

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, ie determine the status and color accordingly only on the current tiddler.
#4

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.mybutton svg,
.tc-page-controls button.mybutton svg {fill: currentcolor;}
1 Like
#5

If this is added to Core SVG images, it would simplify colorifying text and svg with just setting text color.

2 Likes
#6

I am not sure I follow this?

  • 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 class in the button definition that overrides the effects of the classes that operate on the viewToolBar and Page Controls?

For example a set of traffic light colours red yellow green and perhaps caution (orange) and default (grey) available (blue). As long as the stylesheet is present these could then be used on any button (definition)

#7

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 default styles.

About currentcolor, it is a “keyword” to use the value of the property color, it is the setted or inherited value.

#8

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 such that when displayed on the toolbar it becomes that color
  • Or in a way so that the actual color of the svg (its fill) is honored.

There may be another issue and that is to ensure the toolbar is refreshed so the color once changed becomes visible.

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 to designers can access this basic function).

I admit this has perplexed me many times, and I have wasted hours on this. Kind people make suggestions and recommendations but usually give me static solutions that I cant control programmatically. For example I am so close to completing a generic toggle button that shows on/off and unset, including colors but just cant get the last few meters. I have build a single tiddler button that can be cloned and used as a toggle for anything, be it a tag or field existence. But what use is a toggle if you cant see it get toggled.

  • I think you may understand sometimes it is possible to ask the right question - describe what I want, but not ask a technical question when I don’t have the technical knowledge to implement something that should be simple, and documented.
  • I have learned a lot about CSS trying to solve this but it is clearly not enough.

Here is my button, I need to go to bed for now, its 1am here, perhaps the css gods will find a way, while I sleep?

toggle-field-button-template.json (5.6 KB)

#9

I agree it would be good to show how to do reliable colour changes on SVG buttons. And other SVG stuff.

TBH I think SVG in TW likely deserves it’s own supplementary documentation/demo wiki?

If I had more time I’d do so.

SVG is really well integrated into TW! But I have noticed over time users can struggle with tweaking it!

Just a comment, TT

2 Likes
#10

@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 when the user mouses over it.
  • a:active - a link the moment it is clicked.

Comment, TT

#11

@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-button" viewBox="0 0 128 128">

If you study the CSS for the saver it might help you?

.tc-page-controls svg.tc-image-save-button {
	fill: <<colour toolbar-save-button>>;
}

This is dynamically set.

Just a comment, TT

1 Like
#12

It is a solution, but there are other problems with the specifity.

@TW_Tones , if you want change between color you must have the color stored in anywhere, for example in a macro or in the stylesheet. I prefer the 2nd, and then I can change between classes (red, green, …) using macro/flters but you have to solve the specifity. There is a alternative, but it is using styles inline, but you also need to solve the specifity of svg using the “currentcolor”.

In both ways, you can use a macro/filter to switch the class or the style.

Here a basic example for the alternative with inline styles.

\define my_macro_color() color: red;

<$button style=<<my_macro_color>> >
Press me!
</$button>

The stylesheet for svgs

.tc-tiddler-controls button svg,
.tc-page-controls svg {fill: currentcolor;}

PD: In my first post I didn’t check the specifity, I used a “overkill” solution.

#13

Thanks @TiddlyTweeter

I was lying in bed and thought, rightly or wrongly you are a CSS god :nerd_face:

So If I create a button I need to create a class for it, set the buttons class field to have this class named first in the class clause?

  • perhaps also matching classes for hover and different colour states?
  • Ideally if they are specific/unique I can place this in<style> tags to maintain a single tiddler solution.
  • I will revisit that however I know it is sensitive to the dirty state.
  • But this is a static style, where is the ability to change it?
    • If I need to create a new button for each state that is fine but then this example adds nothing, as each button can have its own style.
    • I will try the suggestions here somewhen in the next 10 hours
  • I still don’t understand what “currentcolor” refers to - a literal string, variable, css value?
#14

It is a basic example with basic macro. You can create the macro that you need

#15

This may not be helpful, but there is a CSS property called !important which can be used to override style rules from different locations in the cascade:

#16

I was “wrong” when I thinking in macros for programmatically the button, the macro would be used for create the button, but where determine the status you need the transclusion. So you could use the macro to create a button with the changes that you need (in filter and in the whole button)

The core of the button would be something like this.

<$button style={{{ [  filter  ] }}} >
Press me!
</$button>

The use the !important should be the last solution because it “break” the specifity, and in the future you will enter in vicious cicle of !important.

1 Like
#17

That’s right. … But that should be the very very last resort, because !important is toxic. … If you publish a stylesheet that contains !important an other user needs to use !important !important to get rid of it. … That’s why I call it “toxic”

1 Like
#18

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

1 Like