Making the tab title bar transparent

[totholz5D]

Hi there,

I use the minimal theme and have the tab title bar on hover mode.
I would like to find a way to make it transparent or invisible so that it doesn’t take up space when not hovered.

hover

not hover

I’m trying to modify it with a custom CSS but it doesn’t seem to react…

.view-header {
background-color: transparent !important;
}

is there a way to do this?

[holroy]

Eh… If it doesn’t show or take up space when not hovered, then what would you hover to make it re-appear?

I’m not sure, but it could possibly be done using some elaborate CSS selectors related to the tab header so that if you hover the tab header it’d reveal the information. Not sure on how to make the connection between active header and/or active title bar though. And it could very fast be very ugly…

Another option could possibly be to make the entire title bar float to the right of the window on top of other content with just a icon or something like that, and then when hovered it’ll take it’s natural space and floatiness (is that even a word ).

Hope this helps, or gives you some idea on how to proceed.

[moz]

Are U looking for the plugin Hider?

[holroy]

@moz , I just love it when I’m thinking out all of this intricate solutions, and ignores the fact that there might be a plugin doing just what is wanted already.

Of course there a ton of plugins, so it’s hard to keep track, but I still find my (ignorant?) approach of suggesting other stuff amusing (at least to myself).

[moz]

It is great to have different solutions

[totholz5D]

@moz

Are U looking for the plugin Hider?

no the hider plugin has an option to toggle the tab bar
which is not the same as the tab title bar (which show the title of the note with the full path)

[totholz5D]

@holroy

Eh… If it doesn’t show or take up space when not hovered, then what would you hover to make it re-appear?

Yes you’re right about that, that’s why I though the easiest solution would be to make the background of the bar transparent…
but it seems trickier that I originally thought

[totholz5D]

@holroy

Another option could possibly be to make the entire title bar float to the right of the window on top of other content with just a icon or something like that, and then when hovered it’ll take it’s natural space and floatiness (is that even a word ).

this sound good, the right 1/8th of the full screen obsidian window is always empty and thus if the bar was only on this side it wouldn’t hide any content…
How would you do this?

I tried this

.view-header {
float: right;
width: 15%;
}

but is doesn’t work (title not visible anymore on hover), but the empty bar is still overlapping the content.

[holroy]

The elements we’re messing with are a .workspace-leaf-content which has two children .view-header and .view-content. This main element is a flex element, so using float doesn’t really do anything there. You could start messing with changing the ordering and direction of the flex, but I’m not sure how to do that properly.

However, I discovered that using position: absolute seems to be a fairly straight forward and hopefully reliable solution. So toss the following into a CSS snippet and enable it:

.workspace-leaf-content:has(.no-view-header) {

    & .view-header {
        position: absolute; 
        top: 5px;
        right: 20px;
        width: 50px;
        /* background-color: blue !important;  /* */
        & div {
           display: none;
        }

    }
    & .view-header:hover {
        position: inherit;
        top: inherit;
        right: inherit;
        width: 100%;
        background-color: inherit !important;
        & div {
            display: inherit
        }
    }
    & .no-view-header {
        padding-top: 0px;
    }
}

And to use it, add no-view-header to the file in question. Now it’s defaulting to hide the entire header, and you need to hover over a box which is around 20x50 pixels large in the upper right corner. If you want to see the box remove the /* in front of the first background-color. (And I reckon one could work a little bit more to potentially create a nicer box/area potentially with some text/icon/…, but it do work with not showing anything)

When you hover over that box, it’ll display the entire header as usual, and the header will work as usual until you leave the header-box at which point it’ll hide again.

To claim even a little more space, I removed the padding at the top of .view-content box which is the point where the .no-view-header is actually inserted.

Hope this works according to your expectation, as I’m more of a CSS hacker than anything else…