News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Changing Mobile Scrollbar Colors

Started by Skhilled, May 20, 2022, 09:10:30 PM

Previous topic - Next topic

Skhilled

Hi, I can easily change the scrollbars in desktop mode without a problem. But I'd like to change them for mobile view. I have noticed the file "jquery.custom-scrollbar.css" and was thinking that may be the key to it. I tried adding the code I use for desktop mode to it but it doesn't work...code shown below.

I also notice that there are a few "skins" in that file. What are they for and how do you use them?

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #000000 #bd9851;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 15px;
  }

  *::-webkit-scrollbar-track {
    background: #bd9851;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #000000;
/*    border-radius: 5px; */
    border: 2px solid #8f6c2b;
  }
/*    *::-webkit-scrollbar-button {
      background-color:#f7a600;
      color: #000;
  } */
  /* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #000000 #bd9851;
  }

  /* Chrome, Edge, and Safari */
::-webkit-scrollbar {
      width: 16px;
      border: 5px solid #0e0e0e;

    }

    ::-webkit-scrollbar-thumb {
      background-color: #000;
      background-clip: padding-box;
      border: 0.05em solid #000;
    }

    ::-webkit-scrollbar-track {
      background-color: #bd9851;
    }
    /* Buttons */
    ::-webkit-scrollbar-button:single-button {
      background-color: #161515;
      display: block;
      border-style: solid;
      height: 13px;
      width: 16px;
    }
    /* Up */
    ::-webkit-scrollbar-button:single-button:vertical:decrement {
      border-width: 0 8px 8px 8px;
      border-color: transparent transparent #ffde74 transparent;
    }

    ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
      border-color: transparent transparent #ba964f transparent;
    }
    /* Down */
    ::-webkit-scrollbar-button:single-button:vertical:increment {
      border-width: 8px 8px 0 8px;
      border-color: #ffde74 transparent transparent transparent;
    }

    ::-webkit-scrollbar-button:vertical:single-button:increment:hover {
      border-color: #ba964f transparent transparent transparent;
}

Skhilled

I forgot to mention that it's for smf 2.1.2. :P

live627

I have no idea if this is even possible. Searching the thread title on Google did not yield any relevant results that I could see.

Aleksi "Lex" Kilpinen

I think I have seen some odd scroll bars on mobile sometimes, but most of the time a scroll bar on mobile comes straight from the browser.
EDIT: Something like this might be of help http://manos.malihu.gr/jquery-custom-content-scroller/
Slava
Ukraini!
"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

How you can help SMF

Skhilled

Thanks, you two. I've been trying and searching for more than a week and couldn't find anything. And, I think you're right about it coming from the browser because when I add the code I posted in index.css it only shows in Firefox and no other browser. But...it only shows if you are touching the scrollbar and not by default (just looking at it).

That link looks promising. I'll have to spend some time playing with it and see if it works. Thanks, again. :)

Skhilled

So, what is the purpose of "jquery.custom-scrollbar.css" in the default theme and what is the purpose of the "skins"?

Antechinus

Good question. I've been wondering the same thing.

Skhilled

In case you'd like to see it the site is below. If you tap it just right in Firefox's dev mobile mode you can see it works but not just looking at it.

https://docskillz.com/skins/index.php

Advertisement: