How button styling in TiddlyWiki works -- one possibility

[pmario]

At: Here I go again, I just want to colourise a button in the Toolbars Tony wrote.

@TW_Tones

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 don’t have exact answers for your questions here but I try to give some information, how you can find the answers yourself.

Styling in TW is complex, because our UI and the related CSS / stylesheets have organically grown over time and are more complex as they should be.

---

We do have 3 button types in TW, which can be globally changed using the ControlPanel → Settings tab → Toolbar Button Style

1. Borderless buttons that have a class: tc-btn-invisible
2. Boxed buttons that have a class: tc-btn-boxed
3. Rounded buttons that have a class: tc-btn-rounded

So this can be 1 selector, that can be used to specify a CSS class definition.

There are several definitions of all 3 of them in the Theme Vanilla Base stylesheet.

• tc-btn-invisible is used 7 times in that tiddler. You need to search for it, to see how.
• tc-btn-boxed is used 4 times … search for it
• tc-btn-rounded is used 4 times … search for it.

Those classes define the “main” button CSS elements. … Sorry that’s not easy, but it is as it is at the moment. As I wrote already CSS has grown over the years.

---

TiddlyWiki has 18 different palettes, that are currently part of tiddlywiki.com

Be aware, your modifications need to play nice with all of them, to be useful for everyone.

The palettes define some foreground and background colour definitions, for many different elements. … palette -> foreground is mapped to the CSS color setting and palette -> background is mapped to CSS background …

The button definitions in the palette are:

• Default button background
  button-background

• Default button border
  button-border

• Default button foreground
  button-foreground

Vanilla has no value assigned for them, so the browser default colours are used.

---

• Sidebar button foreground
  sidebar-button-foreground

inherits the foreground colour with a macro <<colour foreground>>. foreground is defined by

• General foreground
  foreground

---

the Vanilla base tiddler uses the following definitions for the svg fill-colour of the tiddler toolbar buttons. So if you define them, you can change the default color in your palette.

eg: If you want to change the Cancel Button to green you can open the palette editor and change the first value in the list below to green.

• Toolbar ‘cancel’ button foreground
  toolbar-cancel-button ← green

This works nicely for Borderless and Boxed, but not for Rounded, which is a bug. I’ll create an issue for this one after I finished this post.

• Toolbar ‘close’ button foreground
  toolbar-close-button

• Toolbar ‘delete’ button foreground
  toolbar-delete-button

• Toolbar ‘done’ button foreground
  toolbar-done-button

• Toolbar ‘edit’ button foreground
  toolbar-edit-button

• Toolbar ‘info’ button foreground
  toolbar-info-button

• Toolbar ‘new tiddler’ button foreground
  toolbar-new-button

• Toolbar ‘options’ button foreground
  toolbar-options-button

• Toolbar ‘save’ button foreground
  toolbar-save-button

If you want to know, which CSS rule is used to define the SVG colour for those buttons open the
Vanilla Base tiddler and search for Toolbar buttons … That’s the section where those definitions start.

So if you want to create a CSS rule in your user-stylesheet, you need to redefine that rule.
And you need to make sure, that your stylesheet is loaded after the core style sheets.

This info can be found at: ControlPanel → Info → Advanced → Stylesheet tab.

There is a list of all active stylesheets, which can be sorted using drag and drop. Make sure yours it near the end.

BUT

Be aware, that your CSS should play nice with existing palettes.

---

To be absolutely sure, which styles are active for a button or an SVG element, you’ll need the browser dev-tools.

There are many videos at YouTube, that discuss CSS specificity. The link contains a good starter, but there are many more.

---

I know it is complex, but the configuration options we have are endless.

I’m trying to improve some elements at the moment with an upcoming PR.

The issue is at GitHub https://github.com/Jermolene/TiddlyWiki5/issues/6874#issuecomment-1212197295 and it discusses some changes where about 20 lines of Vanilla Base CSS are involved.

---

IMO improving the Palette UI would be a possibility to improve our 18 palettes. … Many of them are missing important definitions, because we do have way too many parameters where creators don’t know, what they are used for.

I’d like to change that with some palette UI improvements. … eg: The UI should show live elements. So if a colour is changed, the users can actually see, what they change.

---

