How to stop header level snippet from affecting obsidian UI elements

Hi good afternoon everyone. I am using the following snippet to add a header level next to the headers in my notes:

/*reading*/
:is(h1) {
  position: relative;
  &::before {
      --indicator-offset: 18px;
      --indicator-alignment: center;
      content: var(--indicator);
      position: absolute;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: var(--indicator-alignment);
      color: var(--text-faint);
      /*font-size: var(--font-text-size);*/
      font-size: var(--font-text-size);
      font-size: 12px;
      translate: calc(-100% - var(--indicator-offset)) 0;
  }
}

:is(h2, h3) {
  position: relative;
  &::before {
      --indicator-offset: 17px;
      --indicator-alignment: center;
      content: var(--indicator);
      position: absolute;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: var(--indicator-alignment);
      color: var(--text-faint);
      /*font-size: var(--font-text-size);*/
      font-size: var(--font-text-size);
      font-size: 12px;
      translate: calc(-100% - var(--indicator-offset)) 0;
  }
}

:is(h4, h5, h6){
  position: relative;
  &::before {
      --indicator-offset: 15px;
      --indicator-alignment: center;
      content: var(--indicator);
      position: absolute;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: var(--indicator-alignment);
      color: var(--text-faint);
      /*font-size: var(--font-text-size);*/
      font-size: var(--font-text-size);
      font-size: 12px;
      translate: calc(-100% - var(--indicator-offset)) 0;
  }
}

/*editing*/
.HyperMD-header {
  position: relative;
  &::before {

      --indicator-alignment: center;
      content: var(--indicator);
      position: absolute;
      top: 16px;
      bottom: 0;
      display: flex;
      align-items: var(--indicator-alignment);
      color: var(--text-faint);
      /*font-size: var(--font-text-size);*/
      font-size: 12px;
      translate: calc(-100% - var(--indicator-offset)) 0;
  }
}

:is(.HyperMD-header-1, h1) {
  --indicator-offset: 15px;
  --indicator: "H1 ";
}
:is(.HyperMD-header-2, h2) {
  --indicator-offset: 14px;
  --indicator: "H2 ";
}
:is(.HyperMD-header-3, h3) {
  --indicator-offset: 14px;
  --indicator: "H3 ";
}
:is(.HyperMD-header-4, h4) {
  --indicator-offset: 12px;
  --indicator: "H4 ";
}
:is(.HyperMD-header-5, h5) {
  --indicator-offset: 12px;
  --indicator: "H5 ";
}
:is(.HyperMD-header-6, h6) {
  --indicator-offset: 12px;
  --indicator: "H6 ";
}

This is how it looks:

However I encountered the following issue: The snippet also targets UI elements from obsidian e.g.


image
And even in canvas cards (which is very annoying since only half of the header level is visible):

Is there any way to make this snippet only target headers inside actual notes (without having to use a helper class).
Thanks in advance for any help

Adding .markdown-rendered to these sections should be sufficient:

.markdown-rendered :is(h1)
...
.markdown-rendered :is(h2, h3)
...
.markdown-rendered :is(h4, h5, h6)

If that doesn’t work out, there are a few other ways to restrict the CSS the note body only.


edit: maybe not for the Canvas cards, but it should take care of the other areas. I’ll have a look later if I get a chance.

Hi. Thanks for your answer. Just as you mentioned, it works for the UI elements, but not for canvas. If you find a way to restrict the snippet from affecting the canvas cards I would really appreciate it if you could let me know.
Either way, thanks for your help :slight_smile:

A quick “fix” is adding [data-type="markdown"] to the same lines as above. e.g.

[data-type="markdown"] .markdown-rendered :is(h1)

This restricts the CSS to markdown files.

You could also adjust the --indicator-offset: 18px; to bring the the indicators in a bit, but then that may look odd in your notes. If you can find a px balance between notes and canvas cards, that might work.

Thanks mate, you are the best.
I also tried adjusting the header for a configuration that fits both cards and notes, but couldn’t really find a good fit. But the CSS your shared was just what I was looking for. Thanks :slight_smile:

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