Remove extra elements in Obsidian 1.0?

[tbenthompson]

Hi! This is a feature request and not a bug report.

Looking at a document in Focus mode (see the screenshot below), there's a decent amount of visual clutter on the window:

• We see the document name three times: once on the left, once at the top and then again in the main body because Obsidian 1.0 adds the document name as an H1 header.
• The forward and back arrows remain.
• The X above the document title remains for closing the document.
• There's a thick bar on the left for the "Toggle Focus Mode" button.
• There's the new tab "+" on the OS window bar and the down arrow on the right side.

I'm not necessarily asking to remove all these, but I think my ideal tool would do that!

I think the thick bar on the left is the one I would be most interested in removing. Perhaps the Toggle button could be moved to OS window bar or something like that?

Thanks very much for the effort you've put into this and don't worry if none of these things are in your plans.

[ryanpcmcquen]

I go back and forth on some of this. If you look through past tickets you will see people wanted more things to show in the past. Would you be willing to submit a PR that removes the thick bar on the left?

[nmariano9]

+1 to on this! Hiding other open tabs in tab view would be my top priority. I would vote for hiding everything except the single top title.

@tbenthompson the inline title can be disabled by default in appearance settings.

[ryanpcmcquen]

I don't feel too strongly either way, but in the past people wanted tabs to show.

[ryanpcmcquen]

Removed one of the titles: https://github.com/ryanpcmcquen/obsidian-focus-mode/releases/tag/1.10.2

[danieltomasz]

Could this be solved via creating an entry in the “style settings” plugin, people could choose what to remove if they want to modify the behaviour? The most of the people will be using the default you are proposing.

[ryanpcmcquen]

Yep, .focus-mode is already available as a class on the HTML.

[ryanpcmcquen]

Documented here: https://github.com/ryanpcmcquen/obsidian-focus-mode#customizing-the-plugins-appearance

[tbenthompson]

Removed one of the titles: https://github.com/ryanpcmcquen/obsidian-focus-mode/releases/tag/1.10.2

Nice! Thank you! This doesn't quite work right when working inside a folder: "topics/..."

[ryanpcmcquen]

@tbenthompson would you want the folder name removed as well or should we remove a different title since the folder name could be useful?

[ryanpcmcquen]

+1 to on this! Hiding other open tabs in tab view would be my top priority. I would vote for hiding everything except the single top title.

@tbenthompson the inline title can be disabled by default in appearance settings.

It's worth noting that 'Super Focus Mode' hides all but the active tab.

[ryanpcmcquen]

I switched to removing the inline title since I could see the folder name as being useful, note that 'Super Focus Mode' will hide all but the active tab. Any further customization can be done with the built in CSS snippets functionality of Obsidian using the CSS classes that are added to the document.body, documented here: https://github.com/ryanpcmcquen/obsidian-focus-mode#customizing-the-plugins-appearance

Let me know if there is anything else, thank you for the helpful feedback!

[tbenthompson]

Thanks!!

If anyone arrives here looking to remove as many elements as possible, here's the CSS snippet I'm using

.focus-mode .workspace-tab-header {
    display: none;
}

.focus-mode .workspace-tab-header-new-tab {
    display: none;
}

.focus-mode .workspace-tab-header-tab-list {
    display: none;
}

.focus-mode .view-header-nav-buttons {
    display: none;
}

.focus-mode .side-dock-actions {
    display: none;
}

[nmariano9]

Thanks!!

If anyone arrives here looking to remove as many elements as possible, here's the CSS snippet I'm using

.focus-mode .workspace-tab-header {
    display: none;
}

.focus-mode .workspace-tab-header-new-tab {
    display: none;
}

.focus-mode .workspace-tab-header-tab-list {
    display: none;
}

.focus-mode .view-header-nav-buttons {
    display: none;
}

.focus-mode .side-dock-actions {
    display: none;
}

Thanks, this is awesome!

A step-by-step in case anyone who isn't that computer literate (such as myself...) finds this (EDIT: see @ryanpcmcquen reply below. Just save the code he's provided in a .css and put it in the snippets folder. Then go to Settings -> Appearance and enable the CSS snippet).

[ryanpcmcquen]

@tbenthompson @nmariano9 You should use Obsidian's built-in CSS snippet feature to add modifying CSS. It is documented here:

https://help.obsidian.md/How+to/Add+custom+styles#Use+Themes+and+or+CSS+snippets

Never modify plugin code directly, because it will be overwritten by any updates. Also, since the snippet modifies the same property on each selector, you can chain the CSS selectors delimited by commas:

.focus-mode .workspace-tab-header,
.focus-mode .workspace-tab-header-new-tab,
.focus-mode .workspace-tab-header-tab-list,
.focus-mode .view-header-nav-buttons,
.focus-mode .side-dock-actions {
    display: none;
}