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

Customize the scrollbar in SMF

Mick in Tutorials
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
Code: [Select]
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  cursor: pointer;
}

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

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

With border-radius
Code: [Select]
::-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 

Share This Post

Mick

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

Dave (Dim)
Jun 15, 2013
Works in opera 15 (blink) as well. And in stock android browser (JB) for things like shoutbox etc that bring up scrollbars.
1

Mick
Jun 16, 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

Dave (Dim)
Jun 16, 2013
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.




go up