Okay. I thought so too.
Do you know where it would make sense to open it as a feature request?
I am not a programmer but I don't see how a class could be added to just HTML character codes.
I cannot quite see what you are trying to achieve, but if you just want the arrow (or any other character) to have a colour you can add one using HTML in the Markdown editor.
I purposely also set a large font size just so the characters are more visible.
All the codes can be found here.
TBH I cannot recall Joplin ever automatically colouring these characters but then again I very rarely use them.
2 Likes
This might be aligned with the Rich Markdown plugin.
1 Like
@dpoulton I only use the markdown editor and not the viewer. I only use Typora as an editor as well as the viewer for tables.
Before Joplin moved to the newer markdown editor engine, the highlighting of arrows was working...
@whitewall thanks for the hint. I will give it a try.
Hi there !
I've modified my theme a little bit so now I have responsive columns for the markdown render and 2-column grayscale layout for pdf exports.
Hope someone will find this theme usefull 
Demo video :
4 Likes
For font size only you could try CTRL + = to make everything bigger (see View > Zoom in) or
userchrome.css
a.list-item,
span.title,
span.tag-label {
/* a.list-item = All notes, span.title=Notebook names, span.tag-label=Tag names */
font-size: 20px;
font-family: monospace;
}
Not checked to see if this has an impact elsewhere in the app.
There does not seem to be a usable class for the words "NOTEBOOKS" and "TAGS".
update.
I found solution.
a.list-item,
span.title,
span.tag-label,
span, a
{
/* a.list-item = All notes, span.title=Notebook names, span.tag-label=Tag names */
font-size: 20px;
font-family: tahoma !important;
}
work pretty good. just 1 problem.
I add this line "span, a" and its not effective on Hebrew note name.
a.list-item,
span.title,
span.tag-label,
span, a
{
/* a.list-item = All notes, span.title=Notebook names, span.tag-label=Tag names */
font-size: 20px;
font-family: tahoma
}
if I make the change in develop tool its work.
Adding span, a means span elements and a elements and from looking at the screen shot the note list name is being set by the div element where it shows div, span, a.
Anyway, if you want to change the note titles as well (which is different from your original question) try:
a.list-item,
span.title,
span.tag-label,
div.note-list-item span {
/* a.list-item = All notes, span.title=Notebook names, span.tag-label=Tag names, div.note-list-item span=Note titles*/
font-size: 20px;
font-family: tahoma !important;
}
EDIT = Used new class name in css to make it a bit more tidy.
1 Like
Thanks.
work very well!
any way to detect Hebrew language and make it RTL direction? or its not part of CSS commends?
I believe that lack of RTL is due to the Markdown renderer itself. This is from a previous post that talks about RTL languages.
Search this forum and GitHub for RTL in case there is anything that may help.
However I did see:
where a poster states that adding:
#rendered-md p {
unicode-bidi: plaintext;
}
To userstyle.css may help with rendering RTL languages. I have not been able to test it.
1 Like
Anyone know why the third level of lists is .cm-keyword? Seems odd.
Custom ordering for notebooks! Ish...
Definitely not a 10min horrible hack...(sorry if anyone has already done this, I can't find it or maybe people just have too much pride to do this).
Basically from what I understand the Notebooks in the sidebar cannot be ordered. However, that doesn't mean I can't do a horrible workaround, probably with endless caveats and limitations that I'm not even aware of.
Just prefix a letter or number on your notebook name. Sorted. The CSS then makes it invisible but normal sorting logic obvious still applies.
I only really want it for top level (or maybe second level if I can be bothered) sorting but no reason you can't go all the way down through the depths providing you don't have too many notebooks per level (0-9, a-z. Not sure where punctuation or other weird characters would fit).
Obviously this isn't going to work any wonders on mobile. Or on web clipper. And some plugin stuff will probably look weird with the extra letter thrown on the front. And probably a million other problems because all this does is make the first letter see through... If anyone can make it less hacky then have at it.
CSS on:
CSS off:
CSS on just for depth-0:
.list-item-depth-0 .title::first-letter{
color: transparent !important;
}
.list-item-depth-1 .title::first-letter{
color: transparent !important;
}
/* Uncomment for more depths
.list-item-depth-2 .title::first-letter{
color: transparent !important;
}
.list-item-depth-3 .title::first-letter{
color: transparent !important;
}
*/
Also works for tags:
.tag-label::first-letter {
color: transparent !important;
}
7 Likes
This took me a while to figure out, so I'll share it with you guys. I love using the VIM mode of Joplin but I am not a fan of blinking cursors (too distracting), and wasn't liking the default vim-cursor color. I also figured out how to color the active line:
/* Disable cursor blinking */
div.CodeMirror-cursors {
visibility: visible !important;
}
/* Cursor color (VIM) */
.cm-fat-cursor .CodeMirror-cursor {
background: red;
}
/* Make cursor still visible while in visual mode */
.cm-animate-fat-cursor {
-webkit-animation: none;
background-color: red !important;
}
/* Active line background */
.CodeMirror-activeline {
background: #1e1f29;
}
Edit: to make cursor change color based on focus:
/* Cursor color (unfocused) */
.cm-fat-cursor .CodeMirror-cursor {
background: grey;
}
/* Cursor color (focused) */
.CodeMirror-focused .CodeMirror-cursor {
background: red;
}
1 Like
Ohmine Dark Theme
You should use this theme with the Joplin build-in dark theme:
Options > Appearance > Theme > Dark
Overview
Sticky Notes
Art Gallery
Abstract Content Bar
Text
Headings
Links
Blockquote
Lists
Checklist
Code Block
Math Notation
Printing Sample
https://drive.google.com/file/d/1O_MkblRKLwjfjkGFeVh8vR1cbhB6Rm9v/view?usp=sharing
userstyle.css
:root {
/* GROUP STYLING */
--base-font: "montserrat", "microsoft jhenghei light", avenir,
arial, sans-serif;
--base-font-size: 14px;
--code-font: "cascadia mono light", monospace,
"microsoft jhenghei light";
--headings-font-weight: 600;
--primary-text-color: #bdbdbd;
--primary-headings-color: #fff;
--primary-link-color: #cdd286;
--primary-headings-margin: 1em 0 0.8em 0;
}
/* BASIC ****************************************** */
body {
font-family: var(--base-font);
color: var(--primary-text-color);
font-size: var(--base-font-size);
background: #151b1a;
}
/* STYLING: HEADINGS ****************************** */
h1 {
padding: 0;
margin: var(--primary-headings-margin);
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;
background: linear-gradient(
85deg,
#3bfff7,
#16d0c1,
#7cffcd,
#74dec8,
#74dec8,
#7cffcd,
#16d0c1,
#3bfff7
);
line-height: 1.2em;
font-variant: small-caps;
color: var(--primary-headings-color);
font-size: 2.3em;
font-weight: 700;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #396a5b;
}
h2::before {
content: " ";
display: inline-block;
width: .7em;
height: 0.8em;
padding: 0;
margin: 0 8px 0 0;
background: var(--primary-headings-color);
border-radius: 0.9em 2.9em 1.1em 3em;
}
h2 {
padding: 0;
margin: var(--primary-headings-margin);
color: var(--primary-headings-color);
font-size: 1.8em;
font-weight: var(--headings-font-weight);
border-width: 0 0 1px 0;
border-style: solid;
border-color: #949494;
}
h3 {
padding: 0;
margin: var(--primary-headings-margin);
color: var(--primary-headings-color);
font-size: 1.5em;
font-weight: var(--headings-font-weight);
}
h4,
h5,
h6 {
padding: 0;
margin: var(--primary-headings-margin);
color: var(--primary-headings-color);
font-size: 1.2em;
font-weight: var(--headings-font-weight);
}
/* STYLING: LINK ********************************* */
a {
color: var(--primary-link-color);
}
.resource-icon {
background: var(--primary-link-color);
}
/* STYLING: FOOTNOTE ***************************** */
.footnotes-sep {
display:none;
}
.footnotes:before {
content: "Footnotes";
display:inline-block;
width: 100%;
margin-top: 2em;
padding-top: 0.5em;
border-width: 3px 0 0 0;
border-style: double;
border-color: #8080807a;
}
#fn1,
#fn2,
#fn3 {
color: grey;
}
/* STYLING: TEXT ********************************* */
em,
strong {
color: #e7c297;
}
s {
color: #776857;
}
ins {
color: #ce8864;
}
mark::before,
mark::after {
content: " ";
display: inline-block;
width: 0.5em;
}
mark {
background: #d6b15f;
color: #000000;
border-radius: 9px;
}
abbr[title] {
color: #54d077;
font-weight: 500;
text-decoration: underline dotted;
}
/* STYLING: PARAGRAPH ****************************** */
p {
padding: 0 0 0 4px;
margin: 1em 0;
}
blockquote {
padding: 0 0 0 1.2em;
margin: 0;
color: #a2998f;
border-width: 0 0 0 5px;
border-style: dotted;
border-color: #fbce9a;
opacity: 1;
}
/* STYLING: CODE BLOCK | INLINE CODE **************** */
.hljs {
padding: 10px 20px;
margin: 25px 0 25px 0;
background: #101413;
color: var(--primary-text-color);
font-size: 13px;
border-width: 0 3px;
border-style: ridge;
border-color: #80f0ff;
border-radius: 10px;
box-shadow: 0 0 3px #a2f1e3;
}
code {
font-family: var(--code-font);
}
/* STYLING: MATH NOTATION *************************** */
span.katex-display {
color: #c5fffc;
font-size: 1.5em;
text-shadow: 0 0 3px #c5fffc;
}
/* STYLING: LISTS *********************************** */
div > ul,
div > ol {
margin: 20px 0 20px 25px;
}
li {
margin: 0.3em 0;
color: #5bb5a2;
}
input:checked {
/* checkbox checked color */
filter:hue-rotate(-50deg) brightness(140%);
}
/* STYLING: TABLE *********************************** */
table {
width:100%;
margin: 25px auto 25px auto;
}
/* STYLING: STICKY NOTES **************************** */
/* The sticky note-"IMPORTANT" is standalone, not included with this group styling */
note::after,
tip::after,
question::after,
explain::after,
warning::after,
keyword::after {
display: table;
width: 100;
padding: 0 10px 0;
margin: 8px 10px 0 0;
font-weight: 700;
text-shadow: 1px 1px 3px #000000;
border-radius: 4px 10px;
}
note,
tip,
question,
explain,
warning,
keyword {
display:block;
padding: 10px 20px 10px 20px;
margin: 15px 0;
background: linear-gradient(120deg, #0c0c0c, #232323, #0c0c0c);
color: #eaeaea;
border-width: 0px 2px;
border-style: solid;
border-color: #008c5c;
border-radius: 8px 20px;
box-shadow: 1px 1px 4px #148059;
}
/* STYLING: STICKY NOTE- NOTE */
note::after {
content: "NOTE";
background: #0065b3;
}
/* STYLING: STICKY NOTE- TIP */
tip::after {
content: "TIP";
background: #b7aa00;
}
/* STYLING: STICKY NOTE- QUESTION */
question::after {
content: "QUESTION";
background: #5a00b5;
}
/* STYLING: STICKY NOTE- EXPLAIN */
explain::after {
content: "EXPLAIN";
background: #00bf88;
}
/* STYLING: STICKY NOTE- WARNING */
warning::after {
content: "WARNING";
background: #c30000;
}
/* STYLING: STICKY NOTE- KEYWORD */
keyword::after {
content: "KEYWORD";
background: #c10074;
}
/* STYLING: STICKY NOTE- IMPORTANT */
important::before {
content: "IMPORTANT";
display: block;
width: 100%;
padding: 0;
margin: 0px 0 10px 0;
background: #3c0000;
color: red;
font-weight: 700;
text-align: center;
border-width: 1px 0 1px 0;
border-style: solid;
border-color: red;
border-radius: 8px;
}
important {
display:block;
padding: 1em;
margin: 1em 2em;
background: #edad0b0d;
color: #e8c399;
font-weight: 500;
border-width: 0px 2px;
border-style: solid;
border-color: #ff0000;
border-radius: 8px 20px;
box-shadow: 0 0 5px red;
}
/* STYLING: ART GALLERY ***************************** */
ag2,
ag3,
ag4,
ag5,
ag6 {
display: inline-flex;
flex-wrap: wrap;
max-height: 60vh;
margin: 25px 0;
align-items: center;
justify-content: center;
overflow-y: scroll;
}
ag2 img,
ag3 img,
ag4 img,
ag5 img,
ag6 img {
padding: 5px;
}
ag2 img {
max-width: calc(100% / 2.1);
}
ag3 img {
max-width: calc(100% / 3.2);
}
ag4 img {
max-width: calc(100% / 4.4);
}
ag5 img {
max-width: calc(100% / 5.6);
}
ag6 img {
max-width: calc(100% / 6.8);
}
/* STYLING: PRINTING ********************************* */
@media print {
/* "AVOID" PRINTING: | sticky notes | */
note:after,
tip:after,
question:after,
explain:after,
warning:after,
keyword:after,
important:after,
note,
tip,
question,
explain,
warning,
keyword,
important {
display: none; /* replace this line of codes by "display: block;" for print out the sticky notes */
}
/* RELEASE ART GALLERY OVERFLOW */
ag2,
ag3,
ag4,
ag5,
ag6 {
max-height:none;
overflow-y:unset;
}
/* ADJUSTMENTS: | SIZE | COLOR | */
body {
color:#4c4c4c;
font-size: 12px;
}
h2::before {
box-shadow: inset 0 0 0 1000px #00000075; /* repleace this line of codes with "display:none;" if you don't want to print out the heading icon */
}
h1 {
-webkit-text-fill-color: initial;
-webkit-background-clip: initial;
color: #00000075;
font-size: 22px;
font-weight: 700;
border-bottom: none;
}
h2 {
color: #00000075;
font-size: 18px;
}
h3 {
color: #00000075;
font-size: 14px;
}
h4,
h5,
h6 {
color: #00000075;
font-size: 12px;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
.hljs,
blockquote {
margin: 10px 0;
}
div > ul,
div > ol {
margin: 10px 0 10px 25px;
}
mark::before,
mark::after {
width:3px;
}
mark {
font-weight: 500;
border-top: 1px solid #0000009e;
border-bottom: 1px solid #0000009e;
border-radius: 4px;
}
table {
margin: 10px auto;
}
.hljs {
padding: 10px 20px;
background: none;
border-color: #0000009e;
font-size: 10px;
white-space: pre-wrap;
box-shadow: none;
}
span.katex-display {
color: #7d7d7d;
font-size: 12px;
text-shadow: none;
}
note::after,
tip::after,
question::after,
explain::after,
warning::after,
keyword::after {
color: #00000075;
border: 1px solid #7b7b7b;
text-shadow: none;
}
note,
tip,
question,
explain,
warning,
keyword {
color: #4c4c4c;
border: 1px solid #7b7b7b;
box-shadow: none;
}
}
userchrome.css
/* ------------------------ */
/* STYLING: MARKDOWN EDITOR */
/* ------------------------ */
/* basic **************************************** */
.CodeMirror:not(.cm-tag) * {
font-family: "montserrat", "microsoft Jhenghei light", avenir, arial, sans-serif !important;
color: #bdbdbd;
font-size: 14px;
}
.resizableLayoutItem.rli-root {
background-color: #151b1a;
}
.codeMirrorEditor {
background-color: #151b1a !important;
}
/* headings ************************************* */
.cm-header {
color: #bdbdbd !important;
font-weight: 600;
}
.cm-header-1 {
font-size: 2.3em !important;
font-variant: small-caps;
}
.cm-header-2 {
font-size: 1.8em !important;
}
.cm-header-3 {
font-size: 1.5em !important;
}
.cm-header-4,
.cm-header-5,
.cm-header-6 {
font-size: 1.2em !important;
}
span.cm-rm-link,
a.cm-link-text:noot(.cm-rm-image) {
color: #cdd286 !important;
}
/* code block ************************************ */
div.CodeMirror div.cm-jn-code-block {
background: #101413 !important;
}
/* code block text ******************************* */
div.CodeMirror span.cm-comment:not(.cm-jn-inline-code) {
color: #bdbdbd !important;
}
/* abstract content bar ************************** */
span[role="presentation"]::after,
span.cm-header::after,
span.cm-overlay.cm-rm-link::after,
span.cm-link-text::after,
span.cm-overlay.cm-rm-link.cm-rm-image::after,
div.cm-rm-code-block pre.CodeMirror-line span::after,
div.CodeMirror span.cm-comment:not(.cm-jn-inline-code)::after,
span.cm-tag.cm-bracket::after,
.cm-katex-marker-open::after,
.cm-katex-marker-close::after,
span.cm-variable-2.cm-rm-list-token::after,
span.cm-variable-3.cm-rm-list-token::after,
span.cm-keyword.cm-rm-list-token::after,
.cm-rm-checkbox::after,
span[cm-text]:only-child::after {
content: "";
display: inline-block;
width: 2px;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
/* plain text */
span[role="presentation"]::after {
background: #383838;
z-index: 1;
}
/* headings */
span.cm-header::after {
background: #ffffff6e;
z-index: 2;
}
/* web link & file path link */
span.cm-overlay.cm-rm-link::after {
background: #cdd286;
z-index: 3;
}
/* footnote */
span.cm-link-text::after {
background: #5a5800;
z-index: 4;
}
/* abbreviation */
span.cm-em.cm-link-text::after {
background: #da8d00;
z-index: 5;
}
/* attached image */
span.cm-overlay.cm-rm-link.cm-rm-image::after {
background: #008e156e;
z-index: 5;
}
/* code block */
div.cm-rm-code-block pre.CodeMirror-line span::after,
div.CodeMirror span.cm-comment:not(.cm-jn-inline-code)::after {
background: #101413;
z-index: 10;
}
/* html tag */
span.cm-tag.cm-bracket::after {
background: #ff0063;
z-index: 6;
}
/* math notaion */
.cm-katex-marker-open::after,
.cm-katex-marker-close::after {
background: #5aa5fb;
z-index: 7;
}
/* ordered list & unordered list */
span.cm-variable-2.cm-rm-list-token::after,
span.cm-variable-3.cm-rm-list-token::after,
span.cm-keyword.cm-rm-list-token::after {
background: #b11da9;
z-index: 8;
}
/* checklist */
.cm-rm-checkbox::after {
background: #5d00ff;
z-index: 9;
}
/* blank line: release the below codes will showing the blank line on the abstract content bar */
/* span[cm-text]:only-child::after {
background:#151b1a;
z-index:10;
} */
/* ------------------------ */
/* STYLING: JOPLIN UI */
/* ------------------------ */
/* STYLING: NOTEBOOKS PANEL ********************** */
.sidebar {
background-color: #191919 !important;
border-radius: 0 0 7px 7px;
box-shadow: 0 0 2px #33524a;
}
/* hiding the "All Notes" link */
.all-notes {
display: none !important;
}
/* directory icon */
i.fas.fa-caret-down,
i.fas.fa-caret-right {
text-shadow: 0 0 5px #dedede;
opacity: 1 !important;
}
i.fas.fa-caret-right {
color: #f6ff67;
}
i.fas.fa-caret-down {
color: #71ffc4;
}
/* notebook hover state */
.list-item-depth-0,
.list-item-depth-1,
.list-item-depth-2,
.list-item-depth-3,
.list-item-depth-4,
.list-item-depth-5,
.list-item-depth-6,
.list-item-depth-7,
.list-item-depth-8,
.list-item-depth-9,
.list-item-depth-10,
.list-item-depth-0:hover,
.list-item-depth-1:hover,
.list-item-depth-2:hover,
.list-item-depth-3:hover,
.list-item-depth-4:hover,
.list-item-depth-5:hover,
.list-item-depth-6:hover,
.list-item-depth-7:hover,
.list-item-depth-8:hover,
.list-item-depth-9:hover,
.list-item-depth-10:hover {
height: fit-content !important;
border-radius: 5px 10px;
}
.list-item-depth-0:hover,
.list-item-depth-1:hover,
.list-item-depth-2:hover,
.list-item-depth-3:hover,
.list-item-depth-4:hover,
.list-item-depth-5:hover,
.list-item-depth-6:hover,
.list-item-depth-7:hover,
.list-item-depth-8:hover,
.list-item-depth-9:hover,
.list-item-depth-10:hover {
filter: hue-rotate(180deg);
}
/* notebooks selected state */
.list-item-depth-0.selected,
.list-item-depth-1.selected,
.list-item-depth-2.selected,
.list-item-depth-3.selected,
.list-item-depth-4.selected,
.list-item-depth-5.selected,
.list-item-depth-6.selected,
.list-item-depth-7.selected,
.list-item-depth-8.selected,
.list-item-depth-9.selected,
.list-item-depth-10.selected {
background: linear-gradient(60deg, #002f24, #00926a);
box-shadow: 0 0 3px #72fdbd;
}
/* notebook title indentation */
.list-item-depth-0 {
padding-left: 11px !important;
}
.list-item-depth-1 {
padding-left: 22px !important;
}
.list-item-depth-2 {
padding-left: 33px !important;
}
.list-item-depth-3 {
padding-left: 44px !important;
}
.list-item-depth-4 {
padding-left: 55px !important;
}
.list-item-depth-5 {
padding-left: 66px !important;
}
.list-item-depth-6 {
padding-left: 77px !important;
}
.list-item-depth-7 {
padding-left: 88px !important;
}
.list-item-depth-8 {
padding-left: 99px !important;
}
.list-item-depth-9 {
padding-left: 110px !important;
}
.list-item-depth-10 {
padding-left: 121px !important;
}
/* set limit to the length of notebook title */
div.list-item-container a.list-item {
padding: 4px 0;
margin: 1px auto;
max-width: 95%;
border-width: 0 0 2px 0;
border-style: dotted;
border-color: #ffffff14;
}
/* notebook title wrap text */
.list-item-depth-0 span.title,
.list-item-depth-1 span.title,
.list-item-depth-2 span.title,
.list-item-depth-3 span.title,
.list-item-depth-4 span.title,
.list-item-depth-5 span.title,
.list-item-depth-6 span.title,
.list-item-depth-7 span.title,
.list-item-depth-8 span.title,
.list-item-depth-9 span.title,
.list-item-depth-10 span.title {
color: #e2e2e2;
max-width: 80%;
white-space: normal;
overflow-wrap: break-word;
}
/* note count label */
.note-count-label {
display: block;
margin: 0 0 0 auto;
position: sticky;
right: 2px;
background: #4affff24;
font-size: 10px;
text-align: center;
border: 1px solid #ffffff1f;
border-radius: 8px;
opacity: 0.8 !important;
}
.note-count-label::after {
content: "";
display: inline-block;
width: 8px;
}
/* tag-related notebook navigation button */
.kAMSfD {
position: absolute;
top: 6px;
right: 280px;
background: #00926a !important;
border-radius: 5px 10px !important;
}
.kAMSfD:hover {
filter: hue-rotate(180deg);
}
.icon-notebooks,
.icon-notebooks ~ span {
color: white !important;
}
/* synchronize information */
.sc-fzoxKX {
color: #02ffd0 !important;
}
/* synchronize btn */
.hEuwIc,
.hEuwIc:hover {
background-color: #313131 !important;
border: none !important;
border-radius: 1em !important;
}
.hEuwIc:hover {
filter: brightness(150%);
}
/* STYLING: NOTE LIST PANEL ********************** */
.sc-fzqAui {
box-shadow: 0 0 2px #33524a;
border-radius: 7px;
}
/* note list panel header */
.sc-fznLPX {
background-color: #191919 !important;
}
/* search icon & new todo btn & new note btn */
.icon-search:before,
.fa-check-square:before,
.icon-note:before {
color: #f5f5f5;
}
button[title="New to-do"],
button[title="New note"],
button[title="New to-do"]:hover,
button[title="New note"]:hover {
background: #00926a;
border-radius: 5px 10px;
}
button[title="New to-do"]:hover,
button[title="New note"]:hover {
filter: hue-rotate(180deg);
}
/* note list panel body */
.cLdGCO {
background: #191919 !important;
border: none !important;
border-radius: 0 0 7px 7px !important;
}
.note-list {
padding: 3px 7px 0 0;
}
/* note list selected state */
.selected.note-list-item {
margin: 3px;
background: linear-gradient(60deg, #002f24, #00926a);
border-radius: 6px 15px;
box-shadow: 0 0 5px #72fdbd;
}
/* note list hover state */
.note-list-item:hover {
border-radius: 6px 15px;
filter: hue-rotate(180deg);
}
.note-list-item:not(.selected):hover {
background: #15283c;
}
/* STYLING: EDITOR HEADER ************************ */
/* editor header */
.sc-fzoXzr.kYItFT {
background: #151b1a;
}
/* note title input bar */
input.title-input {
padding: 0 140px 0 20px !important;
background: #151b1a !important;
}
/* time label */
span.updated-time-label::after {
content: "";
display: inline-block;
width: 16px;
}
/* header toolbar */
.updated-time-label ~ .editor-toolbar {
background: #151b1a !important;
box-shadow: none;
}
/* STYLING: MAIN EDITOR TOOLBAR ****************** */
/* main toolbar */
.editor-toolbar {
margin: 0 0 0 -12px;
background: #191919 !important;
border-radius: 1em;
box-shadow: 0 0 2px #33524a;
}
9 Likes
At first I was like I hate the colour, font but I was intrigued so I gave it a try.... now I am contemplating if I should keep it cause it looks really really beautiful I am getting FF7 vibes.
Really great work the level of detail is amazing.
May I ask how do I get the stick notes?
3 Likes
Wow, thx for your comment!
I understand that it is still need more improvement, if you have any suggestion just let me know, I'll keep follow up.
About the sticky notes, you just need to use it like below:
And about the Art Gallery:
thank you sorry I did not realize I had to use the tag that's neat. I thought those were some kind of admonitions so I was trying !!! note.
I just spend a couple of minutes looking through my notes and here are just two things I have noticed so far I prefer having a different colour for the headings in table but that's personal preference and quickly fixed it.
The other I like to use emojis to tag some notes and then use note overview to quickly view status of documents but the icons are getting smudged sort of haven't figured out how to fix this yet Included screenshot 
would rather it appeared in the normal colour like this 
1 Like
Um... I think that !!! note command can only works when this a plugin, CSS seems cannot doing like this. I'm already try my best to make it as easy as I can. In my first sketch it is needed to use like this:
<p class="note">
tag info
</p>
This is horrible, right!? hah
And yes, I agree with you about the table title color, I will update it in the next version.
Can you show me the exact position of the approved icon? I'm not so sure.
It''s an H1 heading. In the mark up editor it looks like this in the viewer the icons are colored
