What css selector do I use to style tiddler view controls? Thank you.
.tc-tiddler-controls button will get you all the View Toolbar buttons, including the ones in the “More actions” dropdown. If you don’t want to style those as well, .tc-tiddler-controls > button should give you just the top-level buttons.
Each individual button also has a unique class based on the URI-encoded name of the button tiddler, e.g. tc-btn-%24%3A%2Fcore%2Fui%2FButtons%2Fmore-tiddler-actions. This is derived from {{{ [<listItem>encodeuricomponent[]addprefix[tc-btn-]] }}}, where <<listItem>> is a tiddler like $:/core/ui/Buttons/more-tiddler-actions.
2 Likes
How do I change the button colors? Here’s the code I have, but it’s not working.
.tc-tiddler-controls > button > svg > path, ellipse, polygon, rectangle, triangle {fill: rgba(20,30,88,0.5) !important;}
I tested your code on TW-com, where it seemed to get most but not all of the buttons. I think reducing the specificity should catch the others:
.tc-tiddler-controls > button svg { fill: rgba(20,30,88,0.5); }
You shouldn’t need !important either, unless you already have some other style applying to the same svgs — in which case I’d recommend figuring out which it is and modifying this rule to account for it as necessary. !important can be useful as a quick fix, but IMO, it’s better to avoid it whenever possible, or you’ll find yourself needing to use it everywhere.
Hi, for some reason, it’s still not working. Here’s my wiki that Im trying to apply this code to, if that helps. https://glgraphics.tiddlyhost.com/
Your stylesheet is full of conflicting styles with !important. I found .tc-titlebar button svg path {fill: #A92DFF !important;} and an svg { ... !important; } rule (probably the same color?) which were certainly preventing the new style from being applied, but there may be others; I didn’t try to hunt down all of them. I’d recommend removing all the !important from your main stylesheet and then seeing how it looks. If you find that some of your previously-working styles stop working, this means you need to add specificity (i.e. more elements/class names) to your rules.
If you have access to a browser inspector, it will really help you see a) which styles are currently being applied to a given element, and b) the minimum specificity you’ll need to affect that element.
1 Like
Thank you, that fixed it. How do I style the edit controls separately though, because now one of the edit controls is the same color as the view controls and I don’t want that.
Tiddlers get the classes tc-tiddler-view-frame or tc-tiddler-edit-frame in view mode/edit mode respectively, so you should be able to use
.tc-tiddler-view-frame .tc-tiddler-controls > button svg
to target just the view controls.
2 Likes