To the best of my knowledge and belief you cannot yet apply custom css to the WYSIWYG editor.
I'm trying to figure out how to make the background colour of the markdown editor different from the rendered note.
First I put this in userchrome.css
.codeMirrorEditor {
background-color: black!important;
}
It kind of flashed black but then went back to the regular colour.
Then I tried the class .ace_content but that didn't work either.
I'm using Dracula theme. Can someone tell me what I'm missing/what the proper class should be?
my software version
Joplin 1.4.18 (prod, win32)
Sync Version: 2
Profile Version: 34
Keychain Supported: Yes
Revision: 76c4d99b8 (master)
I was having an issue with the scrollbars being very narrow. I used this to make them thicker:
div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 15px;
}
div::-webkit-scrollbar {
width: 15px;
background-color: #F5F5F5;
}
div::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
I do not use a dark theme myself and the css works.
.codeMirrorEditor {
background-color: black !important;
}
However I believe something possibly similar came up in another post above where it was found that an inbuilt dark theme ALSO used !important and so overrode the user's css. In that case drafting a more specific selector in the user's css could, in turn, override the inbuilt style's !important. To start trouble-shooting this you could use the dev tools to check the Dracula theme's css for the background colour and see if it is using !important.
Have you tried a dracula specific override?
Probably won't work in other themes.
.CodeMirror.cm-s-dracula.CodeMirror-wrap {
background-color: black !important;
}
That did it! I had tried this, but it didn't work:
.cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
background-color: black !important;
Thanks!
1 Like
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:
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! 
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.
3 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.
3 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
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.
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;
}
3 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 |
8 Likes