How to style a particular Text Note with CSS

[ferrlen]

How to add CSS to customize a particular Text Note?

[ferrlen]

To customize the CSS of only a few notes, you can create a Note type: CSS and add to it a #appCss label with the name of your custom CSS (for example: #appCss=myCustomCss). Then, add the label cssClass to the notes you want to customize (e.g.: #cssClass=myCustomCss).

Additional remarks:

• I think one must add !important for the CSS rule to have enough specificity.
• You need to reload the frontend for changes to be applied. You click on Menu > Reload frontend or press Ctrl + R for that.
• To apply the CSS style to all children notes, add (inheritable) to parent's #cssClass, like so: #cssClass(inheritable)=myCustomCss .

Example:

• Create a Note type: CSS and add this owned attribute to it: #appCss=testing
• Create a regular Text Note and add owned attribute label: #cssClass=testing
• Add 2 CSS rules for testing:

/*** 
class `.note-detail` here will make the first rule only apply to the writing part of the Text Note, 
otherwise <p> elements elsewhere in the note, like the Owned Attributes section, will also inherit this rule. 

I'm leaving this out in the second rule so you can see that the Owned Attributes section will now have a yellow background-color
***/

.testing .note-detail p {
  color: red !important;
}

.testing p {
  background-color: yellow !important;
}

Explanation:

A CSS Note with #appCss is applied globally.

Labeling a Text Note with #cssClass=testing will add testing to the CSS classlist of this note. Thus, the .testing CSS selector will match it.

Because the first CSS rule (color: red) had also the .note-detail selector, it behaves as expected. However, the second rule (background-color: yellow) does not make this restriction and, as such, is applied everywhere in the note, including in unexpected places like the Owned Attributes section in the top bar.

---

Remaining questions:

How does #cssClass work exactly? Where is it added?

[mondayrobot]

Hi, sorry to revive a 1-month old post. I followed the steps here and also looked at the wiki, but it only works partially (I'm a CSS beginner/amateur though). If I use the your very helpful example, the "target" note gets styled with a custom css only if it's selected, but I would like to style it even when it is not focused.

For comparison, a screenshot where the cursor is in the target note, everything is fine:

And a screenshot with the cursor in the other note, the target note does not use the custom css:

Any guidance/suggestion on how can I make this "permanent"/always styled? Thanks!

[ferrlen]

Hi, sorry to revive a 1-month old post. I followed the steps here and also looked at the wiki, but it only works partially (I'm a CSS beginner/amateur though). If I use the your very helpful example, the "target" note gets styled with a custom css only if it's selected, but I would like to style it even when it is not focused.
...

Hi! No worries, I think the issue is that you're using the ".note-detail-editable-text-editor", if I'm not mistaken this should only select the editable text (that is, the window where your cursor is). To fix this, you have to either use only .note-detail to apply it globally, or pair it with the #cssClass trick I mentioned in my solution above to apply it only to some specific notes

[mondayrobot]

Thank you for the quick reply! I have used it with .note-detail, and it is the same thing. Also, applying with #cssClass does not seem to work selectively: if I remove the selector from the css, it will make everything yellow with red text. Do you have an idea on what am I doing wrong?

The cursor is now in the "Testing note", but the backgound is yellow also in the "Testingcss" note:

The cursor is now in the CSS note, and the target note loses the yellow background

When I remove the .testing selector from the css note, everything becomes yellow, not only the target note:

[ferrlen]

But after changing the CSS Note code, did you press Ctrl+R? You need to reload the frontend whenever you make changes to the CSS code for the changes to be applied (restarting Trilium also works).

EDIT: I could reproduce this and I think it's a bug. Here are the steps for me to reproduce it:

1. create 2 notes, one that has a class (e.g., cssClass=testing) and another that does not have this class.
2. make a CSS code to be applied to .testing, e.g.: .testing .note-detail {color: red !important}
3. right click one of the notes and select "Open in a new split"
4. whenever the classless note has focus (i.e., the cursor is inside this note) the CSS rules you created in step 2 won't be applied anymore. Only CSS rules referent to the note that has focus will be applied, and then they will be applied to the entire window. That means, both notes will have the same CSS

TL;DR the CSS rule is being applied to the whole window (id == "root-widget") instead of just to a note, because root-widget is getting the testing CSS class. I'm pretty confident this is a bug, the class should be applied only to the note window (I think div.note-split.component?)

[mondayrobot]

Thank you, it's exactly right and I saw you already created an issue for this. I really appreciate it, thank you for your help and the detailed explanations!