Change scrollbar colors

Need some custom code changes to the phpBB core simple enough that you feel doesn't require an extension? Then post your request here so that community members can provide some assistance.

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
User avatar
Onnozel Manneke
Registered User
Posts: 145
Joined: Mon Feb 01, 2021 8:37 pm
Location: Walhalla
Name: Loki Heimdall

Change scrollbar colors

Post by Onnozel Manneke »

Hey all,

I searched google for a while, and found a working css code to change the scrollbar colors.
Tested it with: Firefox, Edge & Chrome

Code: Select all

/*  Browser Scrollbar Colors */
/* Chrome, Edge */
::-webkit-scrollbar {
    width: 15px !important;
    height: 15px !important;
}
::-webkit-scrollbar-track-piece  {
    background-color: #595959 !important;
}
::-webkit-scrollbar-thumb:vertical {
    height: 30px !important;
    background-color: #0064c8 !important;
}

/*  Firefox */
html,body{
    scrollbar-color: #0064c8 #595959 !important;
}
/*  Browser Scrollbar Colors */
See the result here:

Image
Last edited by Onnozel Manneke on Thu Feb 25, 2021 8:37 pm, edited 1 time in total.
phpBB NL Extension translations on request.
Visit: https://www.phpbbnl.be

Image
User avatar
Gumboots
Registered User
Posts: 821
Joined: Fri Oct 11, 2019 1:59 am

Re: Change scrollbar colors

Post by Gumboots »

Can't see any content on your site, so can't check the results of the code there. I'll run it as a live test and check it out.
🇺🇦 Слава Україні! 🇺🇦 Героям слава! 🇺🇦
User avatar
Onnozel Manneke
Registered User
Posts: 145
Joined: Mon Feb 01, 2021 8:37 pm
Location: Walhalla
Name: Loki Heimdall

Re: Change scrollbar colors

Post by Onnozel Manneke »

Gumboots wrote: Thu Feb 25, 2021 7:52 pm Can't see any content on your site, so can't check the results of the code there. I'll run it as a live test and check it out.
Scrollbar on the right site...
phpBB NL Extension translations on request.
Visit: https://www.phpbbnl.be

Image
User avatar
janus_zonstraal
Registered User
Posts: 6618
Joined: Sat Aug 30, 2014 1:30 pm

Re: Change scrollbar colors

Post by janus_zonstraal »

I don't see a scrollbar?
Sorry! My English is bat ;) !!!
User avatar
Onnozel Manneke
Registered User
Posts: 145
Joined: Mon Feb 01, 2021 8:37 pm
Location: Walhalla
Name: Loki Heimdall

Re: Change scrollbar colors

Post by Onnozel Manneke »

Gumboots wrote: Thu Feb 25, 2021 7:52 pm Can't see any content on your site, so can't check the results of the code there. I'll run it as a live test and check it out.
janus_zonstraal wrote: Thu Feb 25, 2021 8:23 pm I don't see a scrollbar?
See first post: viewtopic.php?p=15680636#p15680636

PS: Not visible in mobile browsers like Android
phpBB NL Extension translations on request.
Visit: https://www.phpbbnl.be

Image
User avatar
janus_zonstraal
Registered User
Posts: 6618
Joined: Sat Aug 30, 2014 1:30 pm

Re: Change scrollbar colors

Post by janus_zonstraal »

Ok I see now, and the question is?
Sorry! My English is bat ;) !!!
User avatar
Onnozel Manneke
Registered User
Posts: 145
Joined: Mon Feb 01, 2021 8:37 pm
Location: Walhalla
Name: Loki Heimdall

Re: Change scrollbar colors

Post by Onnozel Manneke »

janus_zonstraal wrote: Thu Feb 25, 2021 8:58 pm Ok I see now, and the question is?
No question, just shared the code ;)
phpBB NL Extension translations on request.
Visit: https://www.phpbbnl.be

Image
User avatar
Gumboots
Registered User
Posts: 821
Joined: Fri Oct 11, 2019 1:59 am

Re: Change scrollbar colors

Post by Gumboots »

For god's sake, don't do that. They'll be demanding that you submit it as an extension. :lol:

Edit: Just threw it in Stylus for a live check. It works. Handy stuff.
🇺🇦 Слава Україні! 🇺🇦 Героям слава! 🇺🇦
foxtale
Registered User
Posts: 3
Joined: Sun Jan 19, 2025 6:59 pm

