[TW5] How do I change the background color of a toddler?

[charleyc...@gmail.com]

I'm trying to change the background color of a toddler, but I can't quite figure it out. Thanks to Mark S., I figured out how to change the font color for the sidebar tabs. But now I want to change the background color of the tiddlers.

Is there a way to make them slightly transparent too?

[ste...@gmail.com]

Hi, 

On Monday, July 17, 2017 at 6:23:15 AM UTC+2, charleyc...@gmail.com wrote:

I'm trying to change the background color of a toddler, but I can't quite figure it out. Thanks to Mark S., I figured out how to change the font color for the sidebar tabs. But now I want to change the background color of the tiddlers.

You can apply custom styles (including background color) by tag: http://tiddlywiki.com/#Using%20Stylesheets:%5B%5BHow%20to%20apply%20custom%20styles%20by%20tag%5D%5D%20%5B%5BUsing%20Stylesheets%5D%5D

Does this help?

Kind regards,

Stef 

[ste...@gmail.com]

Update: This version of my link might be less confusing: http://tiddlywiki.com/#How%20to%20apply%20custom%20styles%20by%20tag

[Charles Anderson]

I've been able to follow the instructions from the 2nd link pretty easily.  I've been able to create tiddlers with single colors, change their opacity, and add background images from an external URL.  One thing that is eluding me though, is how to add a background image from an an image that already exists in the wiki.  For instance, I have a tiddler named image.png that is of type "image/png".  When I use "background-image: url(./image.png);" in my stylesheet, it doesn't show up in the background of the test tiddler I want to apply it to.  If I change the source to the URL of an image I see on the internet, it shows up just fine.

[Télumire]

You need to transclude the tiddler image as an URI in your css (or even better if it's a png, place your image in the same folder and use the url of your file). You can use the datauri macro if you want to use an image encoded in your wiki, see https://tiddlywiki.com/#datauri%20Macro%20(Examples).

If you use an external, local image dont forget to add quotes to avoid escaping issues : https://developer.mozilla.org/en-US/docs/Web/CSS/url()