Professional & Impressive. We provide top quality free SMF themes with excellent support.

Customize the scrollbar in SMF

Mick in Tutorials on Jun 10, 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;
}

Tagged with: color scrollbar smf custom tut 


Mick

Mick G

idesignsmf.com

    

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF 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 and has a weakness for Tacos and Pizza.


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

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




Latest Discussions

Join the conversation

Our Most Popular Features