Re: Change scrollbar colors

Post by foxtale »

Onnozel Manneke wrote: Thu Feb 25, 2021 6:09 pm Hey all,

I searched google for a while, and found a working css code to change the scrollbar colors.
Tested it with: Firefox, Edge & Chrome

Code: Select all

/*  Browser Scrollbar Colors */
/* Chrome, Edge */
::-webkit-scrollbar {
    width: 15px !important;
    height: 15px !important;
}
::-webkit-scrollbar-track-piece  {
    background-color: #595959 !important;
}
::-webkit-scrollbar-thumb:vertical {
    height: 30px !important;
    background-color: #0064c8 !important;
}

/*  Firefox */
html,body{
    scrollbar-color: #0064c8 #595959 !important;
}
/*  Browser Scrollbar Colors */
See the result here:

Image
I'm using lucid lime theme on my forum. What file should i edit to use this code?
User avatar
thecoalman
Community Team Member
Community Team Member
Posts: 6599
Joined: Wed Dec 22, 2004 3:52 am
Location: Pennsylvania, U.S.A.

Re: Change scrollbar colors

Post by thecoalman »

Any of the the themes CSS files except for stylesheet.css. If there is common.css add it at the end. Hold ctrl and hit F5 when the browser window is open to refresh the page fully clear the browsers cache so you can see changes.
“Results! Why, man, I have gotten a lot of results! I have found several thousand things that won’t work.”

Attributed - Thomas Edison
User avatar
Sniper_E
Registered User
Posts: 1207
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey

Re: Change scrollbar colors

Post by Sniper_E »

I have a dark style so I use some dark colors for my scrollbars

Code: Select all

/* Scroll bar */
::-webkit-scrollbar {
	width: 14px;
	border-right: 1px solid #555;
}
::-webkit-scrollbar-track {
	background: transparent;
}
/* Indicator bar */
::-webkit-scrollbar-thumb {
	background: #222222;
	border: 1px solid #A18600;
}
/* Arrow buttons */
::-webkit-scrollbar-button:single-button {
	display: block;
	border-style: solid;
	height: 10px;
	width: 14px;
}
/* Arrow up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent #eac712 transparent;
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
	border-color: transparent transparent #FFF0A5 transparent;
}
/* Arrow down */
::-webkit-scrollbar-button:single-button:vertical:increment {
	border-width: 8px 8px 0 8px;
	border-color: #eac712 transparent transparent transparent;
}
::-webkit-scrollbar-button:vertical:single-button:increment:hover {
	border-color: #FFF0A5 transparent transparent transparent;
}
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
foxtale
Registered User
Posts: 3
Joined: Sun Jan 19, 2025 6:59 pm

Re: Change scrollbar colors

Post by foxtale »

Sniper_E wrote: Mon Jan 20, 2025 3:10 pm I have a dark style so I use some dark colors for my scrollbars

Code: Select all

/* Scroll bar */
::-webkit-scrollbar {
	width: 14px;
	border-right: 1px solid #555;
}
::-webkit-scrollbar-track {
	background: transparent;
}
/* Indicator bar */
::-webkit-scrollbar-thumb {
	background: #222222;
	border: 1px solid #A18600;
}
/* Arrow buttons */
::-webkit-scrollbar-button:single-button {
	display: block;
	border-style: solid;
	height: 10px;
	width: 14px;
}
/* Arrow up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent #eac712 transparent;
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
	border-color: transparent transparent #FFF0A5 transparent;
}
/* Arrow down */
::-webkit-scrollbar-button:single-button:vertical:increment {
	border-width: 8px 8px 0 8px;
	border-color: #eac712 transparent transparent transparent;
}
::-webkit-scrollbar-button:vertical:single-button:increment:hover {
	border-color: #FFF0A5 transparent transparent transparent;
}
thecoalman wrote: Mon Jan 20, 2025 12:32 pm Any of the the themes CSS files except for stylesheet.css. If there is common.css add it at the end. Hold ctrl and hit F5 when the browser window is open to refresh the page fully clear the browsers cache so you can see changes.
Many thanks! ;)
Added the code to common.css and it's working great! :P

Return to “phpBB Custom Coding”