Customize the scrollbar in SMF

Mick in Tutorials on June 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



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.


Advertisement  


Hot on idesignSMF

Responsive SMF Themes. We're currently working on brand spankin' new Responsive SMF themes for SMF 2.1

go up