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

Support
21

@uxamanda

I still don’t get where did my borders from the left and right are coming from, i mean i’m using your theme, which don’t have it:

v0.7.1-updates
v0.7.1-updates1024×653 69.4 KB

But on mine, it appears, like wtf

2020.08.23-21.31.47.screenshot
2020.08.23-21.31.47.screenshot1823×1048 89.7 KB

I don’t have this grey (#1D2024) set up anywhere, so this is turning out to be very nonsense lol

This is the last thing i want to setup, it is so frustrating i’ve been all my evening looking at these haha

22

This isn’t actually the border i point at the image. Cause i set this one to be my “white” var color, 1px solid, and it turns like this:

2020.08.23-21.35.25.screenshot
2020.08.23-21.35.25.screenshot398×1017 31.5 KB

The grey one i’m refering to still apears.

23

One thing i noted is that if i use the cursor from the development tools to appoint to the bottom of the grey border i’m refering to, it shows that the bg color is #1d2024, which is the one i’m trying to get rid of

Then, on my userchrome.css, my

body { background-color: #FFF !important; font-size: var(--base-size-16) !important; }

The body background color is useless, i set it on white on purpose, but it doesn’t do any change, no matter which color or var i use. I guess problably these whole thing is an issue on the bg color of Joplin which is not being set?

2020.08.23-21.39.48.screenshot
2020.08.23-21.39.48.screenshot1920×1080 212 KB

24

If i remove the whole “body” part on the css, it remains exactly the same, so this tag is pretty much doing absolutely nothing…

25

I GOT IT! YAY

Thanks yall for help @dpoulton @uxamanda i appreciate it very much!

2020.08.23-21.56.04.screenshot
2020.08.23-21.56.04.screenshot1823×1048 36.2 KB

2 Likes
26

I finished my styles @dpoulton @uxamanda, in case any of you want to have a look, i uploaded on my GitHub:

I think it turned out really nice!

27

This looks really nice! Good job, love all the icons.

1 Like
28

@hrqmonteiro I just noticed you got the selected colors to change. How did you end up solving that?

29

I had to look through all the #react styles on the development section and try one by one, i ended up finding that the one who colors the body is, in fact, this one:

#react-root>div>div {
    background-color: var(--black) !important;
    font-size: var(--base-size-17) !important;
}

So, one can completely remove the

body {
}

section cause is making no changes at all.

30

Oops, my mistake, now i found that you were actually asking about the selected colors notebook. Sorry, is late and i worked all day haha, thought you were refering to the colors on the grey areas i couldn’t find.

Actually this one (selected notebooks bg) i wasn’t able to find, unfortunately. I just built the theme upon Dracula’s theme, which has the grey color on default, and i thought it matched my colorscheme better than the default (with the blue color).

1 Like