General Documentation 2007 Template Documentation Scroller Documentation
Scroller Documentation
The Scroller Joomla template was released in November 2007.
The following steps will help you to work better with the Scroller template. Please follow the instructions and use this item as a guide for setting up your site and configuring the various options found in the template as well as the extensions and scripts that are showcased on the Scroller demo site.
Getting Started
Choosing between the template or the quickstart.
Installing the template.
Choose this option if you already have your site created or have at least made changes to the default Joomla installation and want to overlay this theme onto your site. For a complete installation of the demo site on your server please refer to installing the quickstart package.
Installing the template is achieved using the same method as installing any other template or extension.
Installing the quickstart.
The Joomlabamboo quickstart packages are complete replicas of the particular template's demo site. They are basically the same as the Joomla installation zip except they come with the template, watermarked images and extensions you see on the demo site. They are a quick and easy way to have your site setup and ready to edit.
You can read the tutorial on installing the quickstart packages here.
Configuring the Template
Snapshot of the template configuration
Layout and module positions
This 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.
The modules are defined in a scrolling area the user one to user nine module positions. As you can see in the screenshot above in the template parameters that the positioning of the modules inside the scrolling area relates to the coordinates that you create in the template admin.
That is you control the position of each module in the scrolling area by specifying the top and left offset in the pixel value from the left and top edges of the scrolling container. As an example if you want to position the user one module 600 pixels from the top and 800 pixels from the left of the starting area then you simply need to add the values 600px and 800px to the top1 and left1 input fields.
Styling the content with overlays
As you can see on the Scroller demo site its possible to apply transparent overlays to the module or page in order to separate the text up off the page. This is a perfect solution if you are using a complex background image within the scrolling container.
Applying the overlay is as simple as applying a module class to the module you are displaying or in the case of the first slide (ie the Joomla content area) a page class suffix to the main menu item.
Module classes can be applied to pretty much any Joomla module that you're using to display in the scroller. Please see the following module classes that are available in this template:
- -dark_overlay
- -light_overlay
- -red_overlay
- -blue_overlay
- -orange_overlay
- -yellow_overlay
- -white
- -black
You can see examples of the module classes in action on the scroller demo site.
if you want to apply the same overlays to the first slide that appears on your site, then you need to apply it what's known as a page class suffix via the main menu item on your site; e.g. the default menu item.
The page class suffix uses the same syntax as that shown above. Please see the diagram below for example.
Understanding the scroll menu
The scrolling menu behaves in a different manner to a normal Joomla template. In fact the scroller menu is not related to the Joomla core menu at all. the menu items themselves are hardcoded into the template and you set the title for each menu item in the template parameters.
As an example the labels for the menu item correlate to the module position that you are scrolling. So if you set the label for the user five module position to services, you need to make sure that any module that is published to the user five position correlates to the information that you want to display under the services tab. So when you visit the front end of your site you should see the services menu item and when you click on it it should scroll into view all modules published to the user five position.
If you do not have any module positions published to the user five module position then the services tab will not display.
It's worth noting that when you click on the home menu item it doesn't actually take you to the home page, that menu item scrolls you back to the starting position - e.g. the first slide that you can see when you refreshed or load the page.
It's worth noting that when we designed the scroll a template we really just sort as an ideal template with some fancy effects for a one-page site. There have been some attempts to implement multiple pages within this template but the results have been varying.
Advert1 and advert2 positions
In the scroll a demo you can see the two tabs that sits inside of the container that holds the main scrolling area. These tabs trigger to drop-down panels that store the advert won an advert to module positions. The animation, time and general appearance of these drop-down panels can be controlled via the template admin. The tabs will only appear if you have a module published to the advert1 position in the case of the left tab or a module published to the advert2 position in the case of the right tab. The text on the tab is an image and can be edited via the source files that you can find in the download area.
