Outline alignment in recent updating is bit of confusing

[wghlrnag]

What I’m trying to do

As you can see in my screenshot, my notes have 2 level of headings, but in the outline pane of this note, it more likes it have 3 nested level,

any possible I can change it to the alignment underneath which is pointed by the green arrow?

I have tried

I’ve searched help docs and forum, maybe I missed something, but I got nothing related this issue of mine.

Not sure if this is only effect me, that’s quite strange no one asked this?

I had tried post a question on discord, but I didn’t got replying, only some post under my one shows: read todo. I didn’t see any related thing in todo as well.

I am newbie in community or discord, sorry, I just want to know if there is a way to align the outline like the green arrow pointed in the picture above.

[ZenMoto]

This will do it:

/* move the parent to the left */
.tree-item .tree-item-self .tree-item-icon {
    margin-left: -16px;
}

/* move the children to the left */
.tree-item-children {
	margin-left:0px;
}

RESULT:

(Just add that code to your CSS)

[wghlrnag]

@ZenMoto Thanks for your reply, I’ve add your code to CSS snippets, seems it change bit but not what I mentioned in OP.

[ZenMoto]

Try this:

/* move the parent to the left */
.outline > .tree-item > .tree-item-self > .tree-item-icon.collapse-icon {
	margin-left: -16px !important;
}

/* move the children to the left */
.outline > .tree-item > .tree-item-children {
	margin-left:0px !important;
}

^ Increased specificity and added !important tags.

(it works for the default theme / CSS)

[holroy]

@ZenMoto

it works for the default theme / CSS

It seems to work mainly for the top level, in Minimal theme, as well.

[ZenMoto]

Yes that’s true.

The original snippet will align all levels.

[holroy]

@ZenMoto

/* move the parent to the left */
.tree-item .tree-item-self .tree-item-icon {
    margin-left: -16px;
}

/* move the children to the left */
.tree-item-children {
	margin-left:0px;
}

So true, it looks a lot nicer now:

But it seems like Minimal theme has changed some of the sizing (since the lines are suddenly slightly askew), but I reckon that one just have to live with that and adapt according to the theme one is using.

Nice CSS solution by you, yet again!

[ZenMoto]

@holroy This will give more control of “the arrow” and “the space before the text”.

Seems like these values will line everything up (based on your screenshot):

/* move the parents (each arrow row) */
.tree-item .tree-item-self .tree-item-icon {
    margin-left: -12px; /* move each arrow row (including the arrow's text) */
    padding-inline-end: 2px; /* change space between arrow and text */
}

/* move the children (each vertical-line block) */
.tree-item-children {
	margin-left: 0px; /* move the vertical lines (with their horizontal text) */
}

And to get it perfect, you can nudge the numbers in that first block.

[wghlrnag]

@ZenMoto and all,

That’s strange that these CSS snippets do not work for me.

here is my environment:

• I am Windows 10 user,
• I use the last version from here: Release 1.1.9 · obsidianmd/obsidian-releases · GitHub
• use installeder to upgrade obisidan from old version.
• I use default theme only,

that how I use the code snippets:

• make a new css file in myvault/.obsidian/snippets,
• paste the codes, with or without !important attributes.
• toggle to active the new css file in obsidian Appearance> CSS snippets
• (optional) restart obsidian

I made a video to show you with or without the snipplet result in my case:

[holroy]

So, you state that the you’re actually able to see your CSS snippets in Settings > Appearance > Code snippets, as you can enable it. That’s a good sign, since it then should be in the right place. However, is there something strange with the file somehow?

Could you please add the following to the top of the CSS-file:

body {
  color: yellow;
}

And the following at the very bottom of the CSS-file:

body {
  text-decoration: line-through !important;
}

Save these changes, and hopefully watch the changes. This should render various stuff within Obsidian with a bright yellow color for the text (or lines), and some text should have a line straight through the text.

Do you see either of these changes somewhere within Obsidian? Either in the outline pane, file explorer, the Settings menu. Anywhere?

In my case the file name has both, settings menu is in yellow, outline pane and file explorer has a yellow line-through, as seem in image below.

