Custom styling with minimal theme enabled

[ruben]

Hi, I installed the minimal theme and in order to adjust some styling, I added a css snippet in Appearance -> CSS snippets containing this:

body {
        color: red;
}

h1, h2, h3, h4, h5, h6 {
        line-height: 2.5rem;
}

li {
        line-height: 2.5em;
}

p {
        margin-bottom: 2em;
}

I added the color: red only for paranoia reasons after my adjusted line height seemingly didn’t have any effect.

Am I right to assume that my snippet isn’t loaded at all?

How can I adjust the spacing and line height while using minimal theme?

[ruben]

after restarting obsidian, my text is now colored red. The changes that I was actually going for don’t materialize, somewhat ironically.

(the forum didn’t allow me to edit my initial post)

[ruben]

I figured it out now.

My main problem is the editing mode “Live preview”. In the “reading view” my css adjustments show up just fine. It seems that “live preview” doesn’t rely on the same html-tags as the “reading view”, i.e. lists aren’t implemented as <li> and headings aren’t implmented as <h1>, <h2>, … in “live preview”.

This is somewhat of a problem because effectively now both, “live preview” and “source mode” are not formatted well. The “source mode” in the default theme is fine, the “source mode” in the minimal theme - to me - is profoundly suboptimal. I will try and look for a solution there. Maybe there is a way to have a plain text source mode, which is one of markdown’s strength after all.

[ruben]

The following css works for me, with editing mode set to “source view”, disabling the live-preview-feature:

h1, h2, h3, h4, h5, h6 {
        line-height: 1.5em;
}

li {
        line-height: 1.8em;
}

p {
        margin-block-start: 0.5em;
        margin-block-end: 0.5em;
        text-indent: 0.5em;
}

div.HyperMD-list-line {
        line-height: 1.8em;
}

[ruben]

Updating … with the below css, even live preview doesn’t look so bad. There seem to be inconsistencies in the minimal theme that make the live preview look differnent to “read mode”. My custom css is properly displayed everywhere, now.

h1, h2, h3, h4, h5, h6 {
        line-height: 1.8em !important;
}

li {
        line-height: 1.8em;
}

p {
        margin-block-start: 0.5em;
        margin-block-end: 0.5em;
        text-indent: 0.5em;
}

div.HyperMD-list-line {
        line-height: 1.8em;
}

div.HyperMD-header-1 {
        font-size: var(--h1);
}
div.HyperMD-header-2 {
        font-size: var(--h2);
}
div.HyperMD-header-3 {
        font-size: var(--h3);
}
div.HyperMD-header-4 {
        font-size: var(--h4);
}
div.HyperMD-header-5 {
        font-size: var(--h5);
}
div.HyperMD-header-6 {
        font-size: var(--h6);
}