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 (🚧 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
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
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");
- 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");
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 |
Use case
Hacky methods
Turn a Row table cell into a Column Table cell
- Tag Nmae :
(deprecated)lb
You can now make seperated table-row column by simple indenting under a top level rem in a table cell
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 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");
Cover Photo
/* Please Copy the .css file (Template) and paste to your KB Directly */
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) |
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 "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");