Tony & Mario, thank you very much for taking the time to help.
I've just realised that I've omitted one important piece of info in my
original post which would probably save you time trying to assist me. I'm
sorry for that. What I forgot to say is that the functionality I'm looking
for is one that would match the power of the "class" field, in that it
would be able to style the* entire tiddler*, not just its body. Like using
the class field, we could, say, remove a tiddler's title by using
.tc-titlebar h2 { display: none; } etc.
Just an example. My actionable tiddlers (tasks and such) are tagged "item".
I use the below custom view template (tagged $:/tags/ViewTemplate) to
display them. This view template is itself conditional: the contents of a
tiddler tagged "item" will be displayed if the tiddler is not "locked"
(having a class "locked" will *conditionally *remove tiddler body and
buttons such as "More", "Edit this tiddler" etc. from view). The locked
tiddler view template is itself also conditional (based on other logic that
enables me to mass lock locked tiddlers using a toggle that modifies a
global variable, something not really relevant to this topic), which means
that even if an "item" tiddler also has the class "locked" it will not
necessarily be hidden from view as locked, because this depends on the
current status of the global locking mechanism (toggle position).
My view template for tiddlers tagged "item", at its most basic level, looks
like this:
<$list filter="[is[current]tag[item]]">
<$list filter="[is[current]class[locked]]">
{{_template_tiddler-locked}}
</$list>
<$list filter="[is[current]!class[locked]]">
-- all the styling/macros for the not locked tiddler tagged "item" go here
</$list>
</$list>
So, list filters determine what view template is applied to this tiddler.
In short, it's a view template transcluded in another view template.
In addition to that, I target all tiddlers tagged "item" through CSS
defined in my own $:/tags/Stylesheet tiddler to remove their titles like
here:
[data-tags*="item"] .tc-titlebar h2 { display: none; })
...because I've redesigned the way everything, titles included, look like
in "items" by using the above view template.
Everything works perfectly and I've had all of this working well for
months. I'm very happy with this design. BUT, as I've said above, I want to
get rid of tags altogether (for performance reasons). So, it would seem
trivial to simply replace the tag "item" and replace it with a field, say a
field called "data_type" with the value "item". Once this is done, this
would be my new view template:
<$list filter="[is[current]has[data_type]data_type[item]]">
<$list filter="[is[current]class[locked]]">
{{_template_tiddler-locked}}
</$list>
<$list filter="[is[current]!class[locked]]">
-- all the styling/macros for the not locked tiddler go here
</$list>
</$list>
But now I'm losing all the styling (specifically, the removal of tiddler
buttons) because this: [data-tags*="item"] no longer works, understandably,
because the tiddler is no longer tagged, I've replaced the tag with a field!
*This is the very root of what I'm trying to accomplish -- to give this
"data_type" field the same powers as the "class" field was given, so as to
be able to manipulate styling of the entire tiddler, not just its body.*
This will be only relevant in the edge cases where a tiddler is "double
styled", in addition to this styling being conditional. This is why I had
to rely on [data-tags*="item"] and on the "class" field as both of these*
target the whole tiddler* (including system buttons, the title etc.)
Styling from within a view template only targets tiddler body and this is
not enough for my use case.
I need to apologise for the sprawl, I'm aware it may all seem convoluted.
English is not my first language and I occasionally struggle to concisely
express what I'm trying to do. I'm also aware that there might be a quick
fix to this problem, though I haven't found it yet. I think it can be
accomplished by creating some clever CSS cascading or by modifying the core
view template (something I'm reluctant to do).
Thank you again for your time and all the help so far, it's very much
appreciated. It's amazing that TW has such a thriving community.
Best regards,
Hubert
On Friday, 13 December 2019 05:30:35 UTC, TonyM wrote:
>
> Post Script
>
> Using selectors and Understanding specificity
> <https://www.w3schools.com/css/css_specificity.asp>is quite involved. One
> thing I know is you can wrap something in a div with a specific ID and
> include that ID in your CSS so it only applies to something inside that ID.
>
> In a recent post I shared a solution for creating anchors inside a
> Tiddler, copy below. The trick was we used the qualify macro to make the ID
> unique to that tiddler, and in that case within the tiddler, you could do
> something similar. But I now have an idea how to make this automatic.
>
> Eg in TOC
>
> <a href=<<qualify ##h1>> >Link to My Heading</a>
>
> In Text
>
> <h1 id=<<qualify #h1>> > My Heading</h1>
>
> Also the following works to help users nest headings
>
> <a href=<<qualify ##h1.1>> >Link to My Heading 1.1</a>
>
> Later in tiddler
> <h1 id=<<qualify #h1.1>> > My Heading h1.1</h1>
>
> Notes:
>
> - There is not current tiddler in the sidebar so this may not work
> there, but a hardcoded number could be used
> - As ID's can be defined in CSS perhaps we can use the new wikitext in
> CSS features to automatically generate ID's that qualify them
> automatically.
> - I am confident there is more to be discovered.
>
>
> Regards
> Tony
>
>
> On Friday, December 13, 2019 at 4:17:45 PM UTC+11, TonyM wrote:
>>
>> Hubert,
>>
>> Perhaps, I expected you to read between the lines a little more. As in
>> marios pointer to "dynamically create a CSS
>> <https://www.google.com/url?q=https%3A%2F%2Ftiddlywiki.com%2F%23Q%253A%2520How%2520can%2520I%2520use%2520a%2520custom%2520field%2520to%2520style%2520a%2520tiddler%253F%3A%255B%255BQ%253A%2520How%2520can%2520I%2520use%2520a%2520custom%2520field%2520to%2520style%2520a%2520tiddler%253F%255D%255D%2520%255B%255BQ%253A%2520Is%2520there%2520a%2520way%2520to%2520create%2520dynamic%2520stylesheets%253F%255D%255D%2520%255B%255BQ%253A%2520What%2520if%2520a%2520tiddler%2520has%2520no%2520tags%253F%255D%255D&sa=D&sntz=1&usg=AFQjCNEIYFy5rz_ueUFPGI8NR6FNHluZrA>"
>>
>> see how the filter is used?, it is possible to have the filter use fields
>> to decide when to make some css active.
>>
>> For example in a tiddler tagged $:/tags/ViewTemplate
>> <$list filter=[all[current]has[fieldname]]">
>> <style>
>> css here
>> </style>
>> </$list>
>> The CSS Will be silently "displayed" on any tiddler with a field
>> "filename" that has a value.
>>
>> Be careful because this css will be valid on the whole page, that is
>> where ensuring the CSS selectors target only elements in the current
>> tiddler, you can use classes and styles in your css and in the tiddler
>> ensure that you label things with the specific class.
>>
>> Also in a tiddler tagged $:/tags/ViewTemplate
>> <$list filter=[all[current]has:field[fieldname]]">
>> <style>
>> css here
>> </style>
>> </$list>
>> Will be silently "displayed" on any tiddler with a field "filename" that
>> exists with a value or not.
>>
>> Or other filters like
>> [all[current]!has:field[fieldname]]
>> On tiddler that do not have the field "fieldname"
>>
>> I am no expert in CSS but I think you may be able to see what I am
>> saying. Please ask more Questions.
>>
>> Regards
>> Tony
>>
>> On Thursday, December 12, 2019 at 8:26:21 PM UTC+11, Hubert wrote:
>>>
>>> Tony,
>>>
>>> I appreciate your efforts to assist me. But what you've described or
>>> referenced is exactly what I've been doing and what I've already had
>>> implemented in my own wiki for a long time.
>>>
>>> As you can see in my original post and also in its title, I'm trying to
>>> go beyond all of that. I'm trying to apply custom data styles by
>>> *specifically
>>> targeting fields* -- also fields other than the designated "class"
>>> field alone.
>>>
>>> Anyway, thanks again for your time and efforts to provide assistance.
>>>
>>> Regards,
>>> Hubert
>>>
>>> On Thursday, 12 December 2019 01:02:33 UTC, TonyM wrote:
>>>>
>>>> Hubert,
>>>>
>>>> I am no expert in this but see
>>>> https://tiddlywiki.com/#Custom%20data-styles this defines the
>>>> attribute tags that comes with TiddlyWiki, it includes the ability to
>>>> apply
>>>> it to tiddler titles as well as using tags. I believe another approach is
>>>> for you to use the attribute definitions below
>>>> More Possibilities in
>>>> https://tiddlywiki.com/#Custom%20styles%20by%20data-tags
>>>> <https://www.google.com/url?q=https%3A%2F%2Ftiddlywiki.com%2F%23Custom%2520styles%2520by%2520data-tags&sa=D&sntz=1&usg=AFQjCNHiYB1k4q0_P2iyJ_ZE1uUdvegOLA>
>>>>
>>>> That is you can use this css method to address elements with your
>>>> custom attributes and apply css to those elements. This can stop the css
>>>> bleeding because it only applies to elements with those attributes.
>>>>
>>>> With an unbleading set of css you can then use a list widget/reveal
>>>> with a filter in the view template that contains a
>>>> <style>css</style>
>>>> Section, if and only if any desired field condition exists.
>>>>
>>>> I hope this leads you to an answer. Hopefully a CSS expert will see
>>>> this.
>>>>
>>>> tony
>>>>
>>>> On Thursday, December 12, 2019 at 1:19:11 AM UTC+11, Hubert wrote:
>>>>>
>>>>> Thanks for responding Tony.
>>>>>
>>>>> I believe filters can be used in css data-tags. Not done it myself
>>>>>>
>>>>>
>>>>> I would like to avoid tags as reference points for styling. I'm doing
>>>>> that currently and, if possible, I would like to "deprecate" this. Same
>>>>> for
>>>>> filters. Whenever possible, I've replaced them with the <reveal> widget.
>>>>>
>>>>> There is the class field and you can conditionaly display css between
>>>>>> <style> html tags in the view template using filter which can depend on
>>>>>> field values or existence.
>>>>>>
>>>>>
>>>>> Yes, I'm aware of the class field and I'm using that extensively. As
>>>>> for in-tiddler <style> tags, I've done that previously but, again, will
>>>>> not
>>>>> want to re-introduce this approach into my wiki, even if "sandboxed"
>>>>> using
>>>>> the <reveal> widget, because there's always the risk of "style spill"
>>>>> onto
>>>>> other tiddlers.
>>>>>
>>>>> Just to add, I've had a look at $:/core/ui/ViewTemplate and can see
>>>>> that *data-tiddler-title*, *data-tags* and *class *are the only
>>>>> "modifiers" available. I know I might try adding other field references
>>>>> and
>>>>> overwrite this shadow tiddlrt but I'm generally against modifying core
>>>>> functionality.
>>>>>
>>>>> Thanks again,
>>>>> Hubert
>>>>>
>>>>> On Sunday, 8 December 2019 01:23:17 UTC, TonyM wrote:
>>>>>>
>>>>>> Hubert
>>>>>>
>>>>>> I believe filters can be used in css data-tags. Not done it myself.
>>>>>> There is the class field and you can conditionaly display css between
>>>>>> <style> html tags in the view template using filter which can depend on
>>>>>> field values or existence.
>>>>>>
>>>>>> Short answer because I am mobile.
>>>>>>
>>>>>> Tony
>>>>>>
>>>>>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/258ef033-47d9-47a6-84cc-71034d3e89fc%40googlegroups.com.
