Few question about using @@ construction to style the tiddlers

[talha131]

TiddlyWiki documentation mentions @@ construction here.

It says you can do

@@background-color:red;
Your text
@@

How can I use this construction to apply style to a particular element? Like,

li {list-style-type: decimal; }

I tried

@@li {list-style-type: decimal; }

But it does not work.

Question 2

Document mentions

@@background-color:red;
Your text
@@

But this also works

@@background-color:red;
@@

Your text
More text

Notice that there is no next between @@, but the rule gets applied to the whole tiddler.

Is this syntax correct to use? Or is it a bug in TW code?

​

[Brian Radspinner]

You just specify the styling you want, and wrap the @@...@@ around the item(s), leave out the element, since you can only wrap around a single element (or nested elements). The following all work...

```

@@list-style-type:decimal;

* list item
* list item
@@

@@list-style-type:lower-roman;
* list item
* list item
@@

@@list-style-type:circle;
* list item
* list item

@@

```

[talha131]

Thank you Brian. I was trying to achieve something like this

li {list-style-type: decimal; } 
li li {list-style-type: lower-alpha; }

But it seems nesting rules using @@ is not possible.

​

[Mat]

@talha131 ...or maybe I should say @@.talha131  ;-)

Try this

@@.myclass
*foo
**bar
@@

<style>
.myclass li {list-style-type: decimal; }
.myclass li li {list-style-type: lower-alpha; }
</style>

i.e you define a new class and apply this class. In the above, the class is defined in a local styleblock. If you want to use it globally you should instead move the content that is between the style tags into a stylesheet tiddler, i.e any tiddler tagged "$:/tags/Stylesheet" and with the type "Static stylesheet"

<:-)

[talha131]

Thank you Mat. I ended up using your solution.

[Eric Shulman]

On Sunday, September 6, 2020 at 11:22:37 AM UTC-7, talha131 wrote:

Thank you Mat. I ended up using your solution.

Just to note... we discussed this just 4 days ago in the topic titled "Regarding list bullets"

In fact, this is *exact* same solution that YOU yourself posted, here:

https://groups.google.com/d/msg/tiddlywiki/sl8pm8XgLGA/s7XNca_NAQAJ

-e

[talha131]

Yeah, Eric. I meant that's the solution I used. 😊

[Brian Radspinner]

Just to give another option, you can nest @@..@@ by adding some HTML around the nested @@...@@:

@@list-style-type:decimal;
# line
# line <div>

@@list-style-type:lower-alpha;
# line
# line
@@

</div>
@@

Proper CSS work is probably better, but this could work for quick one-off nested styling.

[talha131]

Thank you Brian. This is exactly what I was looking for. Much appreciated!

Some behavior of the @@ is undocumented. I enabled "tiddlywiki/internals", plugin to see the raw HTML.

I noticed, if @@background-color: red; is not immediately followed a by newline after the semicolon, then the rule is applied to span element, instead of div.

In your solution I noticed if the enclosing <div> is not followed by a newline then the nested rules do not work.

I guess @@ parser is particular about newlines and spaces.

​

[Eric Shulman]

On Wednesday, September 9, 2020 at 5:53:17 AM UTC-7, talha131 wrote:

Thank you Brian. This is exactly what I was looking for. Much appreciated! Some behavior of the @@ is undocumented. I enabled "tiddlywiki/internals", plugin to see the raw HTML. I noticed, if @@background-color: red; is not immediately followed a by newline after the semicolon, then the rule is applied to span element, instead of div. In your solution I noticed if the enclosing <div> is not followed by a newline then the nested rules do not work. I guess @@ parser is particular about newlines and spaces.

The fact that "@@attribute:value; ...content ... @@" cannot be nested really limits it to use for quick styling with simple attributes.  In general, it is much better to use proper CSS class definitions (either via a separate tiddler tagged with $:/tags/Stylesheet, or via <style>...</style> within the content of a tiddler).

When you do want/need to use nested "inline CSS", you can always resort to HTML syntax:

<div style="..."> content </div>  or <span style="..."> content </span>.

Thus, in Brian's example, you could eliminate the "@@" syntax entirely, and just write:

<div style="list-style-type:decimal;">

# line
# line <div style="list-style-type:lower-alpha;">

# line
# line
</div>
</div>

See https://tiddlywiki.com/#Lists%20in%20WikiText for more examples of how to apply CSS to bullets.

-e

​

[Brian Radspinner]

Somewhere else in this group, it was stated that a blank line is needed after any HTML element before using WikiText to make sure that everything works as needed. So, when I want a more complicated nesting but still use WikiText for less typing, I put a blank line between the HTML and WikiText...

[talha131]

Just two days ago I was facing this problem

# item 1
# item 2
```
code
```
# item 3

I was wondering how to make it work in TW.

In some flavors of Markdown intending the code line does the trick and the numbering continues from the previous number.

In AsciiDoc, you can tell the markup to continue the counting.

Your `div` trick solve the issue.

# item 1
# item 2 <div>

```
code
```
</div>
# item 3

[Eric Shulman]

On Wednesday, September 9, 2020 at 9:44:34 AM UTC-7, talha131 wrote:

Your `div` trick solve the issue.

The <div> trick is goes all the way back to the original TiddlyWiki Classic days, and is described here:

https://tiddlywiki.com/#Lists%20in%20WikiText

(scroll to the bottom of the tiddler where it says "Paragraphs in Lists")

Note: you can actually use any matching pair of SGML tags you like, even ones that aren't defined for HTML.

This can be used for *any* "block mode" content (i.e., formatting the requires newlines), such as tables, bullets, etc.

For example, here's a complex TiddlyWiki formatted table within a numbered bullet item:

# Step 1
# Step 2
# Step 3<gronk>

|Cell1 |Cell2 |Cell3 |Cell4 |

|Cell5 |Cell6 |Cell7 |<|

|Cell5 |~|Cell7 |Cell8 |

|>|Cell9 |Cell10 |Cell11 |

</gronk>
# Step 4
# Step 5
# Step 6

-e