Adding custom CSS to Logseq
I was late on the uptake with custom CSS, but I have found it to be a valuable addition to my Logseq database. The visual cues make it more pleasant to interact with information, and the enjoyment of the experience should not be taken for granted in the PKM journey.
You can find my custom CSS here.
How to install custom CSS in Logseq
- Copy the code from the Github page linked above
- Open your 'Settings' menu in Logseq (this can be accessed using the shortcut 't s')
- Click the 'Edit custom.css' button
- Paste the code into the code editor
- Voila!
Some notes on my lack of CSS expertise
If you look through this handy CSS reference you'll see that I'm not following best practices, but I'm satisfied with the outcome for my purposes.
The most important things to note when changing the appearance for a given element are identifying your target (i.e. the text that will trigger the different display of a page reference or tag), and adding the appropriate marker to indicate position.
Tags: .tag[data-ref="target"]{ }.content
Page references: .page-reference[data-ref="target"]{ }.content
Data-ref patterns: (i.e. these will all work for the word target)
- [data-ref="target"] element whose target attribute value is exactly target
- [data-ref^="tar"] element whose target attribute value begins exactly with the string "tar"
- [data-ref$="get"] element whose target attribute value ends exactly with the string "get"
- [data-ref*="rg"] element whose target attribute value contains the substring "rg"
Now get out there and be an artist 😉
If you found this post helpful, you might enjoy the full Logseq Mastery course. The course has a wealth of videos, detailed write-ups and diagrams to quickly master Logseq and save you plenty of time and headaches.
Want to browse the course outline first?
Click on the button below to see the user guide for Logseq Mastery and to view the latest updates.
Keen to hear about other courses?
Subscribe now to get updates.