Scrollbar tutorial - Completed

by pieterh on 11 Sep 2009 16:21

Thanks to some great collaboration, the scrollbar is now ready for use, and I've deployed it to the Iron Giant themes and templates, as well as this site. If you get strange stuff, press Reload - it needs a new CSS to work.

The new scrollbar is still hosted at http://includes.wikidot.com/page:1. Gerdami suggested images with pop-up hints, so I designed some buttons in grey and white that work with all themes, and then used James Kanjo's Shane Smith's suggestion of putting the page name in a popup as the mouse hovers over the buttons.

You can do this really simply as long as you include this CSS in your theme:

That's simpler than James' original CSSTrying for the first time now!
and it really is
a neat trick… :-)
but works properly for images and ordinary links as you can see.

To use the new scrollbar, copy this page entirely into your site and use the same page title and name. This will let you find the page and fix it up when we get dynamic links to the real page working. Then call the scrollbar using code like this:

 [[include include:scrollbar order = created_at | selector = parent="%%parent_fullname%%" tags="-_closed"]]

And finally make sure your using either one of the Iron Giant rainbow themes, or one of my new Minimalist themes, which have the right CSS. Or, paste the CSS I showed above into your custom stylesheet.

Let me know how it goes. This has been a fun tutorial, driven almost entirely by your feedback, as well as lots of coffee… :-)

Over the weekend I'll be away at the seaside, with my dear wife and lovely kids, so don't expect too many updates to the blog, unless it's really bad weather here in Belgium.

Comments: 9

Add a New Comment