browneyedsoul / RemNote-CSS-Library

A Curated List of RemNote CSS Snippets for Better Note-taking and Spaced Repetition

How to Use it?

1. Please check the Custom CSS Tutorial first

2. Copy the CSSs started with @import down below

3. Go back to your Knowledge Base. And then, paste the clipboard into a Custom CSS power-up page Code Block in which the language button is tuned to CSS.

PS: All the latest snippets are optimized for Modern Dark Theme

Theme

Modern Dark Theme (🚧 Constant changes in the RemNote structure make it hard to maintain this theme. Please use the default theme. When all the structures are stable, it will be completely rebuilt with different codes to support additional release. 😉)

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Dark%20Theme.css");

Hidden Features

Turning Highlight Color into Text Color

You can change a Highlight color to a text color by simple bolding

Displaying Long Page Breadcrumbs with scroll bar

Display

---

Editor Mode

No Bullet Editor Mode

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Notion%20like%20No%20Bullet%20Editor%20Mode.css"); 

What is the purpose of this snip?

• For those who are thinking that Bullet-based Outliner Editor is way too cluttered with crowded bullet points.
• Combined UX : Notion like Block based Editor + Outliner

If you need bullet points, Make them by tagging `bulletlist`

And if you want just one tag for bulleted children, you can use `bulletlists`

Use case

---

Tricks

Modern Scrollable Codeblock

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Scrollable%20Code%20Block.css");

---

Rem Thumbnail

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Rem%20Thumbnail.css");

Use case

• I'd recommend you to use Rem Thumbnail with a rem-reference, which image is saved somewhere else in the workspace neatly like this.

---

Rem Card Icon

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Rem%20Card%20Icon.css");

---

Tricks - Tag-related Gimmick Series

NOTICE : Good Companion Apps for Easy-Tagging

OS	Text Expansion Tools
Windows	AutoHotkey, espanso
macOS	Keyboard Maestro, espanso
Linux	AutoKey, espanso

• The above list is just an example. You can find more apps online.
• And more details about it. - RemNote Forum

---

Callout Rem

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Notion%20like%20Callout%20Rem.css");

---

Modern Divider

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Divider.css"); 

---

Active Recall

• Tag Name : active recall (❌ active-recall)

Ver.1 - Reveal all the Answer-blocks in a List card Answer at the same time

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Active%20Recall.css");

Ver.2 - Active Recall in all situation. even in a Flashcard Review modal page and a 'Edit your flashcard' popup

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Active%20Recall2.css");

Ver.3 - Legacy Mode (Show List-card Answer-blocks one by one)

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Active%20Recall3.css");

origin author : hannesfrank

---

Rem Planner

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Planner.css");

---

Rem Tree

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Rem%20Tree.css");

• Tag Name : Tree , Treec

---

Blockquote

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Blockquote.css");

• Tag Name : blockquote

---

Modern Table Row ⭐️

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Table%20Row.css");

Display

How to make Modern Table Row

• You have to select one of the widths listed below first to make a Modern Table Low

• From 90px to 1200px, 30px interval

• Available Left Column Width List

Table Left Column Width	Available Tag Name
90px	Table90
120px	Table120
150px	Table150
180px	Table180
210px	Table210
...	...
1170px	Table1170
1200px	Table1200

Table Tuning by Tagging to the Title Bar

Tuning Global Column Width

Table Left Column Width	Tag Name for global width tuning
90px	W90
120px	W120
150px	W150
180px	W180
210px	W210
...	...
1170px	W1170
1200px	W1200

Tuning Individual Column Width

• 'c1' means column 1
• 'c2' means column 2
• ...

Available Column Width	Tag Name for width tuning - INDIVIDUAL column
200px	c1w200, c2w200, c3w200, c4w200, c5w200, ... , c9w200
400px	c1w400, c2w400, ... c9w400
600px	c1w600, c2w600, ... c9w600
800px	c1w800, c2w800, ... c9w800
1000px	c1w1000 c2w1000,, ... c9w1000

Table width shrinking to fit with inner contents

• Tag Name : fit

Table Column Header Formatting

• Tag Name : th

Use case

Copy a Table from any sources

Paste it to RemNote and Tag the predefined-width Table Row Tags to the Table Title area

Hacky methods

Turn a Row table cell into a Column Table cell

• Tag Nmae : lb(deprecated)

You can now make seperated table-row column by simple indenting under a top level rem in a table cell

Convert Spreadsheet Table into RemNote Format Workaround

---

Modern Table Column

• Tag Name : Table

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Table%20Column.css");

Please use this only in a simple case. If you want to make more sophisticated table, I would recommend you to use 'Modern Table Row' in most use cases instead, since it can cover more requirement you'd have

---

Modern Kanban

Modern Kanban1 - Inbox → In Progress → Done → Archive

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Kanban.css");

Modern Kanban2 - Fully Customizable

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Kanban2.css");

origin author : hannesfrank

---

Strikethrough Workaround

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Strikethrough.css");

---

Caption

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Image%2C%20Codeblock%20Caption%20like%20in%20Notion.css");

---

Rating bar

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Rating%20Bar.css"); 

---

Cover Photo

/* Please Copy the .css file (Template) and paste to your KB Directly */

Make a Cover Photo CSS Template

Add a image url, Name the tag properly

Tag to the Rem Document title area

Adjust 'background-size' on your tastes.

properties	details
background-size: contain; (Preferred)	Height fixed and Responsive. but some margins can be made (need subsidiary steps like adding background color or making background repetitive pattern).
background-size: cover;	I don’t care about the cover image cropped. (suitable for cover images which have repetitive patterns)
background-size: 100% 100%;	The cover image can be ugly according to a front window size. (not recommended, only for mono-colored cover)

---

Terminal

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Terminal.css");

---

UI UX Declutter Series

Hide a Specific Tag

Sometimes, you can be bothered by meaningless tags like "th", "lb", ..., which are used for formatting reasons. Then you can apply this code with a highlight color. In my case I chose the purple one and the code below is also running with purple colored rems.

.hierarchy-editor__tag-bar__tag.highlight-color--purple,
.hierarchy-editor__tag-bar__tag.highlight-color--purple span {
  display: none;
}

---

Hide Inline Source Permanently in RemNote Hierarchical Editor

[data-rem-tags~="source-list"] > div > .inline-flex {
  display: none;
}

---

Hide Aliases until cursor hovered or focused (fixing)

.tree-node-container > .tree-node--children > .tree-node-container[data-rem-container-tags~=aliases]:not(:hover):not(:focus-within) {
  display: block;
  background-color: #ECECEC;
  border-radius: 2px;
  max-height: 6px;
  overflow: hidden;
}
.dark-mode .tree-node-container > .tree-node--children > .tree-node-container[data-rem-container-tags~=aliases]:not(:hover):not(:focus-within) {
    background-color: #272C30;
}

---

Rem Backlink Declutter

Sometimes, some rems don't need to represent all the backlinks. And If a rem shows a bunch of the backlinks, it slows down the paging

• Example of the some rems: caption, bulletlist, table, table90, table120, w360 ...

[data-rem-container-tags~="remover"] .animate-zoom-into-bullet #show-embedded-search-button,
[data-rem-container-tags~="remover"] .animate-zoom-into-bullet #AutomaticSearchPortals,
[data-rem-container-tags~="remover"] .rem-container--embedded-search-stub {
  display: none !important;
}

---

Hide Placeholder aka "Type / for Commands"

• Before

• After

.rich-text-editor > .pointer-events-none {
  opacity: .2;
}

---

Disable inadvertent Bullet Click Event

.rem-bullet__container {
  pointer-events: none;
}

---

Hide List Card Placeholder (fixing)

[data-rem-tags="card-item"] .text-gray-20 {
  display: none;
}

---

Hide "Add a Document To This Folder"

.add-new-document-button {
  display: none;
}

---

Disable URL Link Popup when hovering website reference

.popup-menu > .p-1 {
  display: none;
}

---

Remove Document Top Blank line

.rn-add-rem-button--top {
  height: 10px;
  display: block;
} 

---

Extra Card Details Zoom

.extra-card-detail .extra-card-detail__item .RichTextViewer .align-text-top {
  zoom: 125%; /* Tune here */
}

---

The SUM of all the Theme and Snippets

/* Modern Dark Theme */
  @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Dark%20Theme.css");
/* Editor Mode */
  /* No Bullet Editor Mode */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Notion%20like%20No%20Bullet%20Editor%20Mode.css"); 
/* Tricks */
  /* Modern Scrollable Codeblock */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Scrollable%20Code%20Block.css");
  /* Rem Thumbnail */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Rem%20Thumbnail.css");
  /* Callout Rem */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Notion%20like%20Callout%20Rem.css");
  /* Modern Divider */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Divider.css"); 
  /* Active Recall */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Active%20Recall.css");
   /* @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Active%20Recall2.css"); */
   /* @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Active%20Recall3.css"); */
  /* Rem Planner */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Planner.css");
  /* Rem Tree */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Rem%20Tree.css");
  /* Rem Card Icon */
    /* @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Rem%20Card%20Icon.css"); */
    /* If you are using 'No Bullet Editor Mode', you are already using this! */
  /* Blockquote */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Blockquote.css");
  /* Modern Table Row */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Table%20Row.css");
  /* Modern Table Column */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Table%20Column.css");
  /* Modern Kanban */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Kanban.css");
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Kanban2.css");
  /* Strikethrough Workaround */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Strikethrough.css");
  /* Caption */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Image%2C%20Codeblock%20Caption%20like%20in%20Notion.css");
  /* Rating Bar */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Prepositive%20Rating%20Bar.css"); 
  /* Terminal */
    @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Terminal.css");