How to edit the background-colour of tiddlertitles by different tags?

85 views
Skip to first unread message

Surya

unread,
Feb 1, 2018, 10:17:46 AM2/1/18
to TiddlyWiki
Hello all,

again I have a styling question.

I know how to style the background-colour of tiddlertitles by a tag- with e.g.: div.tc-tagged-RezeptGetestet .tc-tiddler-title { background-color: lightgreen; }

But, when I want to have something like an additional opposite styling, like "make the backgroundcolour orange of tiddlertitles tagged with RezeptNICHTGetestet", then it seems like they disturb each other. Doesn't matter, if I build one tiddler, tagged with $:/tags/Stylesheet and write both commands in that tiddler. Or if I build two tiddlers with that Stylesheet-tag and write the commands in there.

I couldn't find out, how to solve it, that they don't disturb each other.
Maybe with an additional command like: If they are NOT tagged with RezeptGetestet AND NOT tagged with RezeptNICHTGetestet, then make the background of the titles by default colour. But I cannot find out, how to write in that command "NOT tagged with XY".

Or maybe, the solution is completely different... ??

Any help?
Surya

coda coder

unread,
Feb 1, 2018, 11:09:19 AM2/1/18
to tiddl...@googlegroups.com
Are you saying that ONE tiddler may have BOTH RezeptGetestet and RezeptNICHTGetestet tags?  In that case, you could add:

div.tc-tagged-RezeptGetestet.tc-tagged-RezeptNICHTGetestet .tc-tiddler-title {
 background-color: #012345;
}

If you run into specificity issues, make it more specific (double the classes)...

div.tc-tagged-RezeptGetestet.tc-tagged-RezeptNICHTGetestet.tc-tagged-RezeptGetestet.tc-tagged-RezeptNICHTGetestet .tc-tiddler-title {
 background-color: #012345;
}

EDIT: to fix my crappy cut-paste job.

Surya

unread,
Feb 1, 2018, 11:35:17 AM2/1/18
to TiddlyWiki
Ahh, good to additionally know how to build the style by two tags (make the tiddler-title look like ... if a tiddler has two tags (both tags).
But that I don't need at the moment.

What I need is just the opposite. Maybe my explanation wasn't clear....

For example:
A have tiddlers tagged with RezeptGetestet >the background of the tiddlertitles of these tiddlers should be green.
And I have tiddlers tagged with RezeptNICHTGetestet >the background of the tiddlertitles of these tiddlers should be orange.

Tiddlers which have none of these both tags should be shown like in the control panel set (default).

Surya

coda coder

unread,
Feb 1, 2018, 11:41:28 AM2/1/18
to TiddlyWiki

Hmmm

In that case, I don't understand why you have a clash.

Are you CERTAIN you don't have another stylesheet applying another set of colors?

Try using the browser developer tools (press F12) and go to the Inspector.  Or, right click on the tiddler title, choose "Inspect element" or similar.  Then you can see what classes are applied to the element.

coda coder

unread,
Feb 1, 2018, 11:46:35 AM2/1/18
to TiddlyWiki
Surya -- I just edited my original to fix my bad cut-paste hack.  You need .tc-tagged- in front of each tag name.


On Thursday, February 1, 2018 at 10:35:17 AM UTC-6, Surya wrote:

Surya

unread,
Feb 1, 2018, 12:11:14 PM2/1/18
to tiddl...@googlegroups.com
Are you CERTAIN you don't have another stylesheet applying another set of colors?

It is on http://surya-diy.tiddlyspot.com/. There I have all stylesheets shown in Tiddlywiki-Anleitung >TW-Style.

But: If I only build one tiddler with only div.tc-tagged-RezeptGetestet .tc-tiddler-title { background-color: lightgreen; }, then everything works fine.

At the moment I have
div.tc-tagged-RezeptGetestet .tc-tiddler-title { background-color: lightgreen; } in one tiddler
and div.tc-tagged-RezeptNICHTgetestet .tc-tiddler-title { background-color: orange; } in another tiddler.

The tiddler with div.tc-tagged-RezeptNICHTgetestet .tc-tiddler-title { background-color: orange; } I build at last and that works.

If I build the RezeptNICHTgetestet-one at first and the RezeptGetestet-one at last, then the RezeptGetestet-one works.
So, always only the last build of both works, the first one doesn't work anymore.

So, I think, they disturb each other.

coda coder

unread,
Feb 1, 2018, 12:25:12 PM2/1/18
to TiddlyWiki
On Thursday, February 1, 2018 at 11:11:14 AM UTC-6, Surya wrote:
Are you CERTAIN you don't have another stylesheet applying another set of colors?

It is on http://surya-diy.tiddlyspot.com/. There I have all stylesheets shown in Tiddlywiki-Anleitung >TW-Style.


Sorry, the language barrier is preventing me from seeing what's going on...

 
But: If I only build one tiddler with only div.tc-tagged-RezeptGetestet .tc-tiddler-title { background-color: lightgreen; }, then everything works fine.

At the moment I have
div.tc-tagged-RezeptGetestet .tc-tiddler-title { background-color: lightgreen; } in one tiddler
and div.tc-tagged-RezeptNICHTgetestet .tc-tiddler-title { background-color: orange; } in another tiddler.

The tiddler with div.tc-tagged-RezeptNICHTgetestet .tc-tiddler-title { background-color: orange; } I build at last and that works.

If I build the RezeptNICHTgetestet-one at first and the RezeptGetestet-one at last, then the RezeptGetestet-one works.
So, always only the last build of both works, the first one doesn't work anymore.

This makes no sense.  IF they are stylesheets, they are loaded and running. If you have suitable specificity, they should both work.

Do you have styles specified in <style> elements?  That might explain something...


coda coder

unread,
Feb 1, 2018, 12:33:59 PM2/1/18
to TiddlyWiki
Surya

drag the attachment on to https://tiddlywiki.com/



my-styles.json

Surya

unread,
Feb 1, 2018, 1:15:11 PM2/1/18
to TiddlyWiki
Hi coda coder,

I found it now :-)
It was indeed another stylesheet disturbing.

Thanks a lot for your help!
Surya

Reply all
Reply to author
Forward
0 new messages