/RemNote-CSS-Library

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

Primary LanguageCSS

RemNote CSS Library

Any suggestions are welcome. https://forum.remnote.io/c/developers-api/9

Hits

Notion like No Bullet Editor Mode

CleanShot 2021-12-06 at 17 19 25 CleanShot 2021-12-06 at 17 10 42

Branch Emphasizing Editor Mode

CleanShot 2021-10-03 at 17 14 57

Notion like Callout Rem

CleanShot 2021-09-15 at 01 46 01

CleanShot 2021-08-16 at 23 21 45

Setting for image rendering Size Limitation Free

0b9bd70668dbd1042eee85d22416202462b6ca50_2_619x500

Modern Divider

b3f69bae4dfd9824c2ccabe58d67a0ea497514f2

Modern Dark Mode

CleanShot 2021-10-16 at 12 04 23

Sidebar Darkmode for Light-theme User

CleanShot 2021-09-26 at 18 52 47

Easily Discernible List Card Layout

CleanShot 2021-10-29 at 18 01 31

Before

CleanShot 2021-10-29 at 15 01 27

After

CleanShot 2021-10-29 at 14 55 20

All you need to do is just guess how long the front-side width size is, and then tag to each Answer Part of the Card (each rem Individually)

  • w120 → Front width 120px
  • w150 → Front width 150px
  • w180 → Front width 180px
  • w210 → Front width 210px
  • w240 → Front width 240px
  • w270 → Front width 270px
  • w300 → Front width 300px
  • w330 → Front width 330px
  • w360 → Front width 360px
  • w390 → Front width 390px
  • w420 → Front width 420px
  • w450 → Front width 450px
  • w480 → Front width 480px

Easily Discernible Inline Card Layout

Before

afe643439f9189205e34e4767aa70a2ca58241e4

After

008536836b289d7997156aedf0ca70fabeb112d3 CleanShot 2021-10-22 at 21 20 39

All you need to do is just guess how much size is fit for a card and then set the width of a Front Card by tagging

  • w120 → Front width 120px
  • w150 → Front width 150px
  • w180 → Front width 180px
  • w210 → Front width 210px
  • w240 → Front width 240px
  • w270 → Front width 270px
  • w300 → Front width 300px
  • w330 → Front width 330px
  • w360 → Front width 360px
  • w390 → Front width 390px
  • w420 → Front width 420px
  • w450 → Front width 450px
  • w480 → Front width 480px

Modern Scrollable Codeblock

CleanShot 2021-09-16 at 17 10 33 CleanShot 2021-10-22 at 21 46 48

Strikethrough Workaround

CleanShot 2021-09-13 at 23 39 40

Rem Thumbnail

69f4ab54dd1c030791535327f2e740feecf277a7 8f16098e374ee9a24d7103aef83798e60c384558_2_401x499

Using this snippet, You can make any image to Thumbnail especially in RemNote Sidebar or Document Title!

All you need to do is just copy & paste your image.

It is Optimized for fixed pixel so I recommend you to use

  • header-1 size to 32px
  • header-2 size to 24px
  • header-3 size to 18px
  • normal rem-text to 16px → You have to Tag Thumbnail for normal rem-text

or Customize on your tastes!

If you find some bugs or something to improve, please let me know!

Make Cover Photo Easy Again

I thought this thread could be hard for so called RemNote newbies. So I made easier one. CleanShot 2021-08-16 at 23 31 08 Try these steps one by one.

  1. Make CSS Template on Custom CSS b2166effbe4016d88c592ea9ceef6ab72ed8d53a_2_690x429

  2. Adding image url, Naming the tag

    cf4804d784ceb2e7104955bb6dd0c0ed5216b010_2_461x500

  3. Tagging to the Rem-title

    2ddd2062525cbb69d7a5a6649e35d8459f9505ea_2_561x500 5e97a8160321b914f6e84aceef038fd244c826d6_2_690x341

  4. Adjust background-size on your tastes

  • ➊ background-size: 100% 100%; ➞ Full responsive but the image can be ugly.
  • ➋ background-size: contain; ➞ Height fixed, Responsive to width but some margins can be made.
  • ➌ background-size: cover; ➞ I don’t care about the cover image cropped.

Hope new revamped big update version could be more intuitive. 🙂

Terminal

CleanShot 2021-08-29 at 15 07 51