Scroller
Written by Web Master   
Saturday, 12 June 2004

Last month we brought you the Slider template. It proved to create quite a bit of interest so we thought we would create it's sister template ... Introducing the Scroller!.

The Scroller is based on the Mootools fx.scroll and combines 2 sliding panels and the fancy menu to bring you a truly unique Joomla template. Simply plot the co-ordinates for the module positions in the index file and you can move up, down, to the left or to the right ... the choice is yours. You also get full control over the type and duration of any effects you see here on the page which means it can be changed to suit your style.

Click on the side tabs to see some of the many variations available or to change this scheme.

Last Updated ( Thursday, 01 November 2007 )
 

Features

You decide how your site looks by adjusting the parameters in the index file. You have complete control over pretty much everything.

  • Width of the entire site.
  • Height of the entire site.
  • Whether the background image scrolls or is fixed.
  • The left padding or offset of the text from the background image.
  • The speed, duration and type of transition of the scroller.
  • The two heights of the two sliding panels below.
  • Types and duration of effects on the panels and side tabs.
  • Whether the panels are hidden or visible on page load.
  • Whether the page loads using a fade effect or not.

CSS Stylings

The css styles for this Joomla template are easily set in the index file. The overall colour scheme is set by choosing from the 10 preset options, but you can create your own by editing the appropriate style sheet or creating your own. 

The background colour, border colours, sliding panels and font colours are all set in the respective style sheet. 

We've also linked our extra stylesheet so you can populate your content using some fresh lists and other paragraph styling. Click here to see the styles as they were implented in the Sunshine template.

Scrolling or Fixed?

When setting up the Scroller template you can decide whether you want the background image to be fixed or scrolling. If the image is fixed the text just flies about and if you choose the scrolling option the background image moves according to the module positions.

The scrolling option is great for navigating through a landscape as per the original mootools demo or for placing bits of content on a map.

Please note that the images used in this demo are stock images from istockphoto and are not supplied with the template. 

Light Overlay - to use this overlay just use the module class -light-overlay.
Red Overlay - to use this overlay just use the module class -red-overlay.
Dark Overlay - to use this overlay just use the module class -dark_overlay.
Blue Overlay - to use this overlay just use the module class -blue_overlay.
Green Overlay - to use this overlay just use the module class -green_overlay.
Yellow Overlay - to use this overlay just use the module class -yellow_overlay.
Orange Overlay - to use this overlay just use the module class -orange_overlay.

Module Positions

Scroller Template ModulesThis template has a total of 11 module positions the bulk of which scroll in the main content area. There are two module positions that are triggered by the tabs on the side - advert1 and advert2.

 

 

 

 

 

 

 

 

 

Thin black version Square Blueversion Sunny versionRed versionLight_blue versionLight_blue versionLight_blue versionDark_blue version

Scroller Joomla TemplateScroller Joomla TemplateScroller Joomla TemplateScroller Joomla TemplateScroller Joomla TemplateScroller Joomla TemplateScroller Joomla TemplateScroller Joomla TemplateScroller Joomla TemplateScroller Joomla TemplateScroller Joomla TemplateScroller Joomla TemplateScroller Joomla Template