Share your CSS

This is a great addition, but unfortunately there are a few minor issues:

  • It needs a slight modification for dark themes:
	box-shadow: 3px 3px 7px 0 rgba(255,255,255,0.7) ;
	color: #000000;
  • due to how html is parsed in markdown, there can't be empty lines in the paragraph:

I hope that at some point in the future we can add another plugin like markdown-it-container or markdown-it-attrs. From these 2 choices, I'd favor markdown-it-container though.
Such a plugin would allow markdown syntax within that block.

The problem is that plugins are not markdown standard, which might result in compatibility issues, but I think that certain plugins like markdown-it-container become more and more a standard (what I mean is that they are included in other markdown rendering apps).

5 Likes

The empty lines issue can be solved by wrapping the box in a division:

<div><b-blue>
Line 1

Line 3
</b-blue></div>

Other text here

<b-red>
Line 1
Line 2
Line 3
</b-red>

Other text here

Once also classes for these boxes are defined:

<style>
  .b-blue, ..., b-gray, b-green, b-red, b-blue, b-orange, b-pink, b-purple {
    ...
  }

  .b-blue, b-blue {
    border-color: #229ade;
    background-color: #bbe5fb; 
  }

  ...
</style>

it can be done as well by:

<div class="b-blue">
Line 1

Line 3
</div>

Other text here

<b-red>
Line 1
Line 2
Line 3
</b-red>

Other text here
2 Likes

I agree, the markdown-it-container would be better than those custom tags and even thou is not a standard it would be less ā€œaggressiveā€ to the markdown syntax.

In the original idea I wanted to use an icon at the beginning, as in the usual message boxes but I donā€™t know how. Do you know?

It is possible to add leading or trailing text to an element by CSS as described here. So if you can find a Unicode character that can serve as an appropriate icon, you can have it. See also these examples. Another option is to use an ā€˜icon fontā€™ like Webdings and Wingdings.

If you want to insert a pure graphical object, this could be a way to do it:

.fa-joplin {
  /* Awesome Font file */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1536 1792' xmlns='http://www.w3.org/2000/svg'><path d='M373.834 128C168.227 128 0 296.223 0 501.834v788.336C0 1495.778 168.227 1664 373.834 1664h788.336c205.608 0 373.83-168.222 373.83-373.83V501.834C1536 296.224 1367.778 128 1162.17 128zm397.222 205.431h417.424a7.132 7.132 0 0 1 7.132 7.133v132.552c0 4.461-3.619 8.073-8.077 8.073h-57.23c-24.168 0-43.768 19.338-44.284 43.374v2.377h-.017v136.191h-.053l-.466 509.375c-5.02 77.667-39.222 149.056-96.324 201.046-60.28 54.834-141.948 85.017-229.962 85.017-12.45 0-25.208-.61-37.907-1.785-92.157-8.682-181.494-48.601-251.662-112.438-71.99-65.517-117.147-150.03-127.164-238-11.226-98.763 23.42-192.783 95.045-257.937 81.99-74.637 198.185-101.768 316.613-75.704 5.574 1.227 9.55 6.282 9.55 11.997v199.52c-.199 2.625-1.481 6.599-8.183 2.896-.663-.365-1.194-.511-1.653-.531-21.987-10.587-45.159-17.57-68.559-19.916-.38-.04-.757-.124-1.138-.163-.537-.048-1.034-.033-1.556-.075-4.13-.354-8.183-.517-12.203-.58-.87-.011-1.771-.127-2.641-.127-.486 0-.951.05-1.437.057-1.464.011-2.886.115-4.33.163-2.76.102-5.497.211-8.182.448-.273.024-.547.07-.835.097-25.509 2.4-47.864 11.104-65.012 25.47-.954.802-1.974 1.53-2.9 2.36a1.34 1.34 0 0 1-.168.146c-23.96 21.8-34.881 53.872-30.726 90.316 4.62 40.737 26.94 81.156 62.841 113.823 35.908 32.67 80.335 52.977 125.113 57.186 35.118 3.36 66.547-3.919 89.899-20.461a97.255 97.255 0 0 0 9.365-7.501c2.925-2.661 5.569-5.5 8.086-8.416.3-.348.672-.673.975-1.024 8.253-9.864 14.222-21.067 17.996-33.148.639-2.034 1.051-4.148 1.564-6.227.381-1.563.81-3.106 1.112-4.693.555-2.784.923-5.632 1.253-8.49.086-.709.183-1.414.237-2.128.492-4.893.693-9.858.55-14.91h.013V521.623c-2.01-22.626-20.78-40.434-43.928-40.434h-57.23a8.071 8.071 0 0 1-8.077-8.073V340.564a7.132 7.132 0 0 1 7.136-7.133z'/></svg>");
}

