Rem Custom Thumbnail

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 36px
  • header-2 size to 28px
  • header-3 size to 20px
  • 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!

https://github.com/browneyedsoul/RemNote-CSS-Library

Click Here

Copy & Paste to your Custom CSS

/***************** Header 1 *****************/
.rem-header--1 {
	font-size: 36px !important;
	color: ; /*#E6F3F7*/
	background-color: transparent; /*#2B3137*/
}

.rem-bullet__container .rem-header__bullet--1 {
	margin-top: 18px;
}

.rem-header--1 .rem-checkbox {
	margin-top: 16px;
}

/***************** Header 2 *****************/
.rem-header--2 {
	font-size: 28px !important;
}

.rem-bullet__container .rem-header__bullet--2 {
	margin-top: 10px;
}

.rem-header--2 .rem-checkbox {
	margin-top: 10px;
}

/***************** Header 3 *****************/
.rem-header--3 {
	font-size: 20px !important;
}

.rem-bullet__container .rem-header__bullet--3 {
	margin-top: 7px;
}

.rem-header--3 .rem-checkbox {
	margin-top: 4px;
}

/************** Document Title **************/
#document .document-title {
 	font-size: 36px !important;
 	font-weight: bold !important;
 	font-family: Sans-Serif Workhorse !important;
}

/*
.document-source {
	background-color: transparent;
	color: #2B3137;
	position: relative;
	top: -65px;
	zoom: 125%;
	padding-top: 5px;
	font-weight: 700;
}
*/

#DocumentTitle .tumbnail--with-width {
	display: inline-block;
	height: 36px !important;
	width: auto !important;
	margin-top: 4.2px;
}
#DocumentTitle .react-resizable {
	display: inline-block;
	height: 36px !important;
	width: auto !important;
	padding-right: 15px;
}

#DocumentTitle .react-resizable-handle {
	display: none;
}

/************** Page Hierarchy Style **************/
#document-parents .parent-link .tumbnail--with-width {
	height: 16px !important;
	width: auto !important;
 	color: #2B3137;
 	padding-right: 15px;
}

#document-parents .parent-link .react-resizable-handle {
	display: inline-block;
	height: 16px !important;
	width: auto !important;
	padding-right: 15px;
}

#document-parents .parent-link .react-resizable-handle {
	display: none;
}

/************** Document Sidebar **************/
#documentList .tumbnail--with-width {
	display: inline-block;
	height: 16px !important;
	width: auto !important;
	padding-right: 5px;
}

/************** Document Sidebar Hover Preview**************/
#document-hover-preview #DocumentTitle {
	height: 28px !important;
	padding: 10px;
}

#document-hover-preview .tumbnail--with-width {
 	display: inline-block;
	height: 18px !important;
	width: auto !important;
	padding-right: 5px;
}

#document-hover-preview .hierarchy-editor__tag-bar {
	position: relative;
	z-index: 2;
	top: -2px;
	left: ;
}



/************** Document Sidebar Hover Preview Header **************/
#document-hover-preview .rem-header--1 .tumbnail--with-width  {
	display: inline-block;
	height: 36px !important;
	width: auto !important;
	margin-right: 5px;
}

#document-hover-preview .rem-header--2 .tumbnail--with-width  {
	display: inline-block;
	height: 28px !important;
	width: auto !important;
	margin-right: 5px;
}

#document-hover-preview .rem-header--3 .tumbnail--with-width  {
	display: inline-block;
	height: 20px !important;
	width: auto !important;
	margin-right: 5px;
}



/************** Document Sidebar Hover Preview Image Thumbnail **************/
[data-rem-tags*="thumbnail"] #document-hover-preview .tumbnail--with-width, 
[data-rem-tags*="thumbnail"] #document-hover-preview .react-resizable {
	display: inline-block;
	height: 18px !important;
	width: auto !important;
	padding-right: 5px;
}

[data-rem-tags*="thumbnail"] .react-resizable-handle {
	display: none;
}



/************** Reference Hover Preview Header **************/
.EditorContainer.EditorContainerInline .tumbnail--with-width {
	height: 18px !important;
	width: auto !important;
 	color: #2B3137;
 	padding-right: 5px;
}

