If there’s one homepage modification I’m asked the most often “how to” do … it’s “How do I make the scrollbars different colors?”

It’s an easy enough thing to do. Just keep in mind that colored scrollbars only work in Internet Explorer, not Firefox or any other web browser. If you use Firefox, you’ll never be able to see your nifty work … nor will anyone else who visits your IMVU page. If that’s not a big deal to you, though, then have had it and customize your IMVU page with them. This tutorial will show you how.

The Code

If you already know how to implement and modify the code, then you’re set with what’s below. Otherwise, highlight and copy the code below and paste it to a TextPad document.

<style type=”text/css”>
<!–
BODY {
scrollbar-face-color: #333333;
scrollbar-highlight-color: #333333;
scrollbar-3dlight-color: #666666;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #333333;
scrollbar-arrow-color: #FFFF66;
scrollbar-track-color: #666666;
}
–>
</style>

Edit the Code

Once you understand which piece of the code controls which part of a scrollbar, the code is very simple to modify.

From the top, the code breaks down like this:

Scrollbar Face Color: Change away, I’ve not yet seen anywhere that this color makes a difference, though.

Scrollbar Highlight Color: This is the color of the “boxes” that your up and down arrows are in.

Scrollbar 3d Light Color: The very top and left, thin line that goes against the box your arrows are in.

Scrollbar Dark Shadow Color: The color of the shadow that goes behind the Highlight, the 3d light, and the Shadow.

Scrollbar Shadow Color: Exactly opposite the 3d Light color – this is the thin line that goes against the very bottom and right side of the box your arrows are in.

Scrollbar Arrow Color: Just what it sounds like – the color of the arrows on your scrollbar.

Scrollbar Track Color: This is the color of the solid line that your scroll moves up and down… the background, more or less.

Edit & Use the Code

First, you will need to edit the colors used in the code so that they match what you’re looking for. Be sure to use hex decimal codes (e.g. #FFFFFF). You can grab the color codes you need from the hex color chart. All that you need to do is replace everything after # in each line to set the color.

Now, you’re ready to use the code. Make sure that you’re in “Edit” mode on your homepage. Then, scroll down to your message window and click the “Edit” button. Choose “Edit Html/CSS”.

Paste & Save

Paste your code into the dialogue that comes up, and click “Save”:

Make Adjustments

Easy-Peasy! You’ll probably want to adjust the colors slightly more until you have everything aligned just the way you like, but yay – you’ve now got a beautiful colored scrollbar. You’ll want to paste and save the code in each panel you want the colored scrollbar to show up in.