Live Preview: Add margin-top to H1-H6?

Live Preview is awesome! Just one thing:

How can I achieve a space above the headlines that is created with css instead of adding an empty line?
I used to work with the css-addon by @Obsidandnancy - here:

Unfortunately, it does not work anymore.
Thanks for any help!

Hi @renfield, this still works for me in Edit Mode as well as Preview Mode. Maybe your theme or a plugin is styling the headers as well now.

.cm-s-obsidian pre.HyperMD-header-1, .markdown-preview-view h1 {
padding-top: 80px !important;

Odd as it might seem, someone recently had a case where removing the !important solved the issue.

.cm-s-obsidian pre.HyperMD-header-1, .markdown-preview-view h1 {
padding-top: 80px;

Hi @Obsidandnancy , thanks for your suggestion! Unfortunately, it doesn’t work on my PC anymore, though I disabled all external plugins and tried the Obsidian default theme (and Blue Topaz which I normally use). I tried css with !important and without. :-/

One more try… this is a slightly more formal snippet coding.

.cm-s-obsidian pre.HyperMD-header.HyperMD-header-1, .markdown-preview-view h1 {
padding-top: 80px !important;

Wow, thanks a lot for your effort!
It works in edit mode and preview mode! :smile:
Would be great, if it would as well work in the „Experimental Live Preview“-mode.

1 Like

I agree, I really hope it will be possible eventually to have the same header style in live-preview as in the normal preview mode. I was expecting it, because they were comparing this WYSIWYG thing with Typora.

I found a solution today, thanks to @EleanorKonik s fantastic Obsidian-Newsletter, where she wrote that

the new Live Preview mode changes the pre.HyperMD-codeblock element to a div.HyperMD-codeblock

So I changed my header-styling css to

.cm-s-obsidian div.HyperMD-header-1, .markdown-preview-view h1 {
padding-top: 2em; !important; color: red;

Now it looks as I imagined it. :grin: Thanks!


This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.