Scrollbar Color For Iframes

[magicz69]

How do i change the scrollbar color of iframe ? i tried putting this on the main page and the source page but the scrollbard color still did nt change ..

<style type="text/css">
body
{
scrollbar-face-color:#FEEECC;
scrollbar-arrow-color:black;
scrollbar-track-color:#FEEECC;
scrollbar-shadow-color:#FEEECC;
scrollbar-highlight-color:#FEEECC;
scrollbar-3dlight-color:#FEEECC;
scrollbar-darkshadow-Color:#FEEECC;
background: transparent;
overflow: hidden;
border:none;
margin:0;
}
</style>

[sice]

just a few things to check:

1. colored scrollbars only work in IE
2. make sure you didnt set your doctype to xhtml
3. im not sure if an html 4.01 STRICT doctype will allow it, so if youre using that, try setting it to transitional.

hope that helps.

[Carl-cox-]

try putting

<style type="text/css">
.iframe
{
scrollbar-face-color:#FEEECC;
scrollbar-arrow-color:black;
scrollbar-track-color:#FEEECC;
scrollbar-shadow-color:#FEEECC;
scrollbar-highlight-color:#FEEECC;
scrollbar-3dlight-color:#FEEECC;
scrollbar-darkshadow-Color:#FEEECC;
background: transparent;
overflow: hidden;
border:none;
margin:0;
}
</style>


Then in your iframe tag put

<iframe class="iframe"></iframe>

i think thats how its done :/

[magicz69]

still cant funny ...

[OuTpaTienT]

Maybe that's a sign from above that you shouldn't do it. Personally I don't like it when web sites try to change my scrollbar colors. It's annoying and I usually do not bookmark such web sites.

[magicz69]

but matching the background will look cool :P espicially for iframes :P i'll go look for solutions den

[raggario]

You can put that css code onto the pages that get loaded into the iframe, then the iframe itself will appear to have the colored scrollbars, but it will really be the pages that get loaded that have the code and the coloring.

I found this thread though because I was searching for "doctype scrollbar color" in google. As mentioned above - different browsers don't allow scrollbar coloring, plus every time I try to use a doctype on a page that has scrollbar coloring the code won't work anymore..

Is there a proper doctype to use if you want to use the scrollbar coloring? Which doctype will not "break" that css code?

[Tryezz]

<style type="text/css">
*<!--*
body
{
scrollbar-face-color:#FEEECC;
scrollbar-arrow-color:black;
scrollbar-track-color:#FEEECC;
scrollbar-shadow-color:#FEEECC;
scrollbar-highlight-color:#FEEECC;
scrollbar-3dlight-color:#FEEECC;
scrollbar-darkshadow-Color:#FEEECC;
background: transparent;
overflow: hidden;
border:none;
margin:0;
}
*-->*
</style>

The parts in the astrieks are the parts you need. That blocks off the code and makes it register.

"But hey, don't take my word for it"-The guy from reading rainbow

[raggario]

Tryezz, I should have been more specific in what I was looking for.

I had already been using similar code to what you had posted and that worked just fine for me, that is it worked fine on all pages that did not have the "xhtml" doctype. On my xhtml doctype pages, the scrollbar color code was no longer working.

I've been searching around though, and have just found the answer to what I was looking for. I will share my results with everyone here, and by the way these results were found at the forums on Devshed Right Here.

In xhtml (standards mode ie), the scrollbar object is not part of the body element anymore...but the of the html element.

so:

html {
scrollbar-face-color: #96A096;
scrollbar-shadow-color: #96A096;
scrollbar-highlight-color: #96A096;
scrollbar-3dlight-color: #9AB6C4;
scrollbar-darkshadow-color: #20253A;
scrollbar-track-color: #738278;
scrollbar-arrow-color: #000000;
}

...works fine !

And right in the same thread:

I quote W3C:

Some browsers (IE, Konqueror) have recently started supporting the non-standard properties 'scrollbar-shadow-color', 'scrollbar-track-color' and others. These properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-").

So,you shouldnt be using colored scrollbars at all,especially if you are using XHTML because its invalid XHTML.

So until I learn more about why I shouldn't be using this scrollbar coloring in my "xhtml" pages, I'm going to go ahead and use it anyway..

I am of the mind that scrollbar coloring should be optional for designers. Unfortunately some designers have a poor taste of how to use colors, and end up making poor looking pages that give colored scrollbars a bad name..

As usual, I hope my post is beneficial to the collective.

[peejay]

raggario

i came across this post from google.. just wanted to say thanks for posting your solution and the info behind it.

[OuTpaTienT]

So until I learn more about why I shouldn't be using this scrollbar coloring in my "xhtml" pages, I'm going to go ahead and use it anyway..

