How can i change the color of the Background Highlight

Support
1

I wanna know how to be able to change the background color of the text?
I couldn't find any option for it in the rich text editor
or a way to do it with the markdown menu.

did i missed anything?
is there a plugin for that?

3

Previous hint was wrong (deleted), see these hints

4

If you want to change the mark / highlight colours use the below in userstyle.css (Which can be found by going to Joplin's settings and selecting Appearance ā†’ Show Advanced Settings ā†’ Custom stylesheet for rendered Markdown)

 mark {
    /* sets the background and font colour of user highlighted text (==mark==) */
     background-color: red;
     color: white;
}
5

wait, you can apply CSS to the text?!
HOW i know a bit of CSS and that is actually pretty intresting.

6

As well as the CSS wiki that @NoSi linked there is also the Share your CSS topic which has tons of other little tweaks and examples of things you can do.
You can access the development tools (Help > Toggle Development Tools) to find specific elements and classes.

There are two files in your joplin profile. userstyle.css is for the rendered markdown and userchrome.css is for the overall Joplin application including the markdown editor. Both can also be accessed in the way that @dpoulton already mentioned.

7

Customising using CSS is for the desktop apps only and userstyle.css should not work with the Rich Text editor. The CSS for the element "mark" does but I am guessing that may be because it is a plain, standard HTML tag.

8

Customising using CSS is for the desktop apps only and userstyle.css should not work with the Rich Text editor. The CSS for the element "mark" does but I am guessing that may be because it is a plain, standard HTML tag.

Customising using CSS is for the desktop apps only and userstyle.css should not work with the Rich Text editor. The CSS for the element "mark" does but I am guessing that may be because it is a plain, standard HTML tag.

wait... you two had just lost me.

what is "userstyle.css."
what is the "userchrome.css"
what is the limit of each of them.

i know how the ways to get CSS to work with a webpage written in HTML.
but i never tried it with a note taking app...
so how exactly does it work?!

9

Joplin uses electron and react. Essentially Electron is a separate instance of google chrome running as an app. This means you can develop an installable application but develop the interface etc. in the same way that you can a website where it is all controlled by CSS and HTML.

If you go to help > development tools it will launch the exact same element inspector you get on google chrome where you can view the rendered html of the app.

So for example you can use the CSS selector .list-item to refer to the individual notebook lines on the left side of Joplin. To do that you have to insert some lines into the userchrome.css file to essentially override the default built in CSS for how that item is displayed.

10

Found it! Another question tough. If i am changing the style from the developer tool, will it save the changes?

Also. how do i make those modifications on the mobile app?

11

No, the dev tool just modifies that instance, it doesn't persist.
@dpoulton has made a wiki post that explains things better than my post

And no, the mobile app doesn't have css support.

12

can you send me a link to that wiki page?

13

Sorry i thought i linked it

14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.