howto_user (howto_user) wrote in s2howto,

[paidaccount] Custom Scrollbars

Paid Accounts Only
The following tutorial requires creating and editing a custom style, which in turn requires a paid, permanent, or early adopter account. Please read What are the paid account benefits? and How do I buy a paid account? to learn about the paid account benefits and how to buy a paid account.

One of the interesting layout options possible with Internet Explorer v5.5 and beyond is the ability to manipulate the colors in the scrollbar by means of CSS. With this tutorial, you can create a seamless look by matching your scrollbars and journal layout.

This tutorial will replace the print_custom_head function. This new code will be placed in a theme layer. If you already have one of these for your style, you can simply edit it. If not, you will need to create one by following the instructions in the Theme Layer tutorial.

Now, you will need to add the following code to the theme layer. Copy and paste the following code into the layer, making sure to include everything.

function Page::print_custom_head() {
<style type="text/css">
html {
scrollbar-base-color: color;
scrollbar-track-color: color;
scrollbar-face-color: color;
scrollbar-highlight-color: color;
scrollbar-3dlight-color: color;
scrollbar-darkshadow-color: color;
scrollbar-shadow-color: color;
scrollbar-arrow-color: color;

Where color would be the hexadecimal value of a color; for example, "white" is equal to "#ffffff". You can find a hexadecimal chart of colors to use here.

To point out where each color area change occurs, here is a small diagram:

This tutorial will work with versions of Internet Explorer later than 5.5. It may also work to some extent with other browsers, but is only fully supported by Internet Explorer 5.5. For other browsers, it is dependent on supporting scrollbar color CSS.


Compile your layer, and it's ready to use. You will need to apply your theme layer via the Customize Interface in order for your changes to take effect.

Written by </a></b></a>opiummmm. Adapted for S2 by </a></b></a>legomymalfoy.

Tags: - all styles, paid accounts only, scrollbars
Comments for this post were disabled by the author