Question about css to change view header

Custom CSS & Theme Design
1

Things I have tried

I am using Obsidian v0.11.3 on a Mac OS Catalina 10.15.7.

So far, I have looked various postings here in the forum about changing css for obsidian, and started a css file (currently empty) in my .obsidian folders, and I looked at the developer code.

What I’m trying to do

What I want to do is to change the section above the active pane (which I think is called the view header, if I understood the coding of the development file) to have it be a bright color (eg, yellow) for the pane that is the active, selected pane. I use the ‘light’ theme and all the pane headers are gray, but the active one has a simple blue line under it. That one blue line isn’t enough, however, and I’m constantly confusing which pane is the active one.

While I am familiar with HTML and CSS generally to do very simple things, I need help to know what to put in my css file to change this one aspect of my theme.

Thanks,
Mary.

2

This might depend a bit on any other theme settings you have enabled. You’re going to want something like this, though, I think:

/* inactive panes */
.workspace-split.mod-root .view-header {
    background-color: var(--background-primary) !important;
}

.workspace-split.mod-root .view-actions {
    background-color: var(--background-primary) !important;
}

/* active pane */
.workspace-split.mod-active .view-header {
    background-color: var(--text-highlight-bg) !important;
}

.workspace-split.mod-active .view-actions {
    background-color: var(--text-highlight-bg) !important;
}

I’d try to stick with var(--something-something) type colours to keep them consistent with your theme, but you can also just switch that to a conventional #abcdef colour.

A bit of fiddling to get the colours to look nice will probably be necessary.

1 Like
3

Thanks! I’ll give it a try.

4

Screen Shot 2021-03-09 at 9.46.26 AM
Screen Shot 2021-03-09 at 9.46.26 AM864×1244 84.4 KB

Hey Ryan -

This (in the image) is the entirety of what I have in my css code. There are no other snippets or plug-ins applied because this is my first attempt at doing anything to change the appearance or functionality of my vault.

So when I change the inactive panes to --blue instead of --gray, they all show up blue. But the active pane never shows up --yellow (or any other color except what the inactive panes color is).

In other words, the ‘inactive panes’ part of the code seems to be working but the ‘active panes’ part of the code doesn’t work.

I’m open to suggestions.
Thanks,
Mary.

5

Sorry, I made a mistake. The active pane is targeted with .workspace-split.mod-active, but the inactive ones are .workspace-leaf.mod-root. What I pasted previously tried to just use .workspace-split for both.

I also added a selector that eliminates a leftover shadow:

/* inactive panes */
.workspace-split.mod-root .view-header {
    background-color: yellow;
}

.workspace-split.mod-root .view-actions {
    background-color: yellow;
}


/* active pane */
.workspace-leaf.mod-active .view-header {
    background-color: red !important;
}

.workspace-leaf.mod-active .view-header .view-actions {
    background-color: red;
}

.workspace-leaf.mod-active .view-header-title-container:after {
    background: none;
}

.workspace-split.mod-root .view-header-title-container:after {
    background: none;
}
6

Ok - Thanks again. I’ll let you know how it goes.

M.

7

I finally remembered to make these changes and it worked perfectly. Thank you again.

M.

2 Likes