Introducing visual Separators in File Explorer (includes HOW-TO)

[replete]

This plugin works great, especially having a single sortspec to deal with manual sorting of the main navigation and pinning important notes to the top of lists.

I would love to be able to add in a UI separator to the file explorer view in my sortspec, something like this, using a simple --- delimiter:

---
sorting-spec: |
    target-folder: Daily
    Tracker
    > a-z
    target-folder: /
    Home
    ---
    Daily
    Weekly
    Projects
    Notes
    ---
    Journal
    Dreams
    Thoughts
    Writing
    ---
    Assets
    Temporary
    ...
    z-a
---

This would create a separator in the workspace which would have markup like:

<div class="nav-folder is-collapsed"/>
<div class="nav-separator">
    <div class="nav-separator-inner"></div>
 </div>

And CSS like:

.nav-folder-separator {
display:block;
width:100%:
padding: var(--some-var) var(--some-var)
}
.nav-folder-separator-inner {
/* you get the idea*/
}

I could help with the markup/CSS part if this sounds like a good idea.

[SebastianMC]

Hi @replete

thanks for your feedback and input!

I also needed separators so I investigated the available options to generate them on-the-fly by the plugin. It turned out that technically it is not feasible or far too complicated to be worth it.

For example, following the idea which you described is not feasible because the custom-sort plugin, same as the Obsidian File Explorer, operates at the level of logical folders-files tree. The logical tree is a reflection of the underneath filesystem and the plugin only changes the order of items in the logical tree, on-the-fly. The rendering phase (generation of HTML DOM) for the File Explorer view is done later on by Obsidian, off the logical tree. It involves the idea of a virtual view, which displays only part of the logical tree, and as user scrolls the tree up and down, expands and collapses the folders, the relevant HTML elements are created and discarded as needed, based on the logical folders-files tree. The plugin is not connected to this HTML/DOM creation phase, it operates on an earlier stage on the logical files-folders tree. And keeping this single-point-of-integration of the plugin and Obsidian is essential to make it long-term compatible with future Obsidian releases.

I also exercised another option which was to inject in the folders-files tree some artificial notes with tile like '---' (or similar approach). I didn't work either because the File Explorer HTML/DOM rendering logic got fooled for some reason. Trying to render items non existing in the filesystem caused the view refresh problems and observable slowness. Strange, I didn't investigate it further.

Eventually I ended up with a simple approach to explicitly create notes acting as separators.
There is a nice unicode character U+23AF Horizontal Line Extension: ⎯ which can be used as note name, repeated as many times as wanted

Taking your example as an input, you could create three notes:

• ⎯ (a single character)
• ⎯⎯ (repeated 2x)
• ⎯⎯⎯ (repeated 3x)

Then, in the sorting specification include the names explicitly.
The result could look like:

obviously for the titles you can use simple dashes, or the unicode line repeated more times, according to visual preferences

Not being ideal (the artificial notes need to exist in the vault), the approach works for me

At the same time, I'm keeping in mind the automatic generation of the separators. Maybe some new idea crosses my mind, if so I will give it a try.

[replete]

@SebastianMC Thank you for such a comprehensive answer.

I woke up and had an idea, and just made a very quick proof of concept:

.nav-folder:nth-of-type(4) {
    margin-bottom:15px;
}

.nav-folder:nth-of-type(4)::after {
    content:'';
    display:block;
    height:1px;
    width:100%;
    background:var(--tx3);
    bottom:-9px;
    position:absolute;
}

If the plugin can apply a style hook (data-attribute or css class) for items that should have a separator underneath them, then through use of the seemingly reliable css variables for metrics, I could write CSS that should work for most themes without adjustments. From a quick test, it works as expected, the CSS generated content (::after) requires no new markup and because it is absolutely positioned it is not included in box model of the item it is attached to.

If the plugin could figure out what element is above the separator and add a CSS class, then the problem is only styling.

As an aside, I've spent a week hacking CSS snippets to make all the plugins I want to use look better, so my first thought was 'Can I do this in just CSS?'

