Google Chrome, the browser we all love has just made a change in their most recent update that will impact many, many people.
They’ve decided to reduce the size of the default scroll bars to two pixels wide…
Strange? Sure is, now its almost impossible to see both vertical and horizontal scroll bars.
So what can we do about it?
- We can learn to live with the change.
- HELL NO, WE’LL MAKE OUR OWN SCROLL BARS!!!
Hidden in the depths of your user profiles lives the Custom.css stylesheet, this allows us to change parts of the browser experience with a little CSS tweaking. I’ve gone ahead and created a new scroll bar in the Custom.css sheet to fix this glaringly stupid change and below I’ll show you how.
First we need to identify where your Custom.css sheet is, depending on your OS this will be different.
Windows:
%LOCALAPPDATA%GoogleChromeUser DataDefaultUser StyleSheetsCustom.css
Mac:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
Linux (most flavors):
~/.config/chromium/Default/User/StyleSheets/Custom.css
Ok so you’ve located your Custom.css file, when you open the file though it is blank? What to do?!?
Enter in some CSS magic.
background-color: #EEE;
border-left: 1px solid #CCC;
-webkit-box-shadow: inset 0 0 12px rgba(0,0,0,0.3);
}
::-webkit-scrollbar{
width:10px;
height:10px;);
}
::-webkit-scrollbar-thumb{
background-color:#999;
}
::-webkit-scrollbar-thumb:hover{
height:50px;
background-color:#9F9F9F;
-webkit-border-radius:4px;
}
Save the file, reload a website with scroll bars and hey presto you’ll have great looking scroll bars again that are just a little special. When you roll over the scroll bars with your mouse you’ll notice it change colour slightly and the ends become rounded.
For those that are too lazy to copy and paste the above code into their Custom.css stylesheet I’ve also attached the above Custom.css file to this post for you to download.
Right click and select ‘Save link as…’ to save Custom.css
Now of course the code above is just standard CSS so play with your hearts content. Want two-hundred pixel wide pink scroll bars? Sure, with the correct CSS you can do it!
If you end up altering the above code then post it in the comments, I’d love to see the creative ideas people come up with!