Change Scroll Bar Colour?

Enjay

Hi, I've been working on customising a campaign site and I've hit a stumbling block.  I've searched, and I can't find an answer.  Maybe it's not possible.

What I want to do is change the colour of the browser window Scroll bar.  My site has a blue theme, but OP gives all sites a brownish kind of colour to the scroll bar.



While I'm at it, I've managed to change the colour of the top menu using code from here: https://post-reforge-css.obsidianportal.com/wikis/topnav but there are a few elements that I can't change and code for them was not listed on the above page.  I just need to know the element names so that I can change their colour. I'm talking about the little down arrow beside the menus, and the two elements that are grey in my picture.



Thanks for any help. :)

ragnarhawk

Hi @Enjay,

Not sure what isn't working without seeing your page(s), but I found that the following code changed the grey over Help to red in one of my campaigns:

---------------------------------------

.top-bar-section .dropdown li a:hover {background-color: rgba(255,40,40,1) !important;}

---------------------------------------

I hope this helps narrow down some of your issue.

Enjay

Thanks for the reply.  I think I actually managed to find that one myself. It looks familiar anyway. 

I can't check right now but, if I recall correctly, that will change the colour of the menu button when the mouse cursor is over it, but as soon as I move the mouse cursor down into the actual menu, the button - which is now down, but no longer being hovered over - goes the grey colour in my screenshot.  The individual menu entries are a different element too, I think, so they go grey when hovered over (again, as per my screenshot).  Although not shown in the screenshot, my mouse cursor was over the "Help" entry when I crabbed the screen.

I've tried inspecting these elements of the website but it's hard to do because they change dynamically.

Abersade

Hmm. Not sure I've ever tried to change the scroll bar before...

Be right back.

Abersade

At it's most basic, this can be done using the following css:

::-webkit-scrollbar {background-color: black;}

::-webkit-scrollbar-thumb {background-color: red;}

::-webkit-scrollbar-corner {background-color: black;}

 

That said, this is... clunky. Many adjustments don't work at all, like setting a background image as the thumb. Others, like setting the scrollbar as transparent, work but not in the way you'd expect.

Attempting some further tweaking, I think I got to a nice result using the following css:

::-webkit-scrollbar {background-color: black;}

::-webkit-scrollbar-thumb {background-color: red; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4); border-radius: 6px 6px 6px 6px;}

::-webkit-scrollbar-corner {background-color: black;}

Enjay

Oh wow, thank you so much.  That does indeed work... mostly.

By "mostly" I have just figured out (at least partly) why nothing I was doing worked.  I copied/pasted your code into my capaign and it didn't seem to work.  However, spurred on by the fact that, unlike me, you obviously know what you are doing, I tried a different browser and - It Worked!



So, yes, the code you posted does the trick, and looks good in Chrome.  I can certainly adapt it for my colour scheme.  However, Firefox seems to ignore it entirely.  I don't know why because the default OP colour scheme obviously manages to change the scroll bar appearance in Chrome and Firefox.

Abersade

It doesn't work in Firefox?

...

So it doesn't, you are correct. I'll see what I can do to fix that and update here.

Abersade

Ugh, this just straight up doesn't work in Firefox. Unsupported via CSS, though it IS supported via JavaScript. Unfortunately I am not the person to ask for help with JavaScript questions, you'd get a much better answer regarding JS from someline like Nuadaria on the discord server.

Enjay

No worries.  I really appreciate you taking the time to help.  Thank you for letting me know that CSS can't do it in Firefox.  That alone will save me time and effort.

ElMuggs

Just a headsup that while you can do this with CSS very few browsers support this feature anymore!

It mostly worked for Internet Explorer but modern browsers/mobile and Apple users will not have this feature working.... so don't go pulling your hair out over it.

https://caniuse.com/css-scrollbar shows which browsers using which code.