Premium Templates
Image Galleries
Image Effects
Video Players
Audio Player
Other Effects
Copyright © Flying Cow Labs All Rights Reserved.
Website crafted using the Serif Software Suite
If you’ve found these tutorials useful please help the world's poorest communities
by making a small donation to WaterAid -
Unique Scrollbar Tutorial
Achieve a unique scrollbar with your WebPlus site as displayed here.
Courtesy of FleXcroll by Hesidéo. Please be aware this script is not free for commercial sites. You can view the authors policies on the link provided.
1. Download the complete package including different scroll graphics from FleXcroll or download my lightweight bundle from here which includes a unique scroll bar for you to use.
2. Using an ftp program such as Filezilla drag and drop the complete ‘scrollbar’ file in to the root of your server.
For the sake of Internet Explorer, you’ll need to drop your scrollbar.png in to the root of your server, or it will not display!
3. Include the following script in the head of the master page or the page you wish to have the unique scroll bar.
Copy and paste > Insert > Web Object > HTML > Paste to Head.
4. Next create an HTML Text Frame and add your written content, resize to fit your page
5. Now right click your text frame, scroll down too ‘Text format’ > ‘Over flowing text’ click ‘Fixed scroll bar’
6. Right click the text frame > Attach HTML > scroll along to the part where it says “__AddCode="InsideBorderDiv" and insert > id='mycustomscroll' class='flexcroll'
7. Upload your site, and providing all the pieces are in the right place, you should now have yourself a fancy scroll bar that works in most browsers.
The line that the scroll runs along in this demo is simply a line drawn on the page using the straight line tool, then adjusted through trial and error to sit in the correct place.
To Modify the Scroll Bar:
1. Make your own unique scroll bar in the software of your choice, I recommend DrawPlus by Serif, free versions are available through www.serif.com/FreeDownloads make sure that it’s width dimension is no wider that 30 pixels, any wider and the right side will be sliced off.
2. Save as a PNG named scrollbar.png
3. Upload to your server, replacing the png file within the scrollbar file.
4. Open Flexcrollstyles.css using your preferred software or in Notepad. In line 17 where it says:
.vscrollerbar {
background-image: url(scrollbar.png);
width: 28px;
/* following is the bit that allows us fixed height scrollbars */
height: 71px !important;
Adjust the width and height dimensions to suit your newly made scroll bar.
5. Save and upload to your server... Jobs a good’un.
Any issues, visit the forum
