How css target $:/Controlpanel?

#1

Applying styling to tiddler as per the docs.

None of these work:

(The * means that the string should appear anywhere in the value.)

<style>[data-tiddler-title='$:/ControlPanel'] {background:red}</style> (ideal case)
<style>[data-tiddler-title*='$:/ControlPanel'] {background:red}</style>
<style>[data-tiddler-title*='ControlPanel'] {background:red}</style>

This quirky one does work:

<style>[data-tiddler-title*='ontrolPanel'] {background:red}</style> (no C !)

And this one affects all system tiddlers! (Seems like a bug!)

<style>[data-tiddler-title*=":/ControlPanel"] {background:red}</style>(no $ prefix)

I’ve also tried to uri encode the title, thinking that maybe the $:/ prefix messes things up. It works for other tiddlers but not for $:/ControlPanel :

<$set name="uri" value=<<makedatauri """$:/ControlPanel""" "text/plain">> >
<$set name="urititle" filter="""[<uri>removeprefix[data:text/plain,]]""">
<style>[data-tiddler-title*='<<urititle>>'] {background:red} </style>
</$set>
</$set>

What to do?

Thank you.

#2

https://tiddlywiki.com/#escapecss%20Operator

#3

Use the configuration attached here with tiddlywiki.com and it works as expected. No escaping needed. There may be something else in your test wiki that does prevent it from working.

test-data-tiddler-title-styles.json (235 Bytes)

#4

You should use tiddlers tagged $:/tags/Stylesheet to apply styles. Using the <style> tags will make UI theming complicated.

#5

As @pmario says, the problem here is that patterns like $:/... and ControlPanel are linkified when used in wikitext. Using a separate stylesheet tiddler with a \rules pragma is recommended.

#6

Thank you everyone.

Using a stylesheet like @pmario suggested did solve it. (A bit ironic because my very purpose with the style blocks was to test things before putting them in a stylesheet! Well, I learnt something new :slight_smile: