[Previous entry: "Captain Kangaroo"] [Cliffs - Home] [Next entry: "Antichrist"]

01/25/2004: "Eye Candy"

Repeat visitors to this site will, no doubt, have noticed the new color scheme and graphics. Thanks to CSS, changes to "Eye Candy" are quick and easy. One thing gave me some problems, and I'd like to share the fix because I think it would be useful for a lot of bloggers. The problem comes up when you decide you want to decorate your scrollbars (IE only), and you're using xhtml so you can syndicate your blog. Click more.. below.

If your pages are xhtml, you can't use the CSS body reference to decorate (color) your scrollbars as you would in html, because the CSS scrollbar properties are nonstandard and xhtml is "strict" to IE. The work around for IE, the only browser that supports scrollbar decoration through CSS (90% of my traffic), is to refer to the body tag within the html tag. Here's what it looks like:

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 18px; color: #000033; background-color: #6699CC; margin-top:0px;}
html, body {
scrollbar-3d-light-color: #336699;
scrollbar-arrow-color: #99CCFF;
scrollbar-base-color: #003366;
scrollbar-dark-shadow-color: #330033;
scrollbar-face-color: #336699;
scrollbar-highlight-color: #993366;
scrollbar-shadow-color: #660033;
}
td { font-size: 11px; line-height: 22px}
h1 { font-size: 14px; color: #660033; line-height: 14px; padding: 0px;}
.subject { font-weight: bold; font-size: 12px}
.time { color: #425E51}

and so on...

Then just play with the colors until you get what you want. You almost have to see it work for this to make any sense, but here's an explanation of what these scrollbar colors mean:

scrollbar-3d-light-color: #ff8000; the color on the outside providing the shading
scrollbar-arrow-color: #000080; the arrow color
scrollbar-base-color: #000080; the base color but is covered by all the other colors
scrollbar-dark-shadow-color: #24369C; shadow to the right of the scrollbar
scrollbar-face-color: #99B3CC; the color of the scrollbar
scrollbar-highlight-color: #FFFFFF; color that goes immediately around the scrollbar
scrollbar-shadow-color: #24369C; provides the shadow in conjunction with the dark shadow

Have fun.

Note to readers:
Readers with Internet Explorer can use these links to "Add to Favorites." The rest of you are on your own. Remember, Cliffs Notes dot Info.
Click here to add this page to your favorites!
Click here to add this site to your favorites!

If you've enjoyed Cliff's Notes, click here to find lots more blogs. This link opens in a new window in case you realize you were better off here.
Last but not least, if anything interesting comes to mind about the above post that you would like to share, blurt it out in the form below. If you enter a "homepage," your "name," as you entered it, will become a link to your site. E-mail addresses, if entered, may be harvested by spammers.

Replies: 5 Comments

Thanks, Milo.

Cliff said @ 01/27/2004 06:33 PM CST

Here's your stylesheet pared down..

body ( font: normal 10px/18px Verdana, Arial, Helvetica, sans-serif; color: #003; background-color: #69C; margin-top:0px;)
html, body (
scrollbar-3d-light-color: #369;
scrollbar-arrow-color: #9CF;
scrollbar-base-color: #036;
scrollbar-dark-shadow-color: #303;
scrollbar-face-color: #369;
scrollbar-highlight-color: #936;
scrollbar-shadow-color: #603;
)
td ( font-size: 11px; line-height: 22px)
h1 ( font-size: 14px; color: #603; line-height: 14px; padding: 0px;)
.subject ( font-weight: bold; font-size: 12px)
.time ( color: #425E51)

.textarea (
background-color: #9CF;
)
.sidebar (
background-color: #369;
color: #6CF;
)
a (
color: #603;
text-decoration: none;
)
a:hover (
color: #603;
text-decoration: underline;
)

Milo said @ 01/27/2004 03:35 AM CST

The pea green is the 'opposite' color to the purple you used for the scroll bar track color.

Milo said @ 01/27/2004 03:19 AM CST

OK Milo, but isn't there enough pain in the world without having to translate to and from shorthand hex?

More helpful, in my opinion, would be to tell us where the pea green is coming from that shows up when you "mouse down" in the background of the scrollbar. It isn't the html page background; I checked.

Cliff said @ 01/26/2004 05:32 PM CST

Colors in CSS can be shorthand thus...

#FF0000 becomes #F00
#336699 becomes #369

When there are three pairs of letters or numbers you just use one.

Milo said @ 01/26/2004 01:12 PM CST