Hi!
How would I change the color of the mark plugin? It is currenctly yellow when I ==TEXT== but I would like it red, because I want to use it for highlighting text that I have questions about or don't understand. (Also because yellow can get confusing if I search)
Thanks in advance!
Custom CSS documentation
@tessus thanks, I checked my Joplin-desktop folder but can’t find my userstyle.css file, am I doing something wrong?
Nope, it's not there. You have to create it, or use the config screen as described in the Custom CSS documentation.
Also, you can go to Config > Appearance:
Click on the first one: Custom stylesheet for rendered Markdown
var(css-variable) is used for css variables. Have you defined red?
You have to use:
mark {
background-color: red;
padding: 1px 2px;
}
Btw, please do not make screenshots of text. Use a copy and paste and put it in a code block.
Got it now, though it is still yellow in the markdown editor. I am not much of a coder so I had no idea that the variable needed to be defined beforehand.
I pasted the whole code into my userstyle.css btw, it looks pretty cool with the headers and the TOC which comes out from the side of the window!
Don't forget, there are 2 css files: userchrome and userstyle.
My css files are for Dark themes (I based it on the standard Dark theme). My styling probably won't work for a light theme without additional modifications (I never got around doing that).
Changing the colors in the editor is a bit harder. It can be done if there are classes for text spans, but I don't think there is one for ==text here==.
Update: I'm really bad with CSS but there are many people in this forum who know CSS much better. Maybe they can comment on if there's a way to change the color for ==text== in the editor.
Thanks! What does the userchrome do? I am using the Dracula theme and it looks good.
I am sure I can manage with it only being red in the rich editor!
userchrome changes elements of the app and the editor. userstyle changes the way how code is rendered in the viewer.
But you can see in my userchrome.css file what the code does. It has detailed comments.
Just to add to tessus' comment, the below is taken from an old post for a slightly older version of Joplin. The areas for each css file are still the same though...
The look of Joplin and the editor can be modified using userchrome.css (Red area in the below picture). The look of the viewer pane is modified using userstyle.css (Green area in the below picture).
These two areas use different css element / class names so CSS code written for userstyle.css will not work in userchrome.css and vice versa.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
