Auto-Format to set styles for each level valid for the whole list

What I want is to get a list that looks like that…
2020-10-23_08h07_00
withhout the need to format each line individually.

For a first step I thought about something simple as ->

  • every line that has subitems gets the MH header format
  • every line that has no subitem gets no MH format (stays a normal entry)

This way “leaves” can be easily distinguished from “parents”.

Maybe there is a css-hack that can do this? I have looked at the tipps here:


But I am not good at css and didn’t see a way to format parents and leaves differently.

Ist this already possible or a feature request?
Could someone give me a hint/example if this is possible with a CSS hack?

Thanks
Chris

I just realized, that this probably will be a feature request because in most of the cases you don’t want this behaviour for ALL of your lists. I assume that you can’t activate some style only for specific lists via css at the moment - or can you?

But I am still interested in an excample to do this with css if you habe one.

Thanks

Hello Chris,

Thanks for your comments!

Talking about heading customizations you’re asking about, i.e. styling top-level headings and subheadings differently - it is quite possible. We are considering to add a separate ‘document’ mode for lists at some time in the future, as well as more advanced customizations, templates and alike.

Recently we’ve implemented a possibility to style lists depending on tags specified in the lists. The corresponding discussion is here: Using tags to activate/deactivate CSS customizations on whole lists

Let’s say you have a list tagged #document. Then you can use CSS rules like below:

.list_tag_document ul.topLevel li.task {
  font-size: 26px;
}

.list_tag_document ul.topLevel ul li.task {
  font-size: 20px;
}

.list_tag_document ul.topLevel ul ul li.task {
  font-size: 14px;
}

Until we’ve implemented better customization approach, this may be a way to go :slight_smile:
Please let me know if it works for you.

All the best,
KIR

Hi KIR,
and thanks for your reply :slight_smile:

It’s great, that we can change CSS depending on the list tags.

I only need one thing to make this work…
Your example formats the list entries in regards to their indentation. Level 1 is very big, Level 2 is only big and Level 3 is “not so big”.
I want to format the “leaves” different to the “parents”. If an item has sub-items it should look different to items that havn’t.

What I want to achieve is similar to folders and files. Folders contain other folders or files. Folders are “containers”, the files are “the information”. I hope this pictures explains it better (parents are yellow, leaves are white):
2020-10-23_16h37_35

Is it possible to distinguish between “parents” and “leaves”?

Thanks
Chris

Hi Chris,

Understood. There is an additional leafItem CSS class for nodes which are final, regardless on their level.

So probably a rule like this should work for you:

.list_tag_document ul.topLevel  li.task.leafItem {
  font-size: 14px;
}

Please check it out :slight_smile:

1 Like

Great, I am now playing with the possibilities :+1:

At the moment I tried a combination like this …

.list_tag_outline ul.topLevel li.task {
  font-size: 20px;
  color: dimgrey;
}

.list_tag_outline ul.topLevel ul li.task {
  font-size: 20px;
  color: grey
}

.list_tag_outline ul.topLevel  li.task.leafItem {
  font-size: 14px;
  color: white;
}

So far, I am happy with the result.
Thanks for your help.

2 Likes