Change Scroll Bar Colour?

Enjay
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. :)



Screenshot

Comments

  • ragnarhawk
    Posts: 168

    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
    Enjay
    Posts: 14 edited December 2023

    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. frown

    Post edited by Enjay on
  • Abersade
    Abersade
    Posts: 421

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

    Be right back.

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 421

    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;}

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Enjay
    Enjay
    Posts: 14 edited December 2023

    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.

    Post edited by Enjay on
  • Abersade
    Abersade
    Posts: 421

    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.

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 421 edited December 2023

    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.

    Post edited by Abersade on

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Enjay
    Enjay
    Posts: 14

    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
    ElMuggs
    Posts: 61

    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.

    DM of The Domains of Dread Council Meeting (...a Comedic Misadventure though the mists of a re-imagined Ravenloft! ) - COTM Feb 2023! 

Sign In or Register to comment.

April 2024
Season of Strife

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions