What is Custom CSS and how do I use it?

[hannesfrank]

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

[hannesfrank]

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:

Styling Remnote with Custom CSS

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

[RemNote Custom CSS] Hiding Clozes for Practice

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 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.

[green]

Thanks,It seems that I have to continue to learn

[vetnursestudies]

Hi there!

This is my first post - I hope I’m posting in an ok place for this. I’ve just tried using the custom CSS for the kanban board plugin and it doesn’t seem to be working for me. I’m sure this is to do with me rather than a bug, but I’ve made sure I’m following the install instructions and have fiddled around a bit and the demo still doesn’t seem to be working for me. I’m not sure what I’ve done wrong; I’ve included a screenshot below. Would you be able to help?

[TaQuangKhoi]

After 1.4 update, Custom CSS of Kanban, Table, … was broken…

[vetnursestudies]

@TaQuangKhoi
Ah oh, thank you so much for the answer! It looks like such a good addition to Remnote so I hope there’s an update or a fix for it soon!

[Harald]

Hi. It is pretty straightforward to copy and paste a custom css in Remote. But what then???
Nothing changes. Can someone please give me step by step solution to use a custom css.

I have the code.
I go to power up css and click on Add Black CSS Block.
A parent bock appears with the name Snippet and with a child child block where I can paste my CSS code
I paste the code in the mentioned field.
And now what???
nothing happens and nothing changes…
I am lost. What do I need to do now?

Thanks
Harald

[UMNiK]

You shouldn’t have to do anything else - as long as the checkbox next to Snippet is empty and the pasted in css is valid, it should take effect immediately. Some older CSS is likely to be broken due to updates, but e.g.,

@UMNiK

Smaller and more condensed font

works and should be easy to check. Of course, if the CSS is tag-based, you have to first tag something with whatever tag it uses.

[Harald]

Thanks for your fast reply.
I really don’t know what I’m doing. I. am trying to use Beau Haans Custom Roam CSS. for example this. span.rm-page-ref[data-tag=“Fleeting Notes”]
{ background: #fff;
background-size: 100%;
color: #000;
padding: 2px 5px 2px 5px;
font-size: 13px;
line-height: 1em;
font-weight: 500;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-color: #f21da140;
border-width: thin;
position:relative;
box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #DFDFDF;
}

Even when I use the tag “Fleeting Notes” nothing changes. Are these CSS not working in RemNote?

[UMNiK]

No, nor does any CSS from a particular app work in a different one. Without going into technical detail, each app has different names for similar things, so the CSS has to be manually adapted to know what the correct names for the specific app are. RemNote CSS snippets resources may be found in the awesome list and there are random snippets floating around on this forum and on the discord. At some point in the future, there will be a centralised location for RemNote extensions, but for now I’m afraid you’ll have to lurk/ask around.

[hannesfrank]

UMNiK is correct. Apart from general stuff like font size and backgound color, CSS needs to be written for a specific app.

Your code snippet would look like this for RemNote:

.rem-reference-container[data-rem-tags~="boxed-reference"] {
	background: #fff;
	background-size: 100%;
	color: #000;
	padding: 2px 5px 2px 5px;
	font-size: 13px;
	line-height: 1em;
	font-weight: 500;
	border-radius: 5px 5px 5px 5px;
	border-style: solid;
	border-color: #f21da140;
	border-width: thin;
	position:relative;
	box-shadow: 0px 1px 3px -1px #000000, 0px -1px 5px #DFDFDF;
}

Note the changed CSS selector in the first line.

And be used like this:

Furthermore in RemNote you cannot target the style of a reference by the reference text, but by the tags applied to the referenced rem, in this case #Boxed Reference. This allows reusing the style for different references and keeps it working for aliases.

[FaradayCosta]

Hey,

I am a newbie on remnote and in my confusion I think I deleted the Custom CSS document. I searched for it (http://remnote.com/trash), but I did not find the document there.

Please Help

[hannesfrank]

Custom CSS is a Power-Up rem and cannot be deleted. Very likely you just renamed it or deleted the title completely.

You can recover it using the steps here: How do I find a missing power up rem?

@hannesfrank

If this was recent you may find it by just scrolling through the recently modified pages in All Notes > All .

Otherwise you can recover it using the Developer Tools:

• Open them with F12 (Web) or Ctrl + Shift + I (Desktop).
• Go to the Console tab.
• Run this code (paste + enter):

getCachedRemForPowerup(listPowerups()['Custom CSS'], CURRENT_KNOWLEDGE_BASE).goToRem()

This looks up the rem representing the Power-up in an internal dictionary and opens it, in this case Custom CSS.

[FaradayCosta]

Thank you for your reply.

I tried to find it in All Notes > All. I couldn`t find it (Power up rems do have a mark, yet I did not see that power up rem). With the developer Tools, I have to say, I do not know how to run a code :D. I managed to enter the the developer tools up until the console tab.

But it is no problem I found the option in the settings: interface and I could add custom css there

[hannesfrank]

Haha, that’s an even simpler solution! Did not think of this.

(You can run code there by pasting it after the > and pressing enter.)

[FaradayCosta]

Are you from Germany (cause your name)?
Greetings from Austria