Here there is some CSS (to be placed in custom.css) to get custom icons like these as bullet points:
You can define custom tags like #@folder to add other icons from the Tabler icon theme (just install TablerPicker plugin and follow the instructions in the code below):
this is FANTASTIC and along with hiding top level bullets has honestly simplified my approach to data management a lot. i’ve been using 5 tags/block properties to categorize everything (tags, logs, people, dates, items) and was able to establish a hierarchy for the icon assignment by just putting those in a particular order in the css for blocks that contain more than one of those block properties. this is helping me immediately visually recognize if i haven’t categorized something correctly, or if i have incomplete data, since i also hide the block properties from view.
Interesting, I would like to see an example. Do you change only the icon? Or maybe its color? For example I change the color of the icon for bugs if they are open/closed:
I haven’t experimented with changing color at all. My inclination is to not go down that road unless I run into a use case where I could really use that level of differentiation, partially just to keep visual information to a minimum and also just 'cause i’m really inexperienced at editing stylesheets lol.
here’s my daily journal “dashboard” as well as my index i’m building out currently:
Thanks for this. I’ve wanted something like this for a while.
I created a plugin based on alex’s (@alex0) code to make it easier to use.
Bullet Point Custom Icon pluginThank you for sharing the css and examples. I have been using it and enjoying the clarity it brings and how it helps quickly tell blocks apart when scanning through the journal and pages.
I adapted it slightly to replace the bullet point for task blocks by including the default [data-refs-self*='"todo'] in the css you shared.
If I do not misunderstand this data-refs-self, one should also be able to dynamically change the color of a block’s icon by changing a value in its properties, right?. For instance, status:: open can be orange and status:: under review can be yellow, or unscheduled tasks can easily be highlighted in red. I will try this when I can spare half an hour.
In theory it is possible, maybe you need status:: [[open]] with brackets
How should the line look like for this to work?
The following should set a red flag as the bullet point for blocks with any property with the value [[task-open]]:
TODO example task
status:: [[task-open]]
custom.css.ls-block[data-refs-self*='task-open'] > .flex.flex-row.pr-2 .bullet-container .bullet:before {content: "\eaa6" !important; color: red !important}
I’ve been playing with this and had some success, but I don’t think I’m understanding the code well enough to do what I want.
I see the part about adding “#@page” to change the color, but I don’t really see how it works. Is there a way I could add a variety of different tags that could set the colors?
For example, maybe I have an event and two tasks in one area of responsibility today, and three events and one task in another one. I want all the "#@event"s to have the same icon, and all the "#@task"s to have a different icon, but I also want to be able to make the events and tasks for one area of responsibility “#@blue” and the events and tasks for the other “#@red”.
I don’t really want to have to create individual tags for “#@event-red” “#@event-blue” “#@task-red” and “#@task-blue” but I suppose I could. It would just be better for querying purposes if I could query the tags individually and pull up everything that’s “#@red” together, if that makes sense.