I found this class styling in noteStyle.js, and in HTML it is applied like this in an internal link to another note ā€œOne-click sortingā€:

<a ...>
  <span class="resource-icon fa-joplin"></span>
  "One-click sorting"
</a>

which shows a tiny Joplin icon before the note title. Regrettably I have no experience with this kind of graphical alchemy.

I will try later, thanks.

Custom css is not supported on mobile yet.

Hey all, I am new to CSS but it seems pretty easy so far. Iā€™ve been able to get a style Iā€™m happy with by making some minor tweaks to @tessus config - thanks for posting!

The main thing Iā€™d like to change is the userchrome.css color for KaTex in-line and block text. I would like for this color to take precedent over other colors. For example Iā€™d like to eliminate the following rendering ā€˜issuesā€™ in my current config:

  • KaTex text inside a bullet point is rendered as the color of bullet points in the editor
  • KaTex text between two _ chars such as $A_x + A_y$ is rendered as the color of italics in the editor

Note, everything renders find in the note viewer. But it would be much easier to find/edit my maths lines if they popped out. Thanks in advance!

I think that's the way it i supposed to work. The entire text after the bullet is of the class ace_list, thus I am not sure what can be done here.

This is a problem with the editor highlighting and unfortunately has to be fixed upstream. This does not only happen in Katex, but all emphasized text.

image

RE bullet points: bold or italics text inside a bullet point IS rendered as the bold/italics color, so Iā€™m unsure why this canā€™t be done for Tex?

Also, do you know the class name to call in userchrome.css to change the Tex params?

Thank you.

I suspect it has to do with the fact that Katex is not Markdown code. (The $ and $$ markers or not in the Markdown specification.) But I can't answer that for sure, since I'm not a Ace Editor developer. Maybe this question is better directed to their repo and/or forum.

According to the developer tools, it's <span class="ace_text ace_xml">$katex_here$</span>. However, this might very well be also used for other code. Yet again, this is a question for the Ace Editor devs.

1 Like

Iā€™ve added my theme to Github https://github.com/mattsbennett/joplin-Nord2 - itā€™s a sub-theme for the built-in Nord theme. Thanks everyone for the tips in this thread!

12 Likes

Nothing revolutionary here but I'm (finally) very happy with the colors! I use a bullet points and KaTex a lot so finding a nice color progression for regular text -> bullet points -> bold/italic was important.

Now I just wish there was a way to set KaTex to its own color :unamused:

Hi Amanda,

I am now on Amanda-darktheme 0.5.8 and Joplin 1.0.207 the icons have shifted to the right and the searchbox to the left. Is that intentional? For me it is somewhat unnatural. Could you advise how to get searchbox to right handside again? (or did I f#&k-up something in your theme?)

thanks
Lourens

Ah, I am still on 1.0.201. I will install the 1.0.207 soon and create an update, didnā€™t realize it was out.

Because the themeā€™s layout is done with ā€œnth-childā€ selectors, the icons would rearrange if the HTML changed. If you want to mess with it in the mean time, you will need to adjust this section:


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

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

Hi Amanda, thanks!

I understand it is an inbetween release, since it is not very stable for me. Maybe I should wait with this question on a firm release, Could be that next release solves the searchbox shiftā€¦

1 Like

@Rolograaf Just updated the theme (0.6.0), should be good now. Let me know if you are still seeing issues.

Thanks for swift adaptions. I had special tweak making the icons color --primary unfortunately that does not seem to work anymore. I liked some more color in the tool-buttons, now it is a little too monochromatic. (only the links are primary in note-text)

Hmm, looks like when the icon font was changed, it also changed the classes. I just pushed up a new version of the theme that addresses that. My CSS is getting messy, will need to do some refactoring soon.

Change line 169 to get color back:

.fa, .far, .fas {
    color: var(--primary) !important;
...
}
1 Like

beautiful !

1 Like