Regarding list bullets

[Millo]

Hey all,

I have a doubt regarding list bullets. I know that an * leads to bullets while # leads to numbering. However, I want to know if I can do the following via TW:

1. Some random Question.

     a. Subsection 1

     b. Subsection 2

      ........

and also can we do this:

1. Some random Question.

    a. Subsection 1  

         i. Subsection 1.1

        ii. Subsection 1.2

   .......

    

[Eric Shulman]

On Thursday, August 27, 2020 at 10:06:24 AM UTC-7, Millo wrote:

an * leads to bullets while # leads to numbering. However, I want to know if I can do the following via TW:

1. Some random Question.

    a. Subsection 1  

         i. Subsection 1.1

        ii. Subsection 1.2

   .......

Yes.  Use CSS to style the numbered bullets, like this:

<style>
li {list-style-type: decimal; }
li li {list-style-type: lower-alpha; }
li li li {list-style-type: lower-roman; }
li li li li {list-style-type: circle; }
</style>

# Some random Question
## Subsection 1
## Subsection 2
# Another Random Question
## Subsection 1
### Subsection 1.1
### Subsection 1.2
## Subsection 2
### Subsection 2.1
### Subsection 2.2
# One More Random Question
## Subsection 1
### Subsection 1.1
#### Subsection 1.1.1
##### Subsection 1.1.1

Here's a link to a reference for "list-style-type":

https://www.w3schools.com/cssref/pr_list-style-type.asp

enjoy,

-e

[TW Tones]

Eric,

This method will apply the styles to any list open on screen even in other tiddlers, if the one containing the style is displayed.

Can you suggest the simple method to ensure these custom styles apply only in the current tiddler?, perhaps we use a section or div around the content of the tiddler?

I have long sought an answer on this one, and not quite expert on css to get a good answer.

Regards

Tony

[Eric Shulman]

On Thursday, August 27, 2020 at 5:15:57 PM UTC-7, TW Tones wrote:

This method will apply the styles to any list open on screen even in other tiddlers, if the one containing the style is displayed.

Can you suggest the simple method to ensure these custom styles apply only in the current tiddler?, perhaps we use a section or div around the content of the tiddler?

Indeed, it is as simple as wrapping the bullet list in a div with a named class, and using that class in the CSS declarations, like this:

<style>
.myBullets li {list-style-type: decimal; }
.myBullets li li {list-style-type: lower-alpha; }
.myBullets li li li {list-style-type: lower-roman; }
.myBullets li li li li {list-style-type: circle; }
</style>
<div class="myBullets">

# Some random Question
## Subsection 1
## Subsection 2
# Another Random Question
## Subsection 1
### Subsection 1.1
### Subsection 1.2
## Subsection 2
### Subsection 2.1
### Subsection 2.2
# One More Random Question
## Subsection 1
### Subsection 1.1
#### Subsection 1.1.1
##### Subsection 1.1.1

</div>

-e 

[Millo]

Thanks Eric, this was very helpful.

[David Gifford]

I liked this so much I added it to the toolmap instantly.

[TW Tones]

Eric,  Perhaps any other css master,

I do not mean to wander too far from the OT but it seems appropriate to raise this.

This .myBullets class is functional but is there any other way to define all these css settings without repeating the major class name?, in part because it would be nice to repeat this in other circumstances or make the class name a local variable.

I will explore this myself in time but I am looking for a simpler workflow.

Regards

Tony

[talha131]

There is a alternative syntax available that some may find useful.

Created tiddler

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

Then in whichever tiddler you want to use this style use @@ syntax.

! With Style

@@.myBullets
# one
## two
### three
@@

! Without style

# one
## two
### three

​