Change the 'selected notebook' background color on userchrome.css

Hello, i’m trying to finish my userchrome.css to match my linux rice colors, but i am having REAL difficulty changing the color of some elements:

2020.08.23-00.34.55.screenshot

This bg color i tried everything, i was able to use the

list-item-container: hover or the list-item-container-active:active` but it just changes the color when i press the mouse.

Using the Dev tools to grab the class has no effect too. Anyone could help me?

Also, this toolbar (which remains the default grey from dark theme) seems to have no effect when i change the values on their classes, too, could i be missing the correct one?

If you are referring to the main / search toolbar it seems to be controlled using,

 div.header {
     background: black;
}
1 Like

Thanks! Tried now and it worked.

Do you happened to know about the selected note background, too?

Trying it now but cannot find anything that changes it…

I know, right?..

I’m two days straight making the userchrome and userstyle to match my system.

So far i achieved everything, except for this things:

These grey borders i cannot find anything, neither the background from the notes/the bg for the selected note, too.

I scanned through all the CSSs i could find on the forum. The closest i got was from this Nord subtheme which have the following:

button:focus, input:focus, select:focus { outline: var(--nord-note-list-selected) auto 2px !important; }

For the selected notebook bg. But it doesn’t no nothing, actually. Is just useless lines lol.

I notice from this post that changing the active notebook background appears to have vexed @uxamanda and, in my opinion, if @uxamanda cannot find a way then there is no way!!!

Well, that’s unfortunate… But it’s ok. I can live with this color for the selected notebook.

But you seem to know more than me. About these borders i pointed on the screenshot, and the bg of the icons in toolbar menu, is there anything i can do?

I think there may be some styling that is not controlled by css but by the app programming itself. I could also be talking out my a*** because that is just a wild, speculative guess.

To stop anything over-riding the background of the toolbar icons you could try,

a.button {
background-color: black !important;
}

The !important bit stops anything later making changes. It’s crude and frowned upon but sometines effective.

a.button also has an effect on the editor toolbar icons but with your colour scheme hopefully that will not make any difference.

Tried that, unfortunately, no changes…

That surprises me because I use a light theme yet that css change does this to my toolbar, whether one of the options is selected or not.

2020-08-23 21_47_18-Window

Ha, I appreciate the confidence. I spent a while really trying to think of a clever way to change the selected notebook and could never figure it out. If you look at the HTML, the color is being applied programmatically and nothing in the markup seems to know it is selected. My best selection is to pick the theme you like with the best selected notebook color and start from there. I gave up on it since I know the new theme is coming soon. Hoping we will be able to get all the classes when need with that update.

1 Like

I changed these with

.header>*:nth-child(6){
    background-color: transparent !important;
}

In my case I was making the code view one clear, but you can use any color.

I think for what you are doing, this will work:

.header>*{
background: orange !important
}

The > means only change the direct children, so prevents unwanted cascading. I end up using that trick all over my CSS to select elements.

icon-bg

2 Likes

Do you mean i select a theme that does that (like the Nord, let’s say), and start editing from it?
If yes, how could i do it, i mean the “grabbing” of the theme?

I appreciate your help @uxamanda and @dpoulton

Now i am left only with these grey borders and areas and elements that i can’t change. Any help on that please?

The one on the right is:

#react-root>div>div>div:last-child{
border-left: 1px solid orange !important
}

I cannot for the life of me remember how I styled the one of the left... i'll keep looking. Mine is transparent, so somehow I got rid of it :slight_smile:

1 Like

Actually switching to other themes, I am not sure where your left border is coming from – it seems to be transparent by default?

Which code viewer are you using?

Also, re: the background of the notes in the list, I never figured those out either. I ended up changing the color palette of my theme to use those grays to make it all match. I did play around with opacity to make it blend better.

1 Like

I had this code set already, but mine was set to my default background color, so it should not appear this grey…

This is my code, in case you guys could have a look on it since i am no expert on CSS…

userchrome.css (8.1 KB)

That's actually a very valid point.

When is the new theme coming out?