Using tags to activate/deactivate CSS customizations on whole lists

Hi @maxkir,

As explained in https://checkvist.com/checklists/486715#task_18193998 it is possible to style all list items nested under a certain tag. However, it seems that this is only true if the tag is applied to a list item, but not if the tag is applied to an entire list by tagging the list title.

I think it would be useful if entire lists could be customized by simply adding or removing a certain tag. I know that I can customize an entire list by using the #list_nnnnnn selector. However, this does not allow me to quickly activate/deactivate a customization on one or more full lists.

To my understanding, the current limitation is due to the fact that the list title is part of the tool bar, but not of the tasks block containing the list entries. Therefore I suggest that when a tag is applied to the list title, the .tag_tagname class is also added to one of the parent elements of all list entries (for example to #list_nnnnnn, #tasks_block or ul.topLevel). The style of the list entries can then depend on whether this element has the class or not.

What do you think?

Best regards,
soremo

3 Likes

Hi @soremo,

Thanks a lot for the suggestion, we’ll definitely try to implement it with the next update.

Best,
KIR

Hi @soremo,

We’re adding the corresponding CSS tags, so far testing at https://beta.checkvist.com

Please see list_tag_TAGNAME CSS classes added to the list pages with corresponding tags.
What do you think, would it work for you?

Please let me know if you notice any bugs.

Best,

1 Like

Hi @maxkir,

thanks a lot for adding this feature so quickly! This is very much appreciated! :clap:

I tested it a bit, and it seems to work as intended. :+1:

Just two minor observations:

  • Apparently, one has to reload the page after adding or removing a tag to the list title for the tag-dependent CSS customizations to take effect. If the list_tag_TAGNAME class was added immediately, the customizations would instantly appear — which would be nice, though actually I’m also totally fine with the current behavior.

  • Currently, the list_tag_TAGNAME class is added to the list div so that one can customize this div, its subsequent siblings and all their children, but not its preceding siblings and their children. If the class was added to the list div's parent (i.e. to the layoutDiv) instead, one could also customize the toolbarDiv which contains the list title. This would allow to make the tag in the list title invisible, for example. To me it seems a litte counterintuitive that by tagging the list title you can style the list, but not the list title itself. Though, again, I’m totally happy with the current behavior.

Many thanks again!
soremo

1 Like

Hi @soremo,

Thanks a lot for the detailed comments!

Both your observations should have been fixed, on beta. Hope it is now even better than before :slight_smile:

All the best,
KIR

1 Like

Hi @maxkir,

Thank you for considering my suggestions! I think it’s perfect now.

(I would add “fixed” to this topic if I knew how to do this.)

Best,
soremo

Cool, thanks! It will be included into the next production update :slight_smile: