How to Use it?

Please check the Custom CSS Tutorial first
Copy the CSSs started with @import down below
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

@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

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

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

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

Table Tuning by tagging to title bar

Available Left Column Width List

You have to select one of the widths listed below first to make a Modern Table Low
From 90px to 1200px, 30px interval

Table Left Column Width	Tag Name for making a table
90px	`Table90`
120px	`Table120`
150px	`Table150`
180px	`Table180`
210px	`Table210`
...	...
1170px	`Table1170`
1200px	`Table1200`

Global Column Width Tuning by Tagging to the Title bar

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

Shrink Table width to fit inner contents

Tag Name : fit

Tuning individual column width

c1 = column 1
c2 = 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 Column Header Formatting

Tag Name : th

Workflow

Copy a Table from any sources

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

Features

Hacky method for Row table cell to use as a Column Table cell

Convert Spreadsheet Table into RemNote Format Workaround

Modern Table Column

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

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/Prepositive%20Rating%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

Tag to the Rem Document title area

Adjust 'background-size' on your tastes.

➊ background-size: contain; (Preferred) ➞ Height fixed and Responsive. but some margins can be made (need something like background color or repetitive background.).
➋ background-size: 100% 100%; ➞ Full responsive but the image can be ugly.
➌ background-size: cover; ➞ I don’t care about the cover image cropped.

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 Editor

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

Hide Aliases until cursor hovered or focused

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

.rich-text-editor-placeholder {
    display: none;
}

Move Omni Help Button for Content Visibility : Declutter ? Button at the lower right

#help-button {
  position: fixed;
  bottom: 4px;
  right: 4px;
  border-radius: 10px;
  color: #FFF;
  background-color: #404040;
}
.dark-mode #help-button {
  color: #000;
  background-color: #FFF;
}
#help-button:hover {
  background-color: #000;
}
.dark-mode #help-button:hover {
  background-color: #E0E0E0;
}

Disable inadvertent Bullet Click Event

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

Hide List Card Placeholder

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

Hide "Add a Document To This Folder"

#AddNewDocumentButtonSmall {
	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;
}

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 */
 /* Notion like No Bullet Editor Mode */
  @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Notion%20like%20No%20Bullet%20Editor%20Mode.css"); 
 /* Branch Emphasizing Editor Mode(need to be polished) */
  /* @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/"); */
/* 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");
 /* Notion like 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");
 /* 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");
 /* Easily Discernible List Card Layout */
  /* @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Easily%20Discernible%20List%20Card%20Layout.css"); */
 /* Easily Discernible Inline Card Layout */
  @import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Easily%20Discernible%20Inline%20Card%20layout.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");

slaterpeter / RemNote-CSS-Library

How to Use it?

Theme

Hidden Features

Display

Editor Mode

Tricks

Use case

Tricks - Tag-related Gimmick Series

Display

Table Tuning by tagging to title bar

Workflow

Features

UI UX Declutter Series

The SUM of all the Theme and Snippets

About

Languages