How to write a snippet to hide the 6th heading level?

Custom CSS & Theme Design
1

Is it possible to write a snippet in Obsidian that hides the 6th heading level in the outline?

I guess it is, but I was not successful so far.

Already tried several codes (inspired from ChatGPT), namely:

.outline .tree-item-self[data-heading-level=“6”] {
display: none !important;
}

.outline .tree-item-inner {
font-size: 0;
}

.outline .tree-item-inner::before {
content: attr(data-heading);
font-size: 14px;
}

.outline .tree-item-inner[data-heading-level=“6”] {
display: none !important;
}

.outline .tree-item[data-depth=“6”] {
display: none !important;
}

.outline .tree-item-self[data-heading=“6”] {
display: none;
}

None of these work unfortunately :confused:

Thanks in advance!
OS

2

That’s some uninspired generative AI code. Try this:

  • .el-h6 for Reading mode.
  • .HyperMD-header.HyperMD-header-6.cm-line for Source mode and Live Preview.

So, hide heading six:

.el-h6, .HyperMD-header.HyperMD-header-6.cm-line {
	display: none;
}

Or hide the heading content but keep the empty space (a blank line) in Source mode and Live Preview:

.cm-header-6 {
	display: none;
}
3

Hi dawni!

Thanks for your reply. You are right of course regarding the “uninspired” code, but I am just trying to expand my more than basic coding-competence (by using AI)^^

Anyway: If I understand your code-suggestion right, this code will bring, that in source- and reading-mode Obsidian won’t show the 6th headings anymore, right? Unfortunately this is not what I am looking for. I would like to hide the 6th heading only in the outline-window. Would this possible too?

Yours,

4

If you use Developers Tool > Elements and look at the outline pane (instruction on how to do this: Obsidian CSS Inspector Workflow), you’ll notice that the outline pane is in a <div class=“workspace-leaf-content” data-type=“outline”>, so it should be possible to target it.

However, further inspection reveals that the header level information is not included, only the text of the header. This means that you don’t know which header level the text in the outline is at, and therefore you can’t hide only <h6> from the outline.

5

Many many thanks for this clear and understandable information. In this case I will submit to my fate and forget about it… :slight_smile:

1 Like
6

Ah, I missed the “in the outline” part of your question, which was (now I see) clearly the main part of your question. Sorry about that.