Is it possible to make a CSS that follows note's attributes?

[ghjardim]

For example, if any note has #fontstyle=serif or #fontstyle=monospaced, the CSS would change the font for that particular page. Or, with #fontsize=small, it'd display a smaller font size.

[blumpcus]

I don't know if this is possible, however, I know that I can apply custom CSS changes to specific notes with attributes using the method below:

For example, I can change the color of the note within the tree.

1. Create a CSS code note.
2. Give it the attribute '#appCss'
3. Insert the relevant CSS changes you want.
   For example, if I want to change the title color within the note tree, I would write:
   span.fancytree-node.INSERT-ATTRIBUTE-NAME-HERE .fancytree-title { color: #ff3548!important; font-weight: bold; }
4. To apply that CSS change to a specific note, add the attribute '#cssClass=INSERT-ATTRIBUTE-NAME-HERE' to that note.

Of course, change 'INSERT-ATTRIBUTE-NAME-HERE' in steps 3 & 4 with your own attribute name.

The result, in this specific example, looks like this:

I know this isn't an exact answer to your question but hopefully you may be able to get closer using some of this information.

[ghjardim]

Thank you! It worked for me with this CSS rule:

.theme-notion .note-detail.monospaced-font {
    font-family: monospace !important;
}

and the attribute #cssClass=monospaced-font

[blumpcus]

@ghjardim
Glad it worked!

Funny enough, I can't seem to get it working on my side, applying the same method as I mentioned, using your CSS snippet (while changing the "theme-" to use the name of my chosen theme. Nothing seems to happen.

Is there anything you've done that I could be missing?

[ghjardim]

I guess that what you need to do is to go to your CSS note and add to it the attribute #appTheme=<yourtheme>. And then, use .theme-<yourtheme> when defining your CSS snippets.
Also remember to select your theme in Trilium's Options, of course.

[blumpcus]

It's really strange.

I can use a CSS rule that applies across the whole theme but applying it to a single note (by affixing the attribute after the class, e.g. .note-detail.attribute, while adding the #cssClass to the specific note with said attribute) doesn't seem to work.

I'm not sure why it works for the tree and not for any other CSS elements (tested .note-detail, input.note-title, etc).

[ghjardim]

Sorry, I misunderstood your question (because English is not my main language).

It seems that this #cssClass is not applied for lots of html elements. Launch the web inspector (Ctrl+Shift+I) and search for your class. You'll see that the class gets added only for:

• The note title on fancytree;
• and the note-detail div.

It seems that both my application and yours cover up all the possible applications of the class.