Register
Introduction
A basic list of features regarding the May 2010 Joomla Fusion template by Shape 5.
Color Presets
Fusion includes up to six color presets available for you to choose from.
Frontpage Display
Edited version of the S5 Frontpage Display 2 module released originally in Forever Ace 2.
Documentation
Need help setting up Fusion or configuring the modules that are included with it?
Error
  • Error loading feed data
Message
  • Error. Feed could not be retrieved.
  • Print
Details
11
Dec

Custom Page and Column Widths


Hits: 10757

Easily set your own widths! This template gives you the ability to set your own width for the positions listed below. You can also choose to set your template to have fluid width (changes per screen size) or a fixed pixel with (what this demo is currently set to)


1. Page body width

2. Left column width

3. Right column width


All of this is done very easily in the template configuration.

 


  • Print
Details
05
Dec

Module Positions and Styles


Hits: 26606

On this page you will see all the module styles and module positions available plus how to setup each of them.

All modules are fully collapsible!

How to install and setup module styles:

  1. Download any module you wish to publish to your site.
  2. In the backend of Joomla navigate to the menu item Extensions/Install Uninstall


  3. Browse for the module's install file and click Upload File & Install.
  4. Once the module has be installed navigate to the menu item Extensions/Module Manager (same menu as above)
  5. Find the Module just installed and click on it's title.
  6. Change any parameters that you wish and be sure to set it to published and publish it to your desired module position.
  7. To apply a module style simply fill in the module class suffix field with any of this template's included module styles. This parameter setting is found under Module Parameters on the right side of the screen.


  8. Assign what pages you would like the module to appear on and finally click Save.


 

  • Print
Details
11
Dec

LyteBox Setup Tutorial


Hits: 16396

 

Note - The lytebox script is by default disabled. If you wish to use it you must enable this script in the template's configuration area. This also includes site shaper installations.

The already enabled LyteBox feature gives your site a dazzling picture display!

Make sure to click on each of the examples.

LyteBox comes pre-installed with this template just follow the tutorials below to setup your images.

Single Image Example

one

To enable use the following around any image:

<a href="http://www.yoursite.com/images/popup.jpg" rel="lytebox" title="Your Description."><p align="center"><img class="boxed" src="http://www.yoursite.com/images/thumbnail.jpg" alt="Description" width="214" height="61" /></p></a>

Grouped Images Example

Description Description Description

To enable use the following around any group of images:

<a href="http://www.yoursite.com/images/popup1.jpg" rel="lytebox[gallery]" title="Your Description"><p align="center"><img class="boxed" src="http://www.yoursite.com/images/thumbnail1.jpg" alt="Description" width="214" height="61" /></p></a>
<a href="http://www.yoursite.com/images/popup2.jpg" rel="lytebox[gallery]" title="Your Description"><p align="center"><img class="boxed" src="http://www.yoursite.com/images/thumbnail2.jpg" alt="Description" width="214" height="61" /></p></a>
<a href="http://www.yoursite.com/images/popup3.jpg" rel="lytebox[gallery]" title="Your Description"><p align="center"><img class="boxed" src="http://www.yoursite.com/images/thumbnail3.jpg" alt="Description" width="214" height="61" /></p></a>

Slideshow Example

Description Description Description

To enable use the following around any group of images:

<a href="http://www.yoursite.com/images/popup1.jpg" rel="lyteshow[gallery]" title="Your Description"><p align="center"><img class="boxed" src="http://www.yoursite.com/images/thumbnail1.jpg" alt="Description" width="214" height="61" /></p></a>
<a href="http://www.yoursite.com/images/popup2.jpg" rel="lyteshow[gallery]" title="Your Description"><p align="center"><img class="boxed" src="http://www.yoursite.com/images/thumbnail2.jpg" alt="Description" width="214" height="61" /></p></a>
<a href="http://www.yoursite.com/images/popup3.jpg" rel="lyteshow[gallery]" title="Your Description"><p align="center"><img class="boxed" src="http://www.yoursite.com/images/thumbnail3.jpg" alt="Description" width="214" height="61" /></p></a>

 



I like what I see! I want to JOIN TODAY
  • Print
Details
05
Dec

S5 Menu With Multiple Effects


Hits: 30270


The S5 Menu system gives you the option to choose between the jQuery or the S5 Effects scripts to power your site menus. The demo here is all running the jQuery menu system. You can easily switch to the S5 Effects library via your template parameters area in Joomla (extensions > template manager > select the template and click edit)

The S5 jQuery menu functions just like the S5 No-MooMenu except it is powered by jQuery. To demo the menu just mouse over the top menu and you will notice the menu smoothly expand and fade in.


Menu screenshot:




 

4 Options:

 

I like what I see! I want to JOIN TODAY.

 

  • Print
Details
11
Dec

Configuring The Template's Settings


Hits: 11386

This template comes loaded with options that you can use to customize your site exactly how you want it. Here's how to get to these custom settings:

  1. In the backend of Joomla go menu item Extensions/Template Manager.
  2. Click on the title of the template.
  3. This will bring you to the template manager screen where you can edit the template's parameters.
  4. Click save when you are done




I like what I see! I want to JOIN TODAY
  • Print
Details
05
Dec

Typography Options


Hits: 25239

<div class="s5_greenbox"> <div class="tl"> </div> <div class="tr"> </div> <div class="bl"> </div> <div class="br"> </div> Your text here </div> </div>


<div class="s5_redbox"> <div class="tl"> </div> <div class="tr"> </div> <div class="bl"> </div> <div class="br"> </div> Your text here </div> </div>


<div class="s5_bluebox"> <div class="tl"> </div> <div class="tr"> </div> <div class="bl"> </div> <div class="br"> </div> Your text here </div> </div>


<div class="s5_graybox"> <div class="tl"> </div> <div class="tr"> </div> <div class="bl"> </div> <div class="br"> </div> Your text here </div> </div>

This is a sample blockquote. Use <blockquote><p>Your content goes here!</p></blockquote> to create a blockquote.


This is a styled box. Use <div class="black_box">Your content goes here!</div>

This is a styled box. Use <div class="gray_box">Your content goes here!</div>

This is a styled box. Use <div class="red_box">Your content goes here!</div>

This is a styled box. Use <div class="blue_box">Your content goes here!</div>

This is a styled box. Use <div class="green_box">Your content goes here!</div>

This is a styled box. Use <div class="yellow_box">Your content goes here!</div>

This is a styled box. Use <div class="orange_box">Your content goes here!</div>

This is an image with the "boxed" class applied:





This is an image with the "padded" class applied:




Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

This is a sample code div. Use <div class="code">Your content goes here!</div> to create a code div.

#s5_code { width: 30px; color: #fff; line-height: 45px; }

  1. This is an Ordered List
  2. Congue Quisque augue elit dolor nibh.
  3. Condimentum elte quis.
  4. Opsum dolor sit amet consectetuer.

  • This is an Unordered List
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_arrow
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_star
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_bullet
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_bullet_small
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

The following list will support lists up to number 9, add the following class to the UL wrapping the below LI elements, class="ul_numbers":

  • This is a sample styled number list <li class="li_number1">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number2">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number3">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number4">Your content goes here!</li>

Copyright © 2026. rifqi. Designed by Shape5.com Joomla Templates

S5 Box

Login Form

S5 Register

*
*
*
*
*
*

Fields marked with an asterisk (*) are required.