Heading Styles

[Pilotwings-64]

To my eyes it's hard to differentiate H2 from H3, H3 from H4, and so on, unless they are close to each other on the screen. So for now, I'm just using H2, H4, and H6.

Is there a way I can change the they way headings are displayed (size, color, style, etc.) in Trillium, to make them easier to tell apart?

[Mangiola]

Yes, you can do this by making a custom theme.

First, make a CSS code note and give it the label #appTheme=name_your_theme_here. Then you write rules to change how headers look. In case you aren't familiar with CSS, here's an example you can change around:

/* Set font family, size, and color of H2 only */
.note-detail h2 { 
    font-family: 'Arial';
    font-size: 18px;
    color: black;
}

/* Change font for multiple headers at once */
.note-detail h3, 
.note-detail h4, 
.note-detail h5 { 
    font-family: 'Times New Roman';
}

/* Make H4 bold, italic and underlined*/
.note-detail h4 { 
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
}

/* Give H2 a big underline effect */
.note-detail h2 {
    border-bottom: 1px solid green;
}

/* Make H3 a big blue block, change text to white*/
.note-detail h3 {
    background-color: #20296e;
    color: #fff;
}

/* Add spacing above H2 to separate previous paragraph */
.note-detail h2 {
    margin-top: 5px;
}

Then you go to the Trilium options on the top-left and select your theme under the Appearance tab. Note that using a custom theme means you can't select the default ones (like dark mode). If you don't like this then set the CSS note's label to #appCss instead of #appTheme. That way it'll have an effect regardless of your chosen theme.

Tip for the colors: instead of writing the name, you can write a hex code (example: #006a00 is a dark green).

[Pilotwings-64]

document.zip

Thanks Mangiola,

I tried your suggestion, which gets me closer to what I'm looking for. However, the font size property does not seem to have any effect. I've attached my test DB file. I've made the sizes for both heading 2 and heading 6 equal to 18, yet the size of each is still what it was before adding the CSS note.

Am I missing something?

Thanks again!
Pilot

[Mangiola]

It's likely being overridden by some other rule. To make yours get prioritized you can just add !important after it:

font-size: 18px !important;

[Pilotwings-64]

That worked. Thank you!

[zadam]

Hi, have you checked Options? There's a "Heading style" - Markdown option allows the easiest differentiation:

which then looks like this:

[Pilotwings-64]

Thanks zadam,

I tried the "Heading Style" setting in options before my original post. Markdown style does make the headings more differentiated, but I would prefer the first letter of each heading to be aligned. Also, the #'s make everything harder to navigate at a glance.

[zadam]

Fair enough. I understand the problem, the heading style was an attempt in this direction but I was also not satisfied with it. Contributions are welcome :-)

[Pilotwings-64]

Thank you!

[SiriusXT]

h2 { background: rgba(43,102,149, 0.8); border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-size: 18px; font-weight: bold; /*margin: 18px 0 !important;*/ padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222; } h3 { background: rgba(43,102,0,0.6); border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; /*margin: 12px 0 !important;*/ padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #222222; } h4 { background: rgba(89, 89, 89, 0.5); border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; /*margin: 12px 0 !important;*/ padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #222222; }