.nav-folder.mod-root > .nav-folder-children > [class*=nav-]:has([data-path=Journal]),
.nav-folder.mod-root > .nav-folder-children > [class*=nav-]:has([data-path="Assets/Templater/Startup/skipFrontmatter.md"){
{
    outline: 2px solid red;
}

Almost - the :has() seems to fail, possibly due to out of spec or outdated rendering engine. Just checked, :has is supported in Chrome 105 and latest version of Obsidian is Chrome 100, so in the future I can make a basic separator hack in a css snippet.

Adding a has-separator CSS class or hook to navigation items through sortspec would be ideal, but I understand why it might feel like a shoehorned solution.

Would be pretty cool to add css class hooks to items through sort-spec though!

Thanks again for looking into this, much appreciated.

Phil

[replete]

For anyone else who stumbles upon this, this is my CSS hack for the time being to add separators to my main vault structure (which doesn't change much):

/* counter */
.nav-folder.mod-root > .nav-folder-children {
    counter-reset: count;
    counter-increment: count;
}
/* comment this out after you've edited the CSS rules */
.nav-folder.mod-root > .nav-folder-children > [class*=nav-]::before {
    counter-increment: count;
    content:'nth-of-type(' counter(count) ")";
    position:absolute;
    font-size:10px;
    right: 0;
    color:red;

}

.nav-folder.mod-root > .nav-folder-children > [class*=nav-]:nth-of-type(2),
.nav-folder.mod-root > .nav-folder-children > [class*=nav-]:nth-of-type(4),
.nav-folder.mod-root > .nav-folder-children > [class*=nav-]:nth-of-type(6),
.nav-folder.mod-root > .nav-folder-children > [class*=nav-]:nth-of-type(10),
.nav-folder.mod-root > .nav-folder-children > [class*=nav-]:nth-of-type(12) {
    margin-bottom: 14px;
}

.nav-folder.mod-root > .nav-folder-children > [class*=nav-]:nth-of-type(2)::after,
.nav-folder.mod-root > .nav-folder-children > [class*=nav-]:nth-of-type(4)::after,
.nav-folder.mod-root > .nav-folder-children > [class*=nav-]:nth-of-type(6)::after,
.nav-folder.mod-root > .nav-folder-children > [class*=nav-]:nth-of-type(10)::after,
.nav-folder.mod-root > .nav-folder-children > [class*=nav-]:nth-of-type(12)::after {
    content:'';
    display:block;
    height:1px;
    width:100%;
    bottom:-7px;
    left:-8px;
    background:linear-gradient(to right, var(--divider-color), transparent);
    position:absolute;
}

There's a css rule above that is just for figuring out the index values for the nth-of-type(x) css rules, it looks like this when its uncommented:

Obviously, this will break when you re-sort your hierarchy, but its the best we can do with the css features available at the moment..

[replete]

Btw kudos for so elegantly solving one of the most widely requested features, might be worth dropping a comment in here if you haven't already https://forum.obsidian.md/t/file-explorer-custom-sort/1602/19

[SebastianMC]

Hi @replete,

thank you for the feedback and all the insightful comments!

Special thanks for presenting the details of CSS-based solution. I learned a lot from it about the CSS-only no-JS visual manipulations and I'm impressed - the flexibility of the CSS-only approach is really stunning!

I have some additional comments, and the first one should make you happy :-)

1. Obsidian 1.1.9 is using Electron v21 and Chrome 106 so the :has() selector is now available!

The trick is that you can have 1.1.9 and still an older version of Chrome, because it is the version of Obsidian Installer which decides, not the version of Obsidian. Tricky and extremely confusing. Reinstalling Obsidian from scratch helps.

See this message on forum: Switching to a new Chrome version -> Obsidian 1.1.9 is using Electron v21 and Chrome 106 so the :has() selector is now available!

2. Copying this thread to Discussions section

Finding our exchange here very valuable and worth sharing, I will copy this issue to git Discussions. Closed issues (like this one) are rarely examined, at the same time Discussions section is intended to be exposed and available by definition, and the Q&A category is probably the best match for these information about introducing and customising separators in File Explorer.

3. Presenting the CSS and has()-based solution for visual separators

Knowing good news from 1. I'd appreciate if you post (in Discussions) a short description of the solution (as a kind of final comment on this thread copied there)

4. Including the hints on Separators in manual of this plugin

Not sure if people read manuals :-)
Anyways, I will also copy the CSS and has()-based version description to manual of this plugin, adding references to this git issue and to the relevant section in Discussions

5. (Not) Updating this Custom Sort plugin to allow CSS-manipulations

I examined the technical side of how a plugin can manipulate HTML/CSS of File Explorer views in Obsidian and it seems... complicated. It would deserve a new plugin on its own, because - comparing to the Custom Sorting plugin - the integration points with Obsidian are different, there are more integration points, there is a need to handle a set of events to correctly populate and update the CSS/HTML adjustments, and so on.

BTW I reviewed the code of the excellent Aidenlx' Folder Note plugin to get an insight into that specific area of Obsidian programming

So, I'd rather keep the Custom Sorting plugin in its current shape, that is a lightweight plugin which modifies the logical Obsidian data structures and doesn't deal with HTML/CSS etc.

And especially when I know that the CSS and has()-based version of Separators can be applied quickly and easily, regardless of any other plugins.

6. Announcing the Custom Sorting plugin

Yes, I've spread the news about releasing of this Custom Sorting plugin in many places, including various threads in Obsidian community and Discord channels. The links there are noticed by people and followed by persons who seek this kind of solution. There is also a group of Obsidian users who want the UI-only drag & drop solution for reordering items.

thanks a lot!
Seb

[replete]

@SebastianMC Thanks again for the very useful information.

https://forum.obsidian.md/t/switching-to-a-new-chrome-version/50132/3

It looks like I have this indeterminate version problem - it seems that at least parts are actually 1.18. I think the likely culprit here is the homebrew package manager for MacOS. Lesson learned: Always use the Obsidian installer.

Mozilla/5.0 (Macintosh; ... obsidian/1.1.8 Chrome/100.0.4896.160 Electron/18.3.15 Safari/537.36'

I will reinstall Obsidian 1.19 from installer, then I will revisit my CSS-only separator solution in this thread once I've implemented it.

I think your decision makes sense in the context of the plugin. If you were already working directly with the UI navigation elements, it would be simple to add a CSS class and support separators.

[replete]

Visual Separators for top-level file explorer files/folders (updated June 2024 for Obsidian 1.6.x)

Update: I've created a repo for my CSS snippets, so updated versions now live at:

• https://github.com/replete/obsidian-minimal-theme-css-snippets/blob/main/%5Bui%5D%20Custom%20Separators.css for the full-width solid version
• https://github.com/replete/obsidian-minimal-theme-css-snippets/blob/main/%5Bui%5D%20Custom%20Separators%20(gradient).css for the gradient version

/* @replete Folder Separators v3 tested with Obsidian 1.6.2 */

/*
    File Explorer Separators
    So this is super handy, I found a way to add visual separators below and above navigation items in the file explorer. 
    This works nicely along side the 'Custom File Explorer Sorting' plugin, and there's a thread on their github about my solution.
    You need to customize the rule below in accordance with your file structure.
    https://github.com/replete/obsidian-minimal-theme-css-snippets
*/
:root {
    --replete-custom-separators-vertical-padding: 6px;
    --replete-custom-separators-left-margin: -12px;
}

/* Separator below */
.nav-files-container [class*=nav-]:has(:is(
    [data-path="Areas.md"],
    [data-path="Meetings"],
    [data-path="Sundown"],
    [data-path="Thoughts"],
    [data-path="Meditations"]
))::after {
    content:'';
    display:block;
    height:1px;
    width:calc(100% + 32px);
    background:var(--tab-outline-color);
    margin:var(--replete-custom-separators-vertical-padding) 0 var(--replete-custom-separators-vertical-padding) var(--replete-custom-separators-left-margin);
}

[replete]

I just looked at this again and realized the code could be much simpler, so I've updated the code.

The screenshot is my own theme, so it will need visual adjustments for the standard theme, but the mechanics work.

[SebastianMC]

Great!

I'm not a CSS expert, so it is impressive to see how easy such visual manipulations can be done, if you know how to do it.

Thanks for sharing!

I've added a linked copy of the image with some context to:

• main README.md
• manual.md in docs

An additional question came to my mind when I applied this solution to one of my vaults. Namely, if I want to add a similar separator above a note, could this be done with an equivalent CSS-based snippet? In the vault I have a group of folders to be pushed to the bottom. Above them I keep a dynamic set of notes, which change frequently. Adding the separator above a stable folder (which is pushed to the bottom) would help here. What do you think?

[replete]

No worries. I've updated the code with separators that appear above.

[replete]

Updated for Obsidian 1.6.x in June 2024

[replete]

Updated answer with links to new version available in my CSS Snippets repo, which is full of other custom CSS goodies.

[SebastianMC]

Hi @imbafisk4tw

this is @SebastianMC, author of the Custom Sorting plugin and you posted your message in a discussion space belonging to that plugin.

To ensure that the author of CSS snippets is notified about your message you can use a direct reference with '@' character - for example start a new comment here or edit your above message, start typing '@' and it will suggest the users/persons involved in. Choose 'replete' and in result (see in the 'Preview' tab while editing) it will turn into a clickable link like @replete

Feel free to continue the discussion here or (re)post your message directly in the github home of CSS snippets repo. You can create a new issure there in the issues section or open new discussion in discussions pane

[replete]

@imbafisk4tw Can you paste your CSS? What version/OS are you using? If you wrote the rule correctly, you probably need to update Obsidian to get a newer version which supports css :has() selector (Obsidian 1.1.8+, but some installations didn't get the electron upgrade, e.g. homebrew installs on mac)

[imbafisk4tw]

@replete

• Obsidian version: v.1.1.16 (Installer version: v.14.6)
• Win 10
• EDIT3: Electron version '18.0.4'

I guess I need to update this manually? How do I do this?

EDIT4:

Okay manually installing the newest version helped. Auto Update doesn't update electron.

Thanks for leading me to the solution :-)

[cps9716]

Hi @replete! Is there any way to add a separator between individual files, instead of between folders?

[replete]

@cps9716 I just tried and and it does work out of the box, but the styling (CSS) would need some tuning specific to the theme you are using. For instance, I am using my own 'Compact Sidebar' css snippet which would mean I have slightly different CSS then others. So, yes it is possible, but the snippet does not account for it. It wouldn't be too hard to be honest.

[akaralar]

@replete this used to work but it is now broken for me, is it just broken for me? I can't get it to work

[replete]

@nickwild-999 Odd. What OS are you using? Are you using a high DPI screen (150%+ screen scaling in Windows)?

[nickwild-999]

I am using a 16" MacBook Pro M1 - must admit that your :has(:is( trick was really helpful in getting this sorted so thanks for that👍

[replete]

I am using a 16" MacBook Pro M1 - must admit that your :has(:is( trick was really helpful in getting this sorted so thanks for that👍

Thats useful to know, I have a feeling this is a high DPI issue, I will do some testing and update the repo, probably with the border option. There was a reason I didn't use a border in the first place. This problem seemed to popup after an obsidian update which I just received, so now I have the problem. Doh!

[replete]

@nickwild-999
Okay, I've fixed it now, Obsidian changed the DOM so the selectors needed updating. I've pushed this to my repo.

:root {
    --replete-custom-separators-vertical-padding: 6px;
    --replete-custom-separators-left-margin: -12px;
}

/* Separator below */
.nav-files-container [class*=nav-]:has(:is(
    [data-path="Areas.md"],
    [data-path="Meetings"],
    [data-path="Sundown"],
    [data-path="Thoughts"],
    [data-path="Meditations"]
))::after {
    content:'';
    display:block;
    height:1px;
    width:calc(100% + 32px);
    background:var(--tab-outline-color);
    margin:var(--replete-custom-separators-vertical-padding) 0 var(--replete-custom-separators-vertical-padding) var(--replete-custom-separators-left-margin);
}

[akaralar]

this latest version worked on my machine too! thanks a lot for your work!