What is Custom CSS and how do I use it?

See title. I always see people talking about it and showing off interesing screenshots like this:

What is it?

CSS is a web technology to change the appearance of websites, e.g. the font size and color of text or the position, border and background color of blocks.

Custom CSS is a feature to customize RemNote. (It basically allows you to inject CSS into the app.) Like (almost) everything else in RemNote it is just a Rem - a Power Up Rem to be precise. You can open it with Ctrl + P and then searching for “Custom CSS”.

Custom CSS allows you to configure user themes to change the appearance of RemNote as a whole but you can also do crazy other stuff like displaying rem to appear as tables or Kanban boards.

How do I use it?

Open the Custom CSS page (Ctrl + P and search for “Custom CSS”) and insert a code block by clicking the button “Add Blank CSS Block”.

Then you usually copy something someone else has already written (see below for places to discover CSS). Here is a nice video by Eva Thomas showing how to install and configure her theme (RemNoteTheme on Github:

If you know a bit of CSS (or are willing to learn it :smiley: it’s not hard! Quick tip: noob CSS cheat sheet.) you can write your own CSS like shown here:

Styling Tags

The November 2020 Update implemented markup improvements which allow to style rems with a certain tag specifically. See Custom Rem-level formatting with tags for some demos. CSS code can target the text of a tag (e.g. kanban). To apply the styling you just have to tag your rem with any rem having the text kanban.

Where do I get ready-made Custom CSS?

Go to the :scroll:Library.

You can also look at the Themes and Custom CSS sections in Awesome RemNote (Forum Topic: Awesome-remnote: List of plugins, themes and other resources), but most things should be published on the Library already.

FAQ

Does Custom CSS apply to all my devices?

Yes, it is per knowledge base. That means it gets synced between all your devices - even the Android App. But if you use multiple Local-Only Knowledge Bases you have to replicate your Custom CSS settings in each Knowledge Base you want it active in.