Adding custom CSS to Logseq

Adding custom CSS to Logseq

A how-to-guide on adding custom styling to Logseq, or 'Releasing the artist within'


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.

Instructions:

  • Copy the code from the Github page linked below
  • 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!

You can find my custom CSS here:

logseq/onestutteringmind.css at main ยท dario-ds/logseq
This is simply to publish my templates to the world :) - logseq/onestutteringmind.css at main ยท dario-ds/logseq

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 ๐Ÿ˜‰

via GIPHY

If you'd like more Logseq content, go to Logseq Mastery for more information.

Discussion

Community guidelines