Hi. I use the Hider plugin a lot. And sometimes I would like to hide certain ui elementes only for certain notes. For example when viewing a MOC. Is it possible? For example, using a CSS snippet or using some other approach.
In summary, I want to know if it is possible to hide certain UI elements depending on my current open note.
Thanks 
Hi everybody.
Obsidian has an option that allows us to toggle the tab title bar:
I want to use that option but only fo specific documents. Therefore, I need a css snippet to achieve this. So, does anybody knows what css code we should use in order to achieve this. Thanks.
I think this should work:
/* Hide top bar */
.workspace-leaf.mod-active > * > .view-header {
border-bottom: 0;
height: 0;
overflow: hidden;
transition: height 250ms;
}
I haven’t tested it in desktop but it works on my tablet. My Obsidian CSS knowledge is not strong. I made the above by removing parts from this snippet I was given:
/* Hide top bar when keyboard is open on mobile (includes tab bar on tablet).
Workaround for https://forum.obsidian.md/t/option-to-show-hide-top-bar-s-when-note-is-scrolled/69610?u=cawlinteffid
Courtesy of sailKite https://discord.com/channels/686053708261228577/702656734631821413/1242571258881642547
Remaining border removed by me. */
.workspace-leaf.mod-active > * > .view-header,
body.is-tablet .workspace-tabs.mod-active > .workspace-tab-header-container {
transition: height 250ms;
.app-container:has(.mobile-toolbar) & {
border-bottom: 0;
height: 0;
overflow: hidden;
}
}
Hi, thanks for the reply. It kind of works but not really. As soon as I enable the css snippet, it will automatically hide the tab title bar of which ever note I have selected.
It hides the tab indeed, but what I am looking for is a way to only hide the tab when a specific note is selected. For example, by adding a the css snippet in the cssclasses property, and only said pages having its tab hidden.
But thanks again for the help.
Your reply is about a step away from implementing the change yourself — even if you don’t know much about CSS I bet you could modify the snippet to make it work the way you want. Want to give it a try?
Indeed. Full disclosure, I am an absolute noob in css.
I tried the following
.view-header {
border-bottom: 0;
height: 0;
overflow: hidden;
transition: height 250ms;
}
Now, this hides the tab for all notes. So, now I am just trying to figure out a way to make that snippet to not affect obsidian in a global way. i.e. I need to find a way for that snippet to only work when being explicitly called (in the cssclasess properties)
OK, I’m trying it myself and maybe it’s a little less easy than I suggested, if your knowledge is like mine. 
Still tinkering, tho.
You need to include the class that you will put in the “cssclass” field. So if the class is “example”, in the snippet somewhere you will put .example. I would first try putting it before or after the .view-header separated from it by a space. That makes it target something that has the second class and a parent at some level that has the first.
I’m remembering now that Obsidian’s interface is part of a separate hierarchy from the note content (or something like that), which makes playing a cssclass field for this harder. But it’s doable — the person who gave me that original snippet gave me another that does that. let me dig that out and see what we can do. I’ll paste the snippet here for reference if you want to experiment, and I’ll attempt it too. In this snippet the cssclass is “draft”.
/* Hide mobile toolbar when the "draft" class is applied, because when drafting I want the screen space more than I need the toolbar.
To dismiss the keyboard on phone when also using "Top bar hide when keyboard.css", swipe a sidebar out (even partway) and back.
Courtesy of sailKite https://discord.com/channels/686053708261228577/702656734631821413/1242662886967480351 */
.app-container:has(
.workspace-leaf.mod-active > * > * > .markdown-source-view.draft,
.workspace-leaf.mod-active > * > * > * > .markdown-preview-view.draft
) > .mobile-toolbar {
display: none;
}
Thanks, I tried the first method (adding a name like .example) but it didn’t work. Here is the code
.hide .view-header {
border-bottom: 0;
height: 0;
overflow: hidden;
transition: height 250ms;
}
I will try with the last snippet/draft you sent. I am sure we will figure this out.
Hmm, I’ve tried a few different things and I think it’s beyond my ignorant experimenting for now.
I can tell you these don’t work (I’m using “example” as the cssclass, and to save space I’m eliding the actual style rules after the first snippet):
.app-container:has(
.workspace-leaf.mod-active > * > * > .markdown-source-view.example,
.workspace-leaf.mod-active > * > * > * > .markdown-preview-view.example
) > .view-header {
border-bottom: 0;
height: 0;
overflow: hidden;
transition: height 250ms;
}
.app-container:has(
.markdown-source-view.example,
.markdown-preview-view.example
) > .view-header {
/* styles */
}
.app-container:has(
.example
) > .view-header {
/* styles */
}
.workspace-leaf > * > * > .markdown-source-view.example .view-header,
.workspace-leaf > * > * > * > .markdown-preview-view.example .view-header {
/* styles */
}
Sorry! I thought this was within my limited reach, but my knowledge of Obsidian’s structure is too limited for now. If you don’t manage it yourself, hopefully someone knowledgeable will come along to help.
Also, when you post code (like CSS) in the forum you’ll want to mark it as code so the forum doesn’t do anything funny with it (nothing did in your posts, but it’s still best to do). You do it the same way as in Obsidian: https://help.obsidian.md/Editing+and+formatting/Basic+formatting+syntax#Code
Thanks for the help mate. I also tried like 3 different implementations but no luck yet. Hoppefully we will have better luck tomorrow. As you mention, someone with more expertise in CSS will probably be able to give us a hand.
And thanks for the tip regarding marking code properly in the form. To be honest I didn’t know how to mark code in the forum. But now I do
Thanks for the help. Have a good night.
We had a bunch of discussion in another thread where you asked a question of someone who might have a solution. I’m going to move that conversation from there to here.
…And i’m going to merge this thread into your more general related one.
On my phone today so missing all the tinkering, but Holroy had something a bit back that could be used as is (with the cssclass) or adapted, I reckon:
Hi, good morning everybody.
Thanks for the info. Apparently it worked, finally 
So, here is what I did. Just copying the full snippet works. If you want to remove the hover function and just hide tab bar, just remove some lines. Here is the code I was left with:
.workspace-leaf-content:has(.no-view-header) {
& .view-header {
position: absolute;
top: 5px;
right: 20px;
width: 50px;
/* background-color: blue !important; /* */
& div {
display: none;
}
}
& .no-view-header {
padding-top: 0px;
}
}
However, just before posting this I gave it another try and discovered that there is something wrong with this implementation. I am using the AnuPpuccin theme. Here is how my tab title bar normally looks like
And here is how it looks when hiding the tab title bar via obsidian toggle option
However here is how it looks when using the snippet (without the hover functionality)
You can see the dotted line. I tried removing some lines from the snippet, and was left with the following code:
.workspace-leaf-content:has(.no-view-header) {
& .view-header {
position: absolute;
/* background-color: blue !important; /* */
& div {
display: none;
}
}
& .no-view-header {
padding-top: 0px;
}
}
And now we see a dotted line to the left
So my best guess is that the snippet we are using is just a work around, and not what obsidian actually uses to hide the tab title bar in the appearance settings
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.