Use customized css

Lounge
1

Sorry to reactive this thread for a so simple request, but for a non dev like me, none of the explanations are explicit : don’t know where to put the symlinks on mac, and don’t find any profile directory to. Can you explain a bit slowly where exactly to put the CSS files on a mac ?
Thanks!

2

Your profile directory on macOS is in ~/.config/joplin-desktop.

Change into that directory and then do a git clone https://github.com/tessus/joplin-custom-css.git.
This will create a subdirectory called joplin-custom-css which includes all files from the repo.
Then use the following 2 commands (still in the profile dir):

ln -s joplin-custom-css/Dark/userchrome.css
ln -s joplin-custom-css/Dark/userstyle.css

You could also just copy the files from the repo to the profile dir.

Hope this helps.

1 Like
3

First, thanks for your answer and the time spent on this.
But… I try several configs, as

  • put the entire repo into the profile directory (means put the folder joplin-custom-css with its content into ~/.config/joplin-desktop
  • put the joplin-custom-cssfolder at the same level of the joplin-desktop folder
  • put the Dark folder at the root of the profile directory…

Nothing works; I don't have the same editor color as you, as you can see (I use your sample.md file to compare):

Capture d’écran 2020-02-25 à 01.36.42
Capture d’écran 2020-02-25 à 01.36.421177×1014 173 KB

But it changes something: those two lines appear in the Preferences>Appearance window (Custom styleseet for rendered mardown and for Joplin app):

Capture d’écran 2020-02-25 à 01.40.48
Capture d’écran 2020-02-25 à 01.40.48877×680 59.1 KB

And it guides me to a solution: cliquing the two edition button, they show empty files; I just copy your code on each file, and tadaa: it works.

So, in my configuration, the css files have to be put at the root of the profile directory . Those are the files that are modified by the Edition buttons on the Preferences>Appearance Pane (everywhere else, the customization does not work). Is it only me or is it what you try to explain when you say

You could also just copy the files from the repo to the profile dir.

and I failed to understand ?

In fine, it raises two last questions in me :

  1. Is it possible to switch between to customization (or only possible to replace the css files) ?
  2. Is it possible to make the change of the custom css reflected in the theme installed in Preferences>Appearance pane, as it could appear as Dark modified or something like this ?

For any answer you could give, thank you in advance.

And just a last detail: the mermaid syntax don't work, I can't figure why:

Capture d’écran 2020-02-25 à 02.42.33
Capture d’écran 2020-02-25 à 02.42.33985×259 25.3 KB

4

I think you forgot to delete your css files and link them as I described at the bottom of my description.
The 2 css files have to be in the profile directory. How you get them there doesn’t matter.
I use symbolic links, othre people rather copy the files.

5

Yes; some misunderstandings come from the fact I thought the changes are integrated by Joplin after a refresh of the preferences rather than an relaunch ot the app.
I’m really interested in the following: is it thinkable to have a way to custom easily the CSS, and, better, be able to store those CSS into Joplin to switch between them ?

An sorry for my long post, but have you an idea of the reason why mermaid syntax don’t work (I use your sample file to be sure of the result)?

6

@pat3

1 Like
7

Ok, I just have to wait… thanks!

8

I’ve also updated my README in the repo. Maybe this will help as well:

How to install

There are different ways you can install and use the theme, but the most comfortable way is as follows:

  • Clone the repository into your Joplin profile directory. If you don’t know where it is, go to Preferences and it will show you the location.
  • Create symlinks to the .css files. (Remove or rename your current css files, if they already exist.)
  • Create a new branch for your own changes. This will make it easier when new updates are available.
cd ~/.config/joplin-desktop
git clone https://github.com/tessus/joplin-custom-css.git
ln -s joplin-custom-css/Dark/userchrome.css
ln -s joplin-custom-css/Dark/userstyle.css
cd joplin-custom-css
git checkout -b my-css
# make changes to the css files and commit them
# when a new update is available, merge or rebase
git fetch origin master:master && git rebase master
1 Like