Warning: include(/home/.lurky/jenni/star-girl.org/skins/cookiecheck.php) [function.include]: failed to open stream: No such file or directory in /home/jenni/star-girl.org/pages/tutorials/csscgi/transparentscrollbars.php on line 1

Warning: include() [function.include]: Failed opening '/home/.lurky/jenni/star-girl.org/skins/cookiecheck.php' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/csscgi/transparentscrollbars.php on line 1

Warning: include() [function.include]: Filename cannot be empty in /home/jenni/star-girl.org/pages/tutorials/csscgi/transparentscrollbars.php on line 2

Warning: include() [function.include]: Failed opening '' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/csscgi/transparentscrollbars.php on line 2
Transparent scrollbars



This is a great effect and I have been looking for this for like, forever! It's simple, too :) You must be using i-frames for this to work.

Copy the following CSS code into the head of your page (or if you already have a CSS code, you can just change the one you have).

<STYLE TYPE="text/css"> <!-- BODY{scrollbar-face-color:#000000; scrollbar-shadow-color:#000000; scrollbar-highlight-color:#72220A; scrollbar-3dlight-color:#72220A; scrollbar-arrow-color:#000000; scrollbar-darkshadow-color:#72220A; scrollbar-track-color:#72220A; } --> </style>

Okay, I'll tell you now that the colour #72220A in the code is a nasty dark brown colour. This is because everything that exact colour will go transparent, and you don't want half your site going transparent if you choose black or white now do you? If you have that colour anywhere on your site, change all the dark brown codes in the CSS to a colour you don't have on your site :) You can change all the #000000 bits to match the colours of your layout if you like.

Add the code below into your i-frame code. It doesn't really matter where you put it.

allowtransparency="true" style="FILTER: chroma (color=72220A)"

This is what mine looks like to give you an idea (don't worry if yours is slightly different):

<IFRAME SRC="blog.html" name="main" FRAMEBORDER="0" WIDTH="468" HEIGHT="60" SCROLLING="1" marginwidth="0" marginheight="0" allowtransparency="true" style="FILTER: chroma (color=72220A)"></IFRAME> Okay, you should have transparent scrollbars now :) Play around for a bit, changing the colours etc.
Warning: include() [function.include]: Filename cannot be empty in /home/jenni/star-girl.org/pages/tutorials/csscgi/transparentscrollbars.php on line 34

Warning: include() [function.include]: Failed opening '' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/csscgi/transparentscrollbars.php on line 34