XF 2.2 How do I make the scroll bar a bit wider?

[Spartan]

and change the color

 

[Ozzy47]

The scrollbar on the right?

 

[Spartan]

The scrollbar on the right?

Yes

 

[Ozzy47]

That comes from the browser I believe.

 

[Taylor J]

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Pretty sure it will only work with webkit based browsers (it does nothing on Firefox / Zen)

 

[CedricV]

I know you can style it in the extra less, but I’m not sure about the width. I’ll test it out this weekend and report back.

 

[CedricV]

I did some testing.

:root {
    scrollbar-color: hsla(var(--xf-paletteColor1)) hsla(var(--xf-pageBg));
    scrollbar-width: thin;
}

There's not much options to set the width. The only three things it accepts is thin, auto and none. You can't set it to px or %.

Perhaps someone else can pitch in a better solution though.

 

[MapleOne]

There's not much options to set the width.

Here is what I use, see it working at dn(dot)ca

/* Yellow Navigation Bars */
:root {
--basecolor: #ffaf1b;
--pagewidth: 90%;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
background: var(--basecolor);
}

 

[CedricV]

Here is what I use, see it working at dn(dot)ca

/* Yellow Navigation Bars */
:root {
--basecolor: #ffaf1b;
--pagewidth: 90%;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
background: var(--basecolor);
}

Sweet. That actually works: