RadFormDecorator – New Styling Options for WebKit Browsers

I am happy to announce that with Q3.2009 SP1 we have added a new important styling option for the scrollbars of textboxes and overflown <div /> elements for Apple Safari and Google Chrome:

If you are running a custom skin and would like to use the new functionality, here are a few easy steps to upgrade:

1. Make sure that you are using Q3.2009 SP1 (2009.3.1208.35).

2. Open [RadControlsInstallationRoot]/Skins/FormDecorator.css – the base stylesheet of RadFormDecorator and go to line (Ctrl + G) 612, i.e. where the "ScrollBar CSS Settings for WebKit" code comment is.

3. Copy the CSS rules from line 612 to the end of the file into your external base stylesheet of FormDecorator, or if you do not use external base stylesheet – at the bottom of your FormDecorator.SkinName.css file.

4. Open any skin of FormDecorator ([RadControlsInstallationRoot]/Skins/SkinName/FormDecorator.SkinName.css) and search for the "Skin-specific Scrollbar Settings for WebKit" comment. In our Default skin it is located on line 340.

5. Copy everything from that line to the end of the file into your FormDecorator.SkinName.css file. Make sure that it is after the rules from step 3.

6. Replace the occurrences of RadForm_[SkinName] with RadForm_[YourSkinName] and reload the page in Apple Safari or Google Chrome. At this stage your scrollbars will be decorated, but the up, down, left and right arrows of the scrollbars will be missing, so proceed to step 7.

7. Unlike the scrollbar customization in Internet Explorer, in WebKit browsers it is possible to use images for any part of the scrollbar (they are actually treated as pseudo elements (element::pseudo-element)), so we have placed the arrow images in the [RadControlsInstallationRoot]/Skins/SkinName/FormDecorator/ButtonSprites.gif as shown on the image below:

What you need to do now is to open your ButtonSprites.gif file in PhotoShop, change the color mode to RGB (Image > Mode > RGB Color) and add the arrow images in it. Make sure that the top and left offset of the arrows within the sprite is the same as in our skins.

8. When you are done, just flatten the layers (Image > Mode > Indexed Color...), save the file and reload the page. If steps 1 - 7 have been followed exactly, you will now have brand new styled scrollbars for Apple Safari and Google Chrome.

Detailed information about scrollbar styling á la WebKit is available on the official WebKit website.