I am of the mind that scrollbar coloring should be optional for designers. Unfortunately some designers have a poor taste of how to use colors, and end up making poor looking pages that give colored scrollbars a bad name..

As usual, I hope my post is beneficial to the collective.

So screw standards I'll just do what I want? Nice.

Scrollbars are NOT part of a web page. They are part of the application interface. The fact that an inferior product like IE allows you to manipulate them does not mean it's right for you to do so.

[raggario]

I guess the allmighty web gods (Outpatient obviously being one of them..) are going to commit me to hell now huh?

peejay - You're welcome! However from what Outpatient said it's obviously not the right thing to do to use colored scrollbars on a site.... I'm still using them though, I guess I'm EVIL!!!

Oh no, watch out!

[OuTpaTienT]

Not evil. Just rude and obnoxious. But there's no laws against that so you're safe for now.

[raggario]

Not evil. Just rude and obnoxious. But there's no laws against that so you're safe for now.

Actually, I have made quite a few posts across different forums and have always been very thorough in my wording to be as clear, precise, and helpful as possible for the benefit of all who read. I may not always have the most accurate information since I am only a student of web design myself, and not a professor of it, but as I go along learning I gladly share what knowledge I have gained. Because I do that I often get comments such as:

raggario

i came across this post from google.. just wanted to say thanks for posting your solution and the info behind it.

You on the other hand are of the type of person who likes to put down, and make lewd comments about people who are just trying to help, which is why you get comments such as:

I guess the allmighty web gods (Outpatient obviously being one of them..) are going to commit me to hell now huh?

When I said:

So until I learn more about why I shouldn't be using this scrollbar coloring in my "xhtml" pages, I'm going to go ahead and use it anyway..

I am of the mind that scrollbar coloring should be optional for designers. Unfortunately some designers have a poor taste of how to use colors, and end up making poor looking pages that give colored scrollbars a bad name..

As usual, I hope my post is beneficial to the collective.

I wasn't trying to be rude or say "screw standards", I was openly proclaiming my ignorance of the "Whys" behind the "don'ts".. It was an open invite for someone to help teach me, not for someone like you to be a biatch about it!

Offer me some helpful information without a bunch of attitude behind it and I will be cool to you. Give me attitude and expect to get it right back!

[erjati]

IF YOU MUST HAVE CUSTOM SCROLLBAR COLORS IN YOUR IFRAMES THAT CONTAIN ANOTHER WEB SITE'S PAGES...

You CAN make iframes that hold external pages have custom colored scrollbars, but you have to fake out the primary iframe with an intermediary page of your own that lets you control the css for the scrollbars.

Below is the code for the whole page that contains the iframe that will hold the external page (not from your own site) that you want to appear in the iframe with colored scrollbars.

Use this intermediary page as a container for the secondary iframe that will display the targeted external page. Set it up like this:

1. Create your top level web page with your primary iframes and your custom scrollbar code for that top level page. It will need to have an iframe in it coded something like this:

<iframe src="iframe_holder_for_YAHOOdotCOM.html" style="border:1px black solid;" name="frame1" scrolling="auto" frameborder="yes" align="center" height = "600px" width = "95%"> </iframe>

If you have another iframe on your page or anywhere else in your site you need to target it to a unique secondary iframe holder page, with primary iframe code such as this:

<iframe src="iframe_holder_for_GOOGLEdotCOM.html" style="border:1px black solid;" name="frame1" scrolling="auto" frameborder="yes" align="center" height = "600px" width = "95%"> </iframe>

2. Have each primary iframe in the top level page open a unique intermediary/secondary iframe container page with something like the following code (use your own css for the scrollbar colors - this one just has red scrollbars and a white track):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
html {
scrollbar-face-color: #FF0000;
scrollbar-track-color: #FFFFFF;
}

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>

</head>

<body>
<iframe src="http://yahoo.com" style="border:0px;" name="frame1" scrolling="auto" frameborder="yes"

align="center" height = "1200px" width = "100%"> </iframe>
</body>
</html>


3. Your intermediary page has no margins and the secondary iframe that it contains is set to 100% width and 1200 pixels high in this instance so the iframe on it containing your target page will display the whole target page. You will want to adjust this pixel height so the secondary iframe wont display tons of empty space at the bottom of the target page. You can also set scrolling to no for the secondary iframe, but be sure to give the target page enough height and width to show the whole page. If the target page is wider than your viewer's monitor resolution he or she will need to scroll to the side, so turning off scrollbars isn't always a perfect solution.

4. Again, each secondary iframe container page on your site must be uniquely named and the secondary iframe in it must be individually targeted to the page it will display.

It's a bit of extra work, but if you want the effect when you iframe an external page, it can be done with this work around.