Formatting headings (adding underlines and spacing)

Custom CSS & Theme Design
1

I’m having trouble writing CSS snippets that space headings the way I want. I have two different, but related issues, of not being able to get code to work in both editing and reading view.

I’ve managed to add extra spacing above headings in reading view:

/* Adds extra space above headings in reading view
h1 {
   margin-top: 50px !important;}

h2, h3, h4, h5, h6 {
   margin-top: 24px !important;
}

I’d like to add extra space above h1 in live editing mode, as well, because it will help visually differentiate different topics within a note, but the various CSS snippets I’ve tried haven’t done anything. This is what I’ve currently got:

.cm-header-1 {
   margin-top: 20px !important;
}

It’s based off of this format, for adding underlines to headings in live preview mode:

.cm-header-4 {
    text-decoration: underline !important;
    text-underline-offset: 0.07em;
}

This works, so I don’t understand why the “margin-top” code doesn’t, seeing as this is the code that works for reading view.

The second problem is adding a horizontal line below folded headings. The code I have is this:

.is-collapsed > :is(h1, h2, h3, h4, h5, h6),
.HyperMD-header > .cm-fold-indicator.is-collapsed ~ .cm-widgetBuffer:last-of-type { 
    display: block !important;
    content: "" !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(92, 70, 56, 0.30) !important;
}

This works for reading view, but not live editing view, despite the fact that the code that I modeled it off (which adds space below folded headings), works in both reading view and live editing mode:

/* Add space beneath folded headers - reader view, edit view */
.is-collapsed > :is(h1, h2, h3, h4, h5, h6),
.HyperMD-header > .cm-fold-indicator.is-collapsed ~ .cm-widgetBuffer:last-of-type { 
    margin-bottom: 24px !important; 
}

I’ve tried rewriting it to refer to editing view headings:

.is-collapsed > :is(cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6),
.cm-header > .cm-fold-indicator.is-collapsed ~ .cm-widgetBuffer:last-of-type { 
    display: block !important;
    content: "" !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(92, 70, 56, 0.30) !important;
}

But this doesn’t work.

If someone could help me fix these, I’d really appreciate it.

2

Try to add display: inline-block; …

.cm-header-1 {
   display: inline-block;
   margin-top: 20px !important;
}

It has something to do with “parent margins”. Maybe some Dr. CSS can explain more in detail :slight_smile:

Cheers, Marko :nerd_face:

3

Noooooooooo! Don’t adjust vertical margins in the editor (source mode and live preview)! The washer will explode and your cat will run away! :laughing: Seriously though, it will break clicking around, moving with your arrow keys, text input, etc. Use paddings there. Adjusting margins in reading view is fine.

For the heading spacing, I’d go with something like this:

.markdown-rendered h1 {
   --heading-spacing: 50px; 
}

.markdown-rendered :is(h2, h3, h4, h5, h6) {
   --heading-spacing: 24px; 
}

.cm-s-obsidian .cm-line.HyperMD-header-1 {
    padding-top: 50px; 
}

.cm-s-obsidian .cm-line:is(.HyperMD-header-2, .HyperMD-header-3,
.HyperMD-header-4, .HyperMD-header-5, .HyperMD-header-6) {
    padding-top: 24px; 
}
3 Likes
4

OH! Okay. I didn’t know I was playing with fire this whole time :joy: Now I know to make (double) backups just in case something explodes. (P.S. I have three cats, so will they all run away, or just the one…? :face_with_peeking_eye: )

Thanks for the CSS snippets. I’ve adjusted the spacing and I definitely think it’s easier to differentiate sections now.

I ended up changing my mind about formatting a little, and–I know you said not to mess with margins but I swear I got something that looked the way this renders:

h1, h2, h3, h4, h5, h6 {
    border-bottom: 1px solid #D9CDF9;
    padding-bottom: 0.25em;
    margin-bottom: 1em;
}

working in live preview mode yesterday. I can’t, for the life of me, remember what I wrote that would have been different from this. Maybe I’m misremembering, and didn’t notice it was only in reading view, but do you know how I could get something like this (a horizontal line beneath headings, that runs the whole way left, to right) working, without setting off an atomic bomb?

Thanks. :saluting_face:

5

Ha! Glad you are heading in the direction you want!

h1, h2, h3, h4, h5, h6 {...} are only relevant for reading view (mostly), so all good changing the margins with those. All good. Cats are safe and cozy. :grinning_cat:

For adding a bottom border to all headings in the editor, this should do it. Keep the top .mod-cm6 .cm-editor .HyperMD-header {...} as is, but feel free to adjust the rest to your liking.

/* editor - heading bottom borders */
.mod-cm6 .cm-editor .HyperMD-header {
  border-bottom: 1px solid rgba(92, 70, 56, 0.30);
  padding-bottom: 0.2em;
}
1 Like
6

Thank you! This must have been what I had (pieced together from the dozen or so websites I looked at… before I then deleted the code thinking I didn’t want it ). It’s working the way I remember. :grin:

If you don’t mind me asking, how do you work out what code to use to refer to each element? Sometimes reading the textfiles in .Obsidian can help, but not always, and I’ve tried using this list, but it only sometimes helps (not in this case, clearly):

I’m not even sure what all the codes are. I assume .cm editor refers to live preview mode? .HyperMD-header is headings… What does the .mod-cm6 refer to?

7

I think the .mod-cm6 is for CodeMirror6. Yeah, anytime you see cm-, it refers to CodeMirror; what’s used for the editor.

Have a play around with the inspector.

Left here is live preview (the editor) and right is reading view. You can see the styles change in the lower right as you click around and they will be very different between the editor and reading view.

Obsidian_e76cGuZrpu

1 Like
8

Oh, interesting, thank you!