/************** Document Hidden children **************/
hierarchy-editor__hidden-children .rem-header--1 .tumbnail--with-width  {
	display: inline-block;
	height: 36px !important;
	width: auto !important;
	margin-right: 5px;
}

/************** Header **************/
.rem-header--1 .tumbnail--with-width ,
.rem-header--1 .react-resizable {
	display: inline-block;
	height: 36px !important;
	width: auto !important;
	margin-right: 5px;
}

.rem-header--1 .tumbnail--with-width:focus:not(:focus),
.rem-header--1 .tumbnail--with-width:focus:hover,
.rem-header--1 .react-resizable:not(:focus) {
	display: inline-block;
	height: 36px !important;
	width: auto !important;
	margin-right: 0px;
}

.rem-header--1 .react-resizable-handle {
	display: none;
}

.rem-header--2 .tumbnail--with-width,
.rem-header--2 .react-resizable {
	display: inline-block;
	height: 28px !important;
	width: auto !important;
	margin-right: 5px;
}

.rem-header--2 .tumbnail--with-width:focus:not(:focus),
.rem-header--2 .tumbnail--with-width:focus:hover,
.rem-header--2 .react-resizable:not(:focus) {
	display: inline-block;
	height: 28px !important;
	width: auto !important;
	margin-right: 0px;
}

.rem-header--2 .react-resizable-handle {
	display: none;
}

.rem-header--3 .tumbnail--with-width,
.rem-header--3 .react-resizable {
	display: inline-block;
	height: 20px !important;
	width: auto !important;
	margin-right: 5px;
}

.rem-header--3 .tumbnail--with-width:focus:not(:focus),
.rem-header--3 .tumbnail--with-width:focus:hover,
.rem-header--3 .react-resizable:not(:focus) {
	display: inline-block;
	height: 20px !important;
	width: auto !important;
	margin-right: 0px;
}

.rem-header--3 .react-resizable-handle {
	display: none;
}

/************** Normal Rem **************/
[data-rem-tags*="thumbnail"] .tumbnail--with-width, 
[data-rem-tags*="thumbnail"] .react-resizable {
	display: inline-block;
	height: 18px !important;
	width: auto !important;
	margin-right: 5px;
}

[data-rem-tags*="thumbnail"] .tumbnail--with-width:focus:not(:focus),
[data-rem-tags*="thumbnail"] .tumbnail--with-width:focus:hover,
[data-rem-tags*="thumbnail"] .react-resizable:not(:focus) {
	display: inline-block;
	height: 18px !important;
	width: auto !important;
	margin-right: 0px;
}

[data-rem-tags*="thumbnail"] .react-resizable-handle {
	display: none;
}


/************** Tag bar **************/
.hierarchy-editor__tag-bar__tag .tumbnail--with-width {
	display: inline-block;
	height: 18px !important;
	width: auto !important;
	padding-right: 5px;
}

.popup .tumbnail--with-width  {
	display: inline-block;
	height: 18px !important;
	width: auto !important;
	padding-right: 5px;
}

/************** Search Result **************/
.search-result__rem-breadcrumbs .tumbnail--with-width {
	display: inline-block;
	height: 16px !important;
	width: auto !important;
	padding-right: 5px;
}

/************** Queue Title bar **************/
.queue__middle .tumbnail--with-width, 
.queue__middle .react-resizable {
	height: 36px !important;
	width: auto !important;
 	color: #2B3137;
 	padding-right: 5px;
}

.queue__middle .react-resizable-handle {
	display: none;
}

/************** Queue breadcrumbs **************/
.spaced-repetition__prompt__breadcrumbs .tumbnail--with-width {
	height: 18px !important;
	width: auto !important;
 	color: #2B3137;
 	padding-right: 5px;
}

/************** Queue Contents **************/
.spacedRepetitionContent .indented-rem .tumbnail--with-width {
	height: 16px !important;
	width: auto !important;
 	color: #2B3137;
 	padding-right: 5px;
}

.indented-rem .react-transform-component.TransformComponent-module_container {
	vertical-align: middle;
}

/************** Rem Reference **************/
.rem-reference .tumbnail--with-width, .rem-reference .react-resizable {
	display: inline-block;
	height: 16px !important;
	width: auto !important;
	margin-top: 1px;
	padding-right: 5px;
}

.rem-reference .react-resizable-handle {
	display: none;
}
5 Likes