Styling the left part of the 'workspace tab header' using css?

[Becca]

What I’m trying to do

Hello! I’m trying to target the ‘Workspace Tab Header’ but Only the leftmost side. It’s the portion which houses the ‘files’ search and bookmark icons by default?

Things I have tried

• I looked through the Common Selectors thread.
• I tried to find the css selector in the dev tools myself, and I can target the entire header, the icons, the space between the icons and the end of the header, but I haven’t been able to change the background color of only that portion of the header - which is my goal. I’ll attach an image below + the css i’ve tried.
• The minimal theme has colored the portion of sidebar I’m looking for so I’m trying to narrow down what section of their code does it, but really i’m just changing variables to see what changes since I only know basic css LOL

This is what I’ve got so far

.workspace-tab-header {
    background-color: green;
}

.workspace-tab-header-container {
    background-color: pink;
}

.workspace-tab-header-spacer {
    background-color: yellow;
}

.workspace-tab-header-container-inner {
    background-color: orange;
}

[ariehen]

This is on macOS, so we have the stoplights to deal with, but this area?

.mod-top-left-space .workspace-tab-header-container {
  background-color: pink;
}

[Becca]

Amazing, Thank you so much!

[Becca]

I didn’t realize at first but this colors the rest of the top bar as well - but only when the left sidebar is collapsed. Here’s a screenshot.

I didn’t notice because I rarely collapse the sidebar xD!

(with sidebar open)

(with sidebar closed)

[ariehen]

Oops. I missed it as well. This might be better depending on what you are going for.

.workspace-split.mod-left-split .workspace-tab-header-container {
  background-color: pink;
}

[Becca]

its perfect! Thanks again!

[ariehen]

I don’t know if you’ve seen FireIsGood’s excellent guide to the dev tools, but it’s well worth your time if you haven’t had a look yet.

Obsidian CSS Quick Guide

Obsidian CSS Quick Guide Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. The Developer Console Obsidian is technically like a website. As such, you can view the source like any other browser. While you are inside the Obsidian window, you can press ctrl+shift+i to bring up the develope…

[Becca]

So Question - I read that guide (super helpful) but there are some portions of the UI that I can’t click on - like the section of header from my original post?

The closest thing was an icon, so I clicked it and searched the elements section for the .workspace-split.mod-left-split .workspace-tab-header-container class(es) but couldn’t find them.

So I was wondering how you managed to find it?

[ariehen]

If I can’t find the area using the element inspector (the box with an arrow), I have a look in the Elements section expanding the > s as I go until something looks promising. Then I click in there and have a look at the Styles section to see what shows up. It’s not exact; the Styles section is hard to copy from and jumps around a lot, but you can usually get to what you’re looking for.

css kensa

You can also right-click and Copy selector to get an idea of what’s going on.

Copying/pasting this shows us:

body > div.app-container > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-left-split

Hope this helps!

[Becca]

You’re the greatest Ty again!!