MetaMorph Demo Content

The demo for MetaMorph utilises a large stock of custom code and styling to make the most of every content item and show what MetaMorph can do. This basically means that the HTML used in the custom modules and content have customisations which employ the characteristics of the template to make the "perfect" content.

This demo content section will take you through some of the content areas and general techniques used to further your understanding and help you realise the true potential of MetaMorph. If you would like to quickly deploy a replica of our MetaMorph demo for a new Joomla site, be sure to check out our RocketLauncher package.

The Bottom Menu

For the bottom menu, you will need to use the following settings in Admin -> Modules -> Site Modules -> Other Menu :

• Position: bottom
• Menu Class Suffix: -bottom
• Menu Style: Flat List

What We Do

On the frontpage, you will observe the What We Do module. Below are instructions on how to set this up on your site:

1. Go to Admin > Modules > Site Modules > New
2. Set the module position to left
3. Insert the following into the Custom Output:
   

   <img src="images/stories/demo/thumb1.jpg" alt="What we do" style="float: left; margin-right: 10px; margin-top: -2px;">
   
   <span class="highlight-bold">Production</span>
   <br>
   Top quality manufacturing equipment to produce <a href="#">More...</a>
   
   <div style="border-bottom: 1px solid rgb(204, 204, 204); clear: both; padding-top: 10px; margin-bottom: 10px;"></div>
   
   <img src="images/stories/demo/thumb2.jpg" alt="What we do" style="float: left; margin-right: 10px; margin-top: -2px;">
   
   <span class="highlight-bold">Marketing</span>
   <br>
   A team of marketing specialists to drive your <a href="#">More...</a>
   
   <div style="border-bottom: 1px solid rgb(204, 204, 204); clear: both; padding-top: 10px; margin-bottom: 10px;"></div>
   
   <img src="images/stories/demo/thumb3.jpg" alt="What we do" style="float: left; margin-right: 10px; margin-top: -2px;">
   
   <span class="highlight-bold">Branding</span>
   <br>
   World class designers who will create outstanding <a href="#">More...</a>
   
   <div style="border-bottom: 1px solid rgb(204, 204, 204); clear: both; padding-top: 10px; margin-bottom: 10px;"></div>
   
   <img src="images/stories/demo/thumb4.jpg" alt="What we do" style="float: left; margin-right: 10px; margin-top: -2px;">
   
   <span class="highlight-bold">Consultation</span>
   <br>
   Professional, experience consultants to aid you <a href="#">More...</a>
   
   <div style="border-bottom: 1px solid rgb(204, 204, 204); clear: both; padding-top: 10px; margin-bottom: 10px;"></div>
   

Events 08 - Tab

On the frontpage, you will observe the Events 08 module located inside RokSlide. Below are instructions on how to set this up on your site:

1. Go to Admin > Modules > Site Modules > New
2. Set the module position to user12
3. Insert the following into the Custom Output:
   

   <ul class="bullet-6">
   	<li style="padding-left: 15px; padding-right: 10px;"> <span style="font-weight: bold; line-height: normal;">02/09/08 : Prototype Showcase </span><br/>
   	We showcased our brand new green vehicle engine, the Cougar Prototype. Using the energy output bacteria that cover the skin of the entire vehicle, our prototype can reach speeds of 110mph and last 687 miles without recharging. The bacterium extracts CO<span style="vertical-align: sub; line-height: 1px; font-size: 10px;">2</span> and converts into power for the vehicle. <a href="#">More...</a></li>
   
   	<li style="padding-left: 15px; padding-right: 10px;"> <span style="font-weight: bold; line-height: normal;">16/10/08 : Annual Conference</span><br/>
   	Our Annual Conference to showcase to our shareholders and customers the latest products that will be available in the following year. CEO Allan Morris will be speaking. <a href="#">More...</a></li>
   </ul>
   

Read More Buttons

Read more buttons are automatically generated for content items that use the intro and main text option. However, you can easily insert them manually as witnessed on this demo. Use the following code:

<a href="your_link" class="readon">Read More...</a>