Do you see any or all of these? Please report back.

[wghlrnag]

@holroy Thanks for your reply, I assembled the code you provided, seems I don’t have yellow font colour even I added !important attribute.

Please check below:

code in full, and it’s result:

the Appearance settings I had, I didn’t change anything expact Accent colour:

the side option tree of settings, in your case, it’s yellow, but mine is no change:

[holroy]

There is something interfering somewhere. Either the CSS text is changed by something else, or you’ve got some other CSS settings which overrides it. This is just a little strange. So moving forwards, needs navigating the Developer Tools to locate where the culprit are.

But before that, let’s assess where we are:

• The CSS file is correctly named, as it shows up to be enabled in Settings > Appearances > CSS snippets
• The overall CSS file is structurally sound, since the text-decoration: line-through at the end of the file, was shown correctly for some element
• Something strange with the color: yellow, since it doesn’t show up for example in the file heading. So something is interfering
• And of course, you don’t get the intended changes to the actual outline

Some other suggestions?

Could it be dependant on some other plugins or themes or snippets you’ve installed? Could you try disabling all plugins, themes and other snippets, and see if that’s making a change?

Could you try with this CSS file, which I’m sure does the trick for me?
outline_alignment.css (275 Bytes)

Could you attach the Show debug info from Command palettet, just in order to see if there are something else glaring at us to explain what is happening?

Using Developer Tools for debugging

Finally, to aid you in possibly finding the culprit of what’s interferring we’re going to try to locate where the possible interference is in your CSS. Hope this isn’t too easy (and/or difficult), but I’ve used this kind of debugging a lot lately, to identify which or where the CSS is targeted.

I’m going to explain how to locate why the color yellow is not applied to the file heading, but you’ll hopefully be able to apply to other stuff by the end of the explanation, which can identify where your actual problem arises.

• Open the Developer Tools, the Elements pane, by hitting Ctrl + Alt + I (or F12) (or going in the View > Toggle Developers Tool), and select the Element pane in the top bar

• Select the box with the arrow in the upper right, and click on the file name when only the file name is lit up with a blue box, and a popup with the div.inline-title shows
  

• Now the corresponding line should show within the Developer Tools, and you can select the Computed sub-pane below the line.
  

• Now finally, we can see why the file name has the given color, by expanding the arrow in front of the color attribute.
  

• In my particular case, you can see that it’s not actually yellow due to the body { color: yellow; } from the CSS file, but somehow it’s yellow due to the var(--inline-title-color) being yellow.

  • It turns out that’s due some other strangeness, but I was able to change it in the image above by doing body { --inline-title-color: green; }

Now the question becomes, what do you see for margin-left in the Computed section, when you hover the icon of your second sub (the collapse icon)?

I’m hovering here:

and it shows this:

What does your show?

[wghlrnag]

@holroy

Could it be dependant on some other plugins or themes or snippets you’ve installed? Could you try disabling all plugins, themes and other snippets, and see if that’s making a change?

Thank you @holroy !!! You are a star!

When I disable all of my plugins, your code works!

I’d like to find out which plugin was impact the CSS snipplet, so I active them one by one, oddly, till I actived them all, the interfering didn’t coma back.

I learned many thing in this topic,
and thanks again for your detailed and straight forward guide,
I am sure your guide is the torch for solving the similar issues, to help the head scratchers come across here later.

[holroy]

I’m glad you got it solved, but the honour for the CSS goes to @ZenMoto, I just helped you locating why it didn’t work in your setting.

[WhiteNoise]

Outline formatting is misleading/misaligned when only some nodes have children

Obsidian 0.16.2 - standard Dark theme. Consider the following Markdown: # H1 - first # H1 - second ## H2 - Example 1 ## H2 - Example 2 # H1 - third # H1 - fourth Currently, this is rendered like this: (colored lines added for emphasis) [CleanShot 2022-09-05 at 12.13.15] It makes it appear as if H1 - second is a child of H1 - first, when in fact it isn’t. I don’t know if this can be fixed with CSS or if it requires under the hood changes.