Make Contact

{snippet contact}
banner
Banner
Site Name

Advert2 Position

Introducing Scroller2 - Habitat

Introduction Features Setting up the Sliding Menu Variations Module Positions Dummy Content Smoothbox Paragraph Styles List Styles

Joomla Menu

Habitat Scroller PDF Print E-mail
Saturday, 12 June 2004

Scroller2 This months' Joomla Bamboo Joomla Template is a mash up of our previous two. What do you get when you combine the Habitat3 template with its transparencies with the Scroller ... The answer is the Habitat Scroller :)

The emphasis in this design is wide open scrolling spaces. It draws upon the very popular Scroller that uses the mootools fx.scroll effect and throws it into some slightly left of field habitat environments.

This template is packed with features but the most amazing is the sliding suckerfish menu. Roll over the menu on the left and you'll see some funky horizontal transparent menus appear. We've also developed the control panel idea to bring you a transparent overlay that can be used to put any normal Joomla module into it.  

Last Updated ( Tuesday, 01 January 2008 )
 

Features

The Habitat Scroller is loaded with features:

  • 9 Modules Plus the main content body scrolling through the whole browser window.
  • You get full control over the type of transition and the time it takes to scroll.
  • The Sexy Sliding Suckerfish Menu for complex fly out horizontal drop down menus.
  • 10 Backgrounds ready to make Habitat your own.
  • The new Control panel thats sits with an overlay on the site and is triggered by the image in the top right corner.
  • Smoothbox Ready.
  • IE PNG Fix built in.
  • Some great typography.

Setting Up the Sliding Suckerfish

Scroller Mark II brings you a totally new menu for use in our template. We call it the Sliding Suckerfish which is effectively a vertical multi-level menu using some marvelous mootools flavour to get your sublevels sliding.

We achieve this simply by setting up the Extended Menu module as per usual with any other suckerfish and then nominating the module class suffix -slide.

 

Step by Step:

  • 1. Install Extended Menu.
  • 2. Publish to Left position for below the module slide menu items or advert 2 to have it above the module sliders.
  • 3. Choose the menu you want to use.
  • 4. Select Flat list for menu style.
  • 5. Select yes for expand menu.
  • 6. Apply the module class suffix '-slide'

And there you have it ... your sublevels will start to slide :) 

Scroller 2 Variations

Click on the image below to change the Scroller2 Theme. You can also try Scroller2 in Horizontal or Vertical or Grid Format.

clouds200.jpg grass200.jpg ivy200.jpg matrix200.jpg music1200.jpg music2200.jpg rocks1200.jpg rocky200.jpg stars200.jpg writing200.jpg

Module Positions

Here is an overview of the positions available in this template. The main content area and User 1 to User 9 positions are all position on their own white overlay and fly/scroll into view when their respective link is triggered from the left menu.

The Sliding Suckerfish can be set up using the extended menu module and applying the module class suffix -slide to get it to slide in the sub-menu items on your menu.

The top position is triggered by the image positioned in the top right corner of the screen. This image is found in the template images folder and can be changed by editing the index.php file.

Click to enlarge. Habitat Scroller Module Positions

Dummy Content

AdSense Tips For Bloggers - By: ReveNow.com If you have joined the blogging revolution that is sweeping the net, and you think you might want to make a little revenue - or a lot of revenue - from your blogging efforts, you need AdSense tips for bloggers. Blogging has opened up an entirely new way of how non-technical people interact with the Internet, and now, anyone can publish anything about any topic - without having a website - and anyone can profit without even having a product!

Adsense for blogs make perfect sense. Google's advertising programs are designed to work with sites related to the keywords for the ads that are being presented. Each time you add content to your blog, the Google spiders gobble it up. The more you update, the more the Google spider visits your page. Ultimately, you move up in the SERPs (Search Engine Results Pages) for the topics that you write about. You see where this is going. The higher your search ranking, the more traffic you receive, which ultimately leads to higher revenue from AdSense ads.

The beauty of blogs is their potential for rapid growth. If you become known as an expert in your area of expertise, word of mouth spreads quickly and your blog can become very popular. So it is vital that you always teach something with every blog entry. You want your readers to come back frequently and they will if they know they will learn something. Not only will your readers bookmark your blog and return often, but they will link to your blog enthusiastically as well. People in forums will refer to your blogs and discuss what they learned. Websites will link to you as a valuable resource. In short, an informative blog can grow very quickly if the information it provides is valuable.

Smoothbox

We normally package our templates with the great Slimbox Extended lightbox script but this month we thought we'd try the Smoothbox ... a mootools take on another lightbox - Thickbox.

The Smoothbox site has all the code you need to get some good looking lightboxes happening. You can use images, create galleries, float hidden html elements, load content via ajax as well as use the old iframe to load new pages.

Its really very flexible and certainly looks good with the ability to comprehensively style the overlay and the box to give you a unique twist on an old classic. 

Here are a few examples:

Show the contact form | Iframe | | Scrolling content

Clouds Theme

Paragraph Styles

Here are some examples of the various paragraph styles available in this Scroller2 Template.

Tick Style - Duis sapien risus, adipiscing non, auctor quis, congue non, tellus. Donec id justo in ante tristique tristique. Fusce tincidunt pede viverra ligula.

Blue Style - Duis sapien risus, adipiscing non, auctor quis, congue non, tellus. Donec id justo in ante tristique tristique. Fusce tincidunt pede viverra ligula.

Orange Style - Duis sapien risus, adipiscing non, auctor quis, congue non, tellus. Donec id justo in ante tristique tristique. Fusce tincidunt pede viverra ligula.

Green Style - Duis sapien risus, adipiscing non, auctor quis, congue non, tellus. Donec id justo in ante tristique tristique. Fusce tincidunt pede viverra ligula.

Grey Style - Duis sapien risus, adipiscing non, auctor quis, congue non, tellus. Donec id justo in ante tristique tristique. Fusce tincidunt pede viverra ligula.

White Style - Duis sapien risus, adipiscing non, auctor quis, congue non, tellus. Donec id justo in ante tristique tristique. Fusce tincidunt pede viverra ligula.

Black Style - Duis sapien risus, adipiscing non, auctor quis, congue non, tellus. Donec id justo in ante tristique tristique. Fusce tincidunt pede viverra ligula.

List Styles

Here are some examples of the various list styles available in this Scroller2 Template.

  • This is the orange list 
  • This is the orange list 
  • This is the blue list 
  • This is the yellow list 
  • This is the green list 
  • This is the olive list 
  • This is the black list 
  • This is the red list 
  • This is the white list