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

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;

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;

Screenshot 2023-06-02 at 20.31.13

Amazing, Thank you so much!

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)

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

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

1 Like

its perfect! Thanks again!

1 Like

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.


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?

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.

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

Copying/pasting this shows us:

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

Hope this helps!

1 Like

You’re the greatest Ty again!!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.