Homepage    |    GitHub    |    API    |    FAQ

Share your CSS

So right now I'm working on trying to make the markdown editor view and the rendered page view look as distinct as possible. Hence my previous question.

Now I've figured out how to hide the disabled icons. I find that having the icons grayed out when viewing the rendered page is just too confusing. (I would compare it to seeing MS Word editing tool bars when you were viewing a PDF). This is the css I used in my userchrome.css:

div.editor-toolbar a.button.disabled {
    display: none;}

I think it works exactly as I want. But here's my question. Am I hiding things that really shouldn't be hidden? Basically am I going to mess myself up by hiding these?

It looks specific enough to be very limited in its scope; seems like it safely achieves your stated goal, from here.

May not work in the new editor, but since that toolbar div appears only twice in the side-by-side view, it doesn't seem like it'll leak out anywhere.

As long as you prefer not to see disabled controls, it looks to me like you should be in the clear.

Of course, the layout may change in the future, so buyer beware; using the developer tools to deactivvate or delete questionable rules in real time can be helpful in determining whether modifications make sense.

1 Like

Can someone tell me what the class is for the sync section in the sidebar? It doesn't seem to have one:
image

And the elements within it only have these random(?) classes.

My goal is to remove the sync area completely from the sidebar. It takes up a lot of space (on my small screen) and if I need to sync I can do it from the File menu.

Have a try with this.

As the div that contains the sync button has no class to use, this asks to not display the second div under the div with the class side-bar.

div.side-bar div:nth-of-type(2) {
    display: none;
}

I checked it on my copy of Joplin and it seemed to do the trick. You may need to do a couple of restarts and/or a window resize before Joplin finally realises how badly you are abusing it. Not looked to see if it causes havoc elsewhere though!

I used this info and trial and error to try to create the above.

Ah, the CSS Dark Arts! :mage:‍♂ Thanks! I hadden't even considered these. Seems like a less than optimal way to do it, but maybe the only way for now. It does seem dangerous since changes to the core could make it hide the wrong thing in the future. Any way, thanks so much for taking the time to figure this out!

I wonder if there are plans to add class names to things in the future.

The same applies to any class used in Joplin. That's why the warning in Joplin states. "... styles you define may break from one version to the next. If you want to use them, please know that it might require regular development work from you to keep them working..."

I believe that @tessus has already been asking, either somewhere on this forum or on GitHub, that this is considered for a future release . He has also created a wiki list of css elements which should have a class and a wiki list of useful customisations.

2 Likes

Right. But instead of a display:hide not working because a class name changed, it could hide something else entirely. But I will be careful. Thanks so much! And thanks for the link. I appreciate all your contributions to the forum.

Added TOC style for dark mode.
Update file can be found here: GitHub - p0rc0jet/joplin_styles: CSS tweaks for joplin app
Looks like this:

Please, do remember to comment out style you don't want to use.

2 Likes

Any easy to read monospace fonts people would recommend? The default markdown font may be fine for coding, but for reading notes, I find I'm as slow as molasses compared to proportional fonts, so any suggestions for quicker reading monospace fonts is appreciated!

Its nothing too special or very "out there" but personally I do like Consolas and it is always just... there on Windows

1 Like

I've ended up using Google's free Roboto Mono font as, for me, it is easier to read.

2 Likes

That does look easier to read quickly than the Joplin markdown editor default. Totally new to font changes, but I guess I download and install the tff to Windows.