I hope, that this post can help a bit, but I’m not really sure. I’ll try to improve it in the future.

---

May be I could create some videos. … If I get minimum – 30 Rockets – for this post.

have fun!
mario

[pmario]

------- reserved for me in the future ---------------

[TW_Tones]

@pmario thanks for this and a great start, I am so glad someone recognises the complexity, and the need for “reform”.

• I can see the information you have provided addresses some of the the existing buttons.
  • However not all buttons seem to have the class configured in the vanilla base, thus I assume fall to the default. See Custom stylesheets for core buttons below.
• Here I provide a little content and raise related issues

I want to raise the need to provide the information necessary to

• make new svg images and buttons that follow the naming standards and/or explain how to use them and customise them.
• Building new buttons using externally sourced svg see When svg icons are obtained from else where
• Programmatically changing the colour of a button appearing in a toolbar
  • Within a button definition
  • Using Elsewhere in tiddlywiki

Custom stylesheets for core buttons with/without classes defined

In this custom stylesheet I hade to define the css for tc-image-done-button

.tc-tiddler-controls button svg.tc-image-done-button {
	fill: green;
}

.tc-tiddler-controls button svg.tc-image-open-window {
	fill: orange;
}

• Since these buttons and their svg icons are defined in the core they already contain for example class="tc-image-open-window tc-image-button"
• But for some the above is not yet defined

When svg icons are obtained from else where

• Icons found from external sources such as
  • TW Icons v1.10 — A large collection of icons for TiddlyWiki whose buttons are prepared with `class=“tc-image-bts-bookmark-star tc-image-button”
  • Other SVG icons may not have these defined

to be determined

.??  button svg.?? {
	fill: orange;
}

Also we need to address the use of hover on both SVG and Toolbar buttons.

[Brian_Radspinner]

Rather than just sticking to classes or palettes, consider using attribute selectors to color similar buttons based on other attributes besides just class:

You can see that any selection that works for the button can also work for the SVG icon by copying it and adding “svg” after the button and using fill instead of color. Hover works the same way.

[TiddlyTweeter]

@TW_Tones

When svg icons are obtained from else where

I began some work on “conversion” of SVG you import for new icons. Not finished. But you can get some clues from a discussion I had with morosanuae on GitHub concerning optimising his vast collection of 47,000 TW sized icons collection to TW use.

Key points are these …

1 - to help match the visual SIZING of icons you may need to play with the hard-coded Viewbox settings (this positions and sizes the SVG image in the the overall SVG “box size”)

2 - with some icons you need to manually edit their fill / stroke when they are hard-coded in the SVG to enable styles to be applied in TW.

TT

[TiddlyTweeter]

@pmario

I don’t have exact answers for your questions here but I try to give some information, how you can find the answers yourself.

Styling in TW is complex, because our UI and the related CSS / stylesheets have organically grown over time and are more complex as they should be.

I think that a brilliant post!

One issue in this, and in the other recent thread … Here I go again, I just want to colourise a button in the Toolbars … is we are talking also about the intersection of 2 things …

• Buttons
  … and …
• SVG

I think some confusion arises because there are several ways to get what you need.

TBH I suspect we need a supplementary demo wiki that shows how to use & style Buttons AND how to handle SVG in TW. They can overlap and there it can get complicated???

IMO SVG is very well integrated in TW and possible styling methods are more than one!
When under Buttons they can can need a different method than SVG alone.

Just thoughts
TT

[TiddlyTweeter]

@Brian_Radspinner

consider using attribute selectors to color similar buttons based on other attributes besides just class:

Right!

Again, this looks like a good simple strategy.

What we need is some kind of decision tree to know which method is appropriate for which type of use case??

Just a comment
TT

[TiddlyTweeter]

In the context of this thread I wanted to mention one additional useful resource …

@telumire’s post — Trick to convert the core images to SVG image for CSS background - #6 by telumire

TT

[TiddlyTweeter]

Another resource useful to clarify SVG use in TW is …

@telmiger’s SVG Playground

TT

[telumire]

Note that if you change the wiki’s language, the title attribute will change too, e.g with french :

You could use the lingo macro to fix that :

.tc-editor-toolbar button[title^="<<lingo Buttons/Bold/Hint>>"]{..}

But it wont allow coloring on specific keywords (well not automatically).