QUICK NEWS

{NEW} - A new css video is up.

{OLD} - New video courtesy of Skhilled, Thanks for posting it up.

Video of the week


Internal Links

SMF Sites

Quick Info

Changing Mobile Scrollbar Colors

Started by Skhilled, May 07, 2022, 07:32 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Skhilled

I can easily change the scrollbar colors for using the code below for PC's and laptops. I just put the code at the bottom of index.css. However, it does not work for responsive.css. How can I change it in responsive mode?

/* ===== 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;
    }

Bigguy

Somehow, when doing theme edits at WuB I changed the scroll bar by accident without using that code. Still not sure how I did that. It's back to normal now as that was awhile ago. Your code should work in responsive.css
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

Well, three's something else going on. LOL Look at the bottom of the site in FF, Opera, and Chrome. They all look different! The ".main_content_section" goes all the way to the bottom in FF but not the others. Furthermore, if you hover around the top of the Info Center in Opera it jumps leaving a big gap! LMAO

I don't know what the hell I did but I may have to crap this and start over.

Bigguy

Sometimes starting over is the best option. ;)
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

Update: I didn't have to start over but I did take it to an earlier backup which fixed the issues in how it looked different in the various browsers. It was either in index.template.php or boardindex.template.php. Either way, the last issue is resolved. Whew! I did NOT want to start over again. LOL

Bigguy

"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

Thanks. Now, I've got everything solved except for the mobile scroll bars and some other responsive issues. :(

Bigguy

I can't remember how I did it. It was a surprise to me when it happened.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

Now I think maybe I uploaded the wrong version files or something. Anyhow, this is the same site that I had issues upgrading to 2.1.2! So something really weird was going on:

https://www.smfhelper.com/index.php?msg=8921

Skhilled

I just noticed that in the Default theme there's a file called: jquery.custom-scrollbar.css. That's probably the best place for it.