What do I need to add to userchrome.css (currently empty) to switch the markdown editor (CodeMirror since I'm using Joplin v1.7x) to this new font?

Also, is it possible to change the font colors used at various levels of indention in the markdown editor (e.g., I find the green difficult to read)?

You don't.

Install the font then go to the settings and Appearance. Add the name of the font in the field and apply.

Editor_font

userchrome.css can be used to change the colours of elements within the editor. You can use the Development Tools to determine what css element name you need to specify to get the changes you want. Have a look through this "Share Your CSS" post (ie THIS actual post) to get some ideas.

To get you started here are a few I have played with:

/* ==CodeMirror editor modifications== */
 span[role="presentation"] {
    /* editor text */
     color: black;
}
 .cm-variable-2, .cm-meta {
    /* lists (.cm-meta controls the square brackets [ ] ) */
     color: darkred !important;
}
 .cm-comment {
    /* code text */
     color: #009900 !important;
}
 .cm-quote {
    /* quoted text */
     color: darkviolet !important;
}
 .cm-image-marker {
    /* the "!" before displayed image links */
     color: red;
     font-weight: 900;
}
 .cm-link-text {
    /* links - .cm-link-text is everything in the square brackets */
     font-weight: bold;
     color: blue !important;
     text-decoration: none !important;
}
 .cm-string.cm-url, .cm-link {
    /* links - .cm-string.cm-url is the url itself in the round brackets - .cm-link is a url created just using angled brackets - <http://example.com> */
     color: blue !important;
     text-decoration: none !important;
}
 .cm-tag, .cm-attribute {
    /* HTML tags - .cm-tag is the HTML tag itself such as "<img>" | .cm-attribute is any tag attributes such as "width" or "src" */
     color: blueviolet !important;
     font-weight: 500;
    /* the above are NOT applied if the html text is marked as "code" unless it is in a fenced html code block (```HTML) */
}
 .cm-hr {
    /* horizontal rule - "***" */
     color: darkorange !important;
     font-weight: 900;
}
2 Likes

I've been playing around with some of the CSS myself trying to find what the various things relate to in the codemirror markdown editor. There was one that I noticed (I think in a post you made to emulate the new codemirror editor to look like ace) that I just can't find what it relates to which is .cm-property. I've been looking around trying to find what it references and just can't find it. Any idea what it does?

If anyone is interested the table I made for my own reference is below (absolutely not exhaustive):

Format CSS Element
Header{n} .cm-header-n
Italics/Emphasis .cm-em
Bold .cm-strong
BoldItalics .cm-strong.cm-em
Lists (Bullet/Number/Todo) .cm-variable-2, .cm-variable-3, .cm-keyword
Lists brackets .cm-meta
Links (text) .cm-link-text
Links (link) .cm-link, span-string.cm-url
Code .cm-comment
Horizontal line .cm-hr
Quote .cm-quote
Quote {n} .cm-quote.cm-quote-n
Strikethrough .cm-strikethrough
Unknown .cm.property
6 Likes

I did that ACE Editor css so quickly I did not comment it and I regret that now!

All I did was display the default "Welcome" note and then go through it, changing any elements I found to mimic the ACE Editor. I guess that .cm-property must be in there somewhere!

Well you will be pleased to know that the table above is based almost entirely on 1) the ACE editor CSS you posted and 2) the hint you gave to use the element picker tool.
All of which I used to create this abomination in an attempt to highlight the different elements:

/* Header 1-4 = red -> orange */
span.cm-header.cm-header-1 {
    color: #FF0000 !important;
    }
span.cm-header.cm-header-2 {
    color: #FF4700 !important
    }
span.cm-header.cm-header-3 {
    color: #FF7000 !important;
    }
span.cm-header.cm-header-4 {
    color: #FF9200 !important;
    }

/*Italics/emphasis = Green*/
span.cm-em {
    color: #1DAA14 !important;
    }

/*Bold = Violet*/
span.cm-strong {
    color: #a386ff !important;
    }

/*BoldItalics = Turquoise*/
span.cm-strong.cm-em{
    color: #40e0d0 !important;
    }

/*BP/NL/L 1 = Cyan (cm-meta controls brackets for L)*/
span.cm-variable-2, span.cm-meta {
    color: #008E89 !important;
    }
/*BP/NL/L 2 = Cyan*/
span.cm-variable-2 {
    color: #00BFB8 !important;
    }
/*BP/NL/L 3 = Cyan*/
span.cm-keyword {
    color: #00FDFF !important;
    }

/*URL = dark blue*/
span.cm-link, span.cm-string.cm-url {
    color: #000AFF !important;
    }

/*Link text = olive*/
span.cm-link-text {
    color: #7B965B !important
    }

/*code = yellow*/
span.cm-comment {
    color: #FFFE00 !important;
    }

/*horizontal line = brown*/
span.cm-hr {
    color: #604A24 !important;
    }

/*Quote 1-3 = light green shades*/
span.cm-quote.cm-quote-1 {
    color: #35bc00
    }
span.cm-quote.cm-quote-2 {
    color: #71d300
    }
span.cm-quote.cm-quote-3 {
    color: #7de900
    }

/*Stikethrough = grey*/
span.cm-strikethrough {
    color: #A1A1A1
    }
2 Likes

Thanks @dpoulton, switching the editor font and ditching the blue and green defaults in the CodeMirror editor greatly improves readability of my notes in markdown.

Now that I've been introduced to css, there are a number of things I'd like to change! Starting with the ridiculously large header sizes. :face_vomiting:

Edit: Changed! So much better to have same size headers.

1 Like

It's a ticked check-box!

cm-property

1 Like

Don't know if its been shared already (its a long thread)
but here's quick css.
It unifies color of headings of default theme in editor and in preview
blue headings

/* For styling the rendered Markdown */
h1,h2,h3,h4,h5,h6 {color:blue}
1 Like
3 Likes