Share your CSS

Thanks for this, huge time saver!

For anyone on Linux F5 in the dev tools does the same thing, I’d assume on Windows as well.

You can refresh really fast if you press Alt+H to open help, T to open devtools, then F5.

4 Likes

Hi, made a repo to share the first version of my dark theme if anyone is interested: https://github.com/amandamcg/joplin-theme

Thanks to everyone who shared their tips!

13 Likes

I've now added a warning in the app and moved the setting under Advanced Options to make this clear.

They are discouraged because indeed many users don't like when their style break from one version to the next, and that's understandable. However I won't make a commitment to keep the HTML structure stable as that would be the end of many improvements that could otherwise be made.

So that's why we allow usercss, as it's easy for us to allow it and many users want it, however it's your custom file so it's your job to update it as the app evolves.

6 Likes

Good. This creates a clear situation in which everyone can make their own decisions. Thanks.

I really like this one which is eye-friendly, even for a night mode; the example doesn’t show if it’s syntax hightlighting compatible ?

As I often use internal Joplin links “inline” I find that the Joplin internal link “J” icon before the link can be rather distracting.

This CSS is for userstyle.css and removes the “J” icon for internal links but does not remove the resource type icons for txt, pdf, zip, etc. attachments.

However as there is no longer something to differentiate between internal and external links it also changes the colour of internal links and, if applicable, their resource icons. In this example blue is external and green is internal.

custom_css

a {
color: #0000CD; /* set general link colour - includes TOC links*/
}

a[data-resource-id] {
color: #006600; /* change the colour of INTERNAL links */
}

.resource-icon.fa-joplin {
display: none; /* do not display the Joplin resource icon */
}

.resource-icon {
background-color: #006600; /* change other resource link icons to the same as the internal link colour */
}
11 Likes

Hi, thanks for the tip, I didn’t realize syntax highlighting was available in markdown!
I hadn’t checked before, but yes, the theme supports it with the built in colors from the stock Joplin dark mode theme.

Thanks!

Thanks for this tip, it was really helpful. I wasn't familiar with the a[data-resource-id] selector before.

How are you adding the resource icons for different filetypes?

As for the Joplin J, I ended up just making it much smaller, will see how that goes. :slight_smile:
little J

If anyone wants that code, change this in userstyle.css. Might need to tweak it based on your font sizes:

.resource-icon {
    width: 10px;
    height: 12px;
    top: 0.1em;
}
1 Like

This was found not from any great CSS knowledge but just by looking at what others had submitted on this forum and applying it to elements identified using the Development Tools.

I saw that internal links looked like this

<a data-from-md="" data-resource-id="070417fe118d4f509a8d4076f90b4ab6" title="testfile.pdf" href="#" onclick="ipcProxySendToHost(&quot;joplin://070417fe118d4f509a8d4076f90b4ab6&quot;); return false;" type="application/pdf"><span class="resource-icon fa-file-pdf"></span>testfile.pdf</a>

and data-resource-id="070417fe118d4f509a8d4076f90b4ab6 could only apply to an internal resource link as the same id is used in the link itself.

So using something I have seen on this forum I tried to devise a selector which meant "Any a tag which also has a data-resource-id" and came up with a[data-resource-id]. No one was more surprised than me when it worked!

I haven't added any resource icons, they are built in. I just prevented one of them, the Joplin internal link icon, from being displayed.

Making the resource icons smaller seems a good idea especially if they become small enough to stop affecting the space between lines in a paragraph when used "in-line". Not tried that yet. I think you have also seen on another post that @laurent and @tessus have mentioned the possibility making the resource icons smaller by default. In the meantime I think I will play with your suggested CSS. Thanks for sharing!

3 Likes

The icons should have the height of a capitalized letter. The distance from baseline to cap height.

1 Like

Ah! Ha, I suppose if I just had never included a non-image link, good to know.

Ah, good call. My previous css sample didn’t work well at other font sizes. This looks much nicer IMO:

.resource-icon {
    width: 0.75em;
    height: 0.9em;
    top: 0.1em;
}

Not exactly cap height, but seems to work ok.
css cap height

4 Likes

Nice, much better. But the color of your links seems to be much lighter than mine? It has too little contrast for me now. I like the teal color but it is more darkgreen on my screen.

Ah yes, I have some other CSS that is affecting the colors. The code snippet above will only affect the size of the icon. You can see the other styles I have in this comment if you want to play : Share your CSS

More generally you can adjust the link color by changing the value of

a {
    color: <YOUR COLOR HERE> !important;
}

in userstyle.css

1 Like

As promised at issue #2690 – Zooming out deforms table borders in v1.0.193:

Instead of fighting a loosing battle, it seems better to avoid overlapping of borderlines. That will make the CSS more complicated, but I think it's doable. I will publish about it when I've found time to sort this out.

I have written down my insights in some underlying CSS/HTML mechanisms here. Unruly stuff, I must say. I also added a TOC, as I hope to publish more about CSS et al.

One more question Amanda,

You removed the Layout button from the menu (Ctrl-L), but I was used to it… How can I get that back from your userchrome in the similar style as the others?

Thank you,
Lourens

I started collecting all the posted themes with screenshots into an awesome-joplin list. It seemed like a good way of collating Joplin-related community configs and tools. Apologies if I missed anyone!

8 Likes

@Rolograaf it’s still there, but I did reorder it.
layout

The code that is affecting those is

/* toggle sidebar */
.header *:nth-child(1) {
    order: 1
}

/* toggle notebooks */
.header *:nth-child(2) {
    order: 2
}

/* new note */
.header *:nth-child(3) {
    order: 5
}

/* new todo */
.header *:nth-child(4) {
    order: 6
}

/* new notebook */
.header *:nth-child(5) {
    order: 4;
    margin-left: var(--base-size-24);
}

/* layout */
.header *:nth-child(6) {
    order: 3
}

/* search */
.header *:nth-child(7) {
    order: 7;
    margin-left: auto;
}

You can remove that to get them back in the traditional order.

2 Likes

Sorry Amanda,

After asking I noticed the shift of the icon, how old habits die hard. (and users are stupid…)
That is perfect thanks for the code-detail.

Also, I have changed the icon color to primary and find it looks much better (personal opinion)

thanks again