This tutorial is designed to teach you how to make the graphic scrollbars ( or transparent scrollbars ) It is not intended for people who are too terribly new to html and graphic design. While I would like to offer help to those who at least grasp this concept to some extent, I dont think I will be able to explain it any better if you email me and ask how to do it. This is the only way I can explain it.. Sorry.
Requirements : Knowledge of css, knowledge of iframes, knowledge of tables, knowledge of your graphics program :)
This is really more of a template than a tutorial, so please remember the layout link if you decide to keep the code as is :)
Click here and save as everything to your hard drive
OR
It should contain 2 html pages, and 2 graphic images.
scroll.html , inside.html , iframe_bg_withscroll.gif , iframe_bg_withscrolloopsie.gif ( this one in case you mess up the first )
Open iframe_bg_withscroll.gif in your graphics program. Increase the color depth to 24 million colors. ( SHIFT + CTRL + 0 ) Now go to LAYERS >> PROMOTE TO LAYER
Next, select the orangish color with your wand tool and then go to SELECTIONS >> SELECT SIMILAR >> and then press CTRL+X
This should remove all the orangish color. Next step, go to LAYERS >> ADD RASTER LAYER, name it whatever you like :)
Now floodfill with the color you want your iframe to be, or with a small pattern ( a large pattern will be difficult to match up properly with the background of the page the iframe is on ). Once you are finished go to LAYERS >> ARRANGE >> SEND TO BOTTOM..
Now you should see the red up and down indicators above your background. Add a new layer, name it whatever you like. This is where we add your graphic scroller :) On your new layer, over the area already drawn out for you, create whatever kind of scroll bar you would like :) Just remember the most important part is to have indicators to scroll up and down where you see the red ones I created.
Save this as iframe_bg_withscroll.gif ( or add some funky animations so that your scrollbar sparkles or blinks, that could be cool *Ü* )
Now if you open scroll.html you should be able to click on your scrollbar to move it up and down :)
This also works for sliced layouts like the kind I normally use for this website : ) It also works as a layer but it will not work as a regular frame. Only Iframes and layers : )
Have you decided to go your own route? Keep these important steps in mind
1.) Your Iframe should be inside a table and the cell ( td ) containing the iframe must have the same background as the pages loading into the iframe ( the background with the graphic scroll ) You must also make this cell the exact same width and height as your Iframe and use NO cellpadding or cellspacing, that will most likely interfere with your scrollbars.
2.) Make sure you have included the chroma filter in your iframe tag ( see image above ) and that the color set for it is the same color that you have set for ALL of the scrollbar attributes in your stylesheet or style tag.
3.) In order to keep from your text looking blurry and nasty, make the "transparent" color ( in the image above it is 40FF40 ) in a shade close (but not the same ) to the dominant color of your background. But make sure you dont use that color anywhere in your graphics or in your links, text etc.. or it wont show up inside the iframe !
I hope you have found this useful :)
Links are definitely appreciated! Please feel free to right click to save one of these images to your hard drive and link them back to:
http://www.heartsenchanted.com
Thanks for your support!
