January 2nd, 2006

[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;
}
</style>
""";
}

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.

[s2 features by layout] Quite Lickable

[s2 features by layout] Smooth Sailing

[s2 layouts by feature] Custom CSS

[ Go Back | List of Layouts | List of Features ]

This feature can be found on the "Custom CSS" area of the Customize Journal Style page, and enables you to override existing Cascading Style Sheets (CSS) rules (or to re-style your journal from scratch) by entering the rules directly into the input field. There is a limit to the amount of code that can be entered into this field; an extremely long style sheet may cause the Customize Journal Style page to timeout or fail to update. If this problem occurs, you will need to either optimize the size of the style sheet, or use an external style sheet host. This feature is available for all layouts:

[s2 layouts by feature] Order of Entries on Friends View

[ Go Back | List of Layouts | List of Features ]

The layouts listed below provide an option on the Customize Journal Style page to reverse the order of entries displayed on your Friends page (http://exampleusername.livejournal.com/friends). As described in this FAQ the default display for the Friends page is in reverse chronological order, according to server time (i.e., most recent entries first).

[s2 layouts by feature] Replacement Stylesheet URL

[ Go Back | List of Layouts | List of Features ]

This feature can be found on the "Custom CSS" area of the Customize Journal Style page and enables you to override existing Cascading Style Sheets (CSS) rules (or to re-style your journal from scratch) through the use of a style sheet hosted on an external server. You will need to use a web host that allows remote loading and hosting of style sheets. This feature is available for all layouts:

[s2 layouts by feature] Sidebar Position

[ Go Back | List of Layouts | List of Features ]

The layouts listed below feature a sidebar and allow you to choose on which side of the journal entries appear (right, left, or disabled altogether in Bloggish, Flexible Squares and Smooth Sailing). This option is found at the bottom of the Choose Journal Style page, under "3. Choose a Page Setup".