Customize the scrollbar in SMF

in Tutorials on 10 Jun 2013

These days, customizing scrollbars is back, but it's WebKit this time. It's a bit better now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar). I came across this cool little snippet a while back and wanted to share.

Below i put together two different sets of code, with rounded corners and without. Simply add the code below to the bottom of your index.css file and replace the colors to your needs.

It seems to only work with Safari and Chrome



Without border-radius
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  cursor: pointer;
}

::-webkit-scrollbar-track {
  background-color: #ddd;
}

::-webkit-scrollbar-thumb {
  background-color: #72c1ae;
}


With border-radius
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  cursor: pointer;
}

::-webkit-scrollbar-track {
  background-color: #ddd;
  -webkit-border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #72c1ae;
  -webkit-border-radius: 10px;
}



idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.

idesignSMF.com | SimpleMachines.org



3 Comments

Works in opera 15 (blink) as well. And in stock android browser (JB) for things like shoutbox etc that bring up scrollbars.
#1
Quote from: Dave (Dim) on 15 Jun 2013
Works in opera 15 (blink) as well. And in stock android browser (JB) for things like shoutbox etc that bring up scrollbars.
I tested it with Opera but it may be outdated. Thanx for the feedback.
#2
theres a new beta out of opera. Opera 15 under the next stream. Its basically chrome. Using blink engine.

presto is no more :(

Theres a minor revolution, theyve stripped out everything including bookmarks and integrated mail :(
#3

rocket_launch

Free Forever. Our themes will always be free. Forever. Period.