tips and tricks for movable type
amy's css scrollbar cheatsheet
June 13, 2002
Found this over yonder at ScriptyGoddess: Amy's cheatsheet for coding your scrollbar CSS.
BODY {
scrollbar-base-color: MEDIUM;
scrollbar-face-color: MEDIUM;
scrollbar-track-color: BACKGROUND;
scrollbar-highlight-color: LIGHT;
scrollbar-3dlight-color: MEDIUM;
scrollbar-shadow-color: DARK;
scrollbar-darkshadow-color: MEDIUM;
scrollbar-arrow-color: DARK;
}
scrollbar-base-color: MEDIUM;
scrollbar-face-color: MEDIUM;
scrollbar-track-color: BACKGROUND;
scrollbar-highlight-color: LIGHT;
scrollbar-3dlight-color: MEDIUM;
scrollbar-shadow-color: DARK;
scrollbar-darkshadow-color: MEDIUM;
scrollbar-arrow-color: DARK;
}
Handy to keep in a text file on your desktop!
Comments
Is it possible to apply stylesheet attributes to the scrollbar generated by a dropdown box? I only seem to get it on the browser and on textareas.
I would also like to change the highlight color from Windows blue to something else.
Dd
I don't think that's available yet, just changing things like background-color or color.
<select style="background-color: red; color: white;">
when you customize the scrollbar, how can you get rid of that right-sided color such as on a whitebackground..you see a black strip of line on the very edge of the window. how can i have that blank so all you see are 2 scroll arrows and no tracker whatsoever.
Does it work to make every color definition #FFFFFF, except for the arrows?
yep that will do the trick !
I just started doing weblog. I understood the use of scrollbar colors, but it for some reason , it only applied to comment box scroll bar. how do i get it to apply to the main window scroll bars, etc?
thanks!
Instead of the BODY class (as in the example), create an HTML class to hold the scrollbar CSS definitions.
hmm... perhaps a small example of that could help? :-D Where do I place the HTML class in: in the CSS, in main index, or ....? Thanks girlie.
In your stylesheet template.
Just use the "cheatsheet" above, changing BODY to HTML.
How do you get rid of the scrollbar at the side?
To get rid of the scrollcar at the side use:
style="overflow: hidden"
or style block
BODY {
overflow: hidden;
}
or scripting...
document.body.style.overflow="hidden";
The easiest way I've found to make colored scrollbars is to add scrollbar-base-color: #color; to your body tag. Whatever color you use it just uses for everything and makes a nice scrollbar for you. Check it out, it's super easy.
If you are trying to achieve 100% CSS validation, this is not possible with this scrollbar snippet.
Not for nothing, it's a great idea, and I will be using it, however, I am going to see if there is a way to get 100% valid CSS and still use the scrollbar.
Hi, I am trying to create two tables, side-by-side, in the middle of a .cfml page. The table on the right is too wide to fit comfortably into the page, so I am trying to use scrollbars to slide it into the first table, from right to left. I have looked at all sorts of possible solutions, including
Thanks kindly in advance,
Scott
can you eliminate the horizontal scroll bar only, keeping a vertical scroll bar. asked another way, can you insert a verticle scroll bar only?
Yes:
overflow-x: hidden;
or vertical:
overflow-y: hidden;
;-)
Excellent! Thanks.
Is it possible through CSS to remove scrollbars so that they are not displayed even if page content cannot fit into the window? This can be done using html body tag scroll="no", but it only works in IE. That is why I need to do it with CSS for cross-browser support.
Thank you in advance
Oh I just found the solution (sory for taking your time) All that is needed is to put a style tag in the body tag like this:
style="overflow:hidden"
Yeah, sorry to backtrack about 9 months, but when it comes to drop down menus, you would be better creating a "pop-up" division (as in you position it above the trigger using z-index and then hide it using visibility:hidden) which can contain pseudo-menu items which change as you mouseover them. This way you can pretty much have any type of menu you like: background images, font/size/weight changes, semi-transparent menus etc.
kiddanger and Rob, I love you!!! I've been looking all day for this info! If I wasn't married already I'd propose to both of you.
Re:
'To get rid of the scrollcar at the side use:
style="overflow: hidden" '