How to make the TW edit icon green using CSS?

193 views
Skip to first unread message

Chuck R.

unread,
Apr 25, 2019, 10:15:06 AM4/25/19
to TiddlyWiki
I've tried to make the edit icon green using various CSS methods. These methods failed.

````
svg.tc-image-edit-button{
color:lightgreen; }

.tc-image-edit-button{
color:lightgreen;
}

.tc-btn-invisible[label^="edit"]{
color:lightgreen;
}
````

Does anyone know how to do this?

I'm using a recent version of BOB. All other styling works in my TW. TW is 5.1.19 with the Markdown addon.

Thanks!

Chuck R.

unread,
Apr 25, 2019, 10:16:58 AM4/25/19
to TiddlyWiki
The icon I'm trying to make green is the one with the pencil.I cou ld get a green border below it but could not make the actual symbol green.

tw-edit-icon.png


Birthe C

unread,
Apr 25, 2019, 10:42:11 AM4/25/19
to TiddlyWiki
Try:
.tc-tiddler-controls button svg.tc-image-edit-button {
    fill:lightgreen ;
}


Birthe 

Eric Shulman

unread,
Apr 25, 2019, 11:03:30 AM4/25/19
to TiddlyWiki
On Thursday, April 25, 2019 at 7:15:06 AM UTC-7, Chuck R. wrote:
I've tried to make the edit icon green using various CSS methods. These methods failed.

svg.tc-image-edit-button{ color:lightgreen; }
.tc-image-edit-button{ color:lightgreen; }
.tc-btn-invisible[label^="edit"]{ color:lightgreen; }

The "color" attribute controls the display color of *text* content.
To control the color of SVG *images*, use the "fill" attribute.

enjoy,
-e
Eric Shulman
TiddlyTools.com: "Small Tools for Big Ideas!" (tm)
InsideTiddlyWiki: The Missing Manuals

Chuck R.

unread,
Dec 9, 2019, 11:07:24 AM12/9/19
to TiddlyWiki
FYI,
For testing RGB and web color codes I have this site: https://www.rapidtables.com/web/color/RGB_Color.html
And an RGB gradient maker: http://www.perbang.dk/rgbgradient/

Chuck R.

unread,
Dec 9, 2019, 11:08:31 AM12/9/19
to TiddlyWiki
And this is a fun palette generator if you're not artsy. I think it's great. http://paletton.com/

Mohammad

unread,
Dec 9, 2019, 11:16:22 AM12/9/19
to TiddlyWiki
Shiraz plugin has a colorful UI button and can be configured for more colors.


--Mohammad

Thomas Elmiger

unread,
Dec 13, 2019, 3:32:25 PM12/13/19
to TiddlyWiki
Hi folks,

Just a reminder for future generations that it is not necessary to use CSS for this:
The colour of some icons including the tiddler edit icon can be tweaked in the palette settings in

$:/ControlPanel > tab Appearance > tab Palette > button show editor (below palettes) > search for


Toolbar 'edit' button foreground

... choose color.

Cheers,
Thomas

David Gifford

unread,
Dec 13, 2019, 3:37:11 PM12/13/19
to TiddlyWiki
html body.tc-body .tc-image-edit-button {stroke: white;fill:#6f6;}

Or choose another color from http://www.ficml.org/jemimap/style/color/wheel.html
Reply all
Reply to author
Forward
0 new messages