Home Video Tutorials Written Tutorials Template Tutorials
print

Replicant Demo Content

A look at some of the modules and techniques used throughout the demo content and on the frontpage of the Replicant demo as well as step by step instructions and source code for several of these custom modules.

RokFlow Modules

On the Replicant demo, we have 2 instances of the RokFlow module. The first appears on the frontpage. This contains 9 images of albums from popular song artists. The second is shown on the Preset Styles page. The module shows previews of the inbuilt styles for Replicant with the applicable title above. To enter custom classes into your modules and content, you may first need to disable the default Joomla WYSIWYG editor as it will strip out these classes when the item is saved. You can do this from your control panel by going to Site > Global Configuration and setting Default WYSIWYG Editor to No WYSIWYG Editor.

RokFlow - Frontpage

The frontpage RokFlow module has 9 screenshots of album covers. Instructions on how to do this exactly as the demo is shown in this section.
  1. Navigate to Extensions -> Module Manager
  2. Select the New icon on the top of the module control area
  3. Insert the following into the empty white box at the bottom of the module setting page
<script src="templates/rt_replicant_j15/js/rokflow.js" type="text/javascript" charset="utf-8">
</script>
<script type="text/javascript" charset="utf-8">
window.addEvent('load', function() {
new RokFlow('rokflow');
});
</script>	
<div id="rokflow">
<div id="loader"></div>
<div>
<a href="images/covers/1.png" title="Pink Floyd">
<img src="images/covers/1.png" title="Pink Floyd" alt="Pink Floyd" />
</a>
</div>
<div>
<img src="images/covers/2.png" title="Bon Jovi" alt="Bon Jovi" />
</div>
<div>
<a href="images/covers/3.png" title="Rihanna">
<img src="images/covers/3.png" title="Rihanna" alt="Rihanna" />
</a>
</div>
<div>
<a href="images/covers/4.png" title="Smashing Pumpkins">
<img src="images/covers/4.png" title="Smashing Pumpkins" alt="Smashing Pumpkins" />
</a>
</div>
<div>
<a href="images/covers/5.png" title="Iron Maiden">
<img src="images/covers/5.png" title="Iron Maiden" alt="Iron Maiden" />
</a>
</div>
<div>
<a href="images/covers/6.png" title="Evan Almighty">
<img src="images/covers/6.png" title="Evan Almighty" alt="Evan Almighty" />
</a>
</div>
<div>
<a href="images/covers/7.png" title="Kelly Clarkson">
<img src="images/covers/7.png" title="Kelly Clarkson" alt="Kelly Clarkson" />
</a>
</div>
<div>
<a href="images/covers/8.png" title="Maroon 5">
<img src="images/covers/8.png" title="Maroon 5" alt="Maroon 5" />
</a>
</div>
<div>
<a href="images/covers/9.png" title="The White Stripes">
<img src="images/covers/9.png" title="The White Stripes" alt="The White Stripes" />
</a>
</div>
<div>
<a href="images/covers/10.png" title="Beastie Boys">
<img src="images/covers/10.png" title="Beastie Boys" alt="Beastie Boys" />
</a>
</div>
</div>

RokFlow - Preset Styles

The Preset Styles page contains the other RokFlow module. 10 screenshots of the inbuilt styles are visible which change the style of the demo when selected.
  1. Navigate to Extensions -> Module Manager
  2. Select the New icon on the top of the module control area
  3. Insert the following into the empty white box at the bottom of the module setting page.
<script src="templates/rt_replicant_j15/js/rokflow.js" type="text/javascript" charset="utf-8">
</script>
<script type="text/javascript" charset="utf-8">
window.addEvent('load', function() {
new RokFlow('rokflow');
});
</script>	
<div id="rokflow">
<div id="loader"></div>
<div>
<a href="index.php?option=com_content&task=view&id=21&Itemid=42&tstyle=style1" title="Style 1">
<img src="images/stories/styles/style1.png" title="Style 1" alt="Style 1" />
</a>
</div>
<div>
<a href="index.php?option=com_content&task=view&id=21&Itemid=42&tstyle=style2" title="Style 2">
<img src="images/stories/styles/style2.png" title="Style 2" alt="Style 2" />
</a>
</div>
<div>
<a href="index.php?option=com_content&task=view&id=21&Itemid=42&tstyle=style9" title="Style 9">
<img src="images/stories/styles/style9.png" title="Style 9" alt="Style 9" />
</a>
</div>
<div>
<a href="index.php?option=com_content&task=view&id=21&Itemid=42&tstyle=style17" title="Style 17">
<img src="images/stories/styles/style17.png" title="Style 17" alt="Style 17" />
</a>
</div>
<div>
<a href="index.php?option=com_content&task=view&id=21&Itemid=42&tstyle=style23" title="Style 23">
<img src="images/stories/styles/style23.png" title="Style 23" alt="Style 23" />
</a>
</div>
<div>
<a href="index.php?option=com_content&task=view&id=21&Itemid=42&tstyle=style33" title="Style 33">
<img src="images/stories/styles/style33.png" title="Style 33" alt="Style 33" />
</a>
</div>
<div>
<a href="index.php?option=com_content&task=view&id=21&Itemid=42&tstyle=style35" title="Style 35">
<img src="images/stories/styles/style35.png" title="Style 35" alt="Style 35" />
</a>
</div>
<div>
<a href="index.php?option=com_content&task=view&id=21&Itemid=42&tstyle=style36" title="Style 36">
<img src="images/stories/styles/style36.png" title="Style 36" alt="Style 36" />
</a>
</div>
<div>
<a href="index.php?option=com_content&task=view&id=21&Itemid=42&tstyle=style43" title="Style 43">
<img src="images/stories/styles/style43.png" title="Style 43" alt="Style 43" />
</a>
</div>
<div>
<a href="index.php?option=com_content&task=view&id=21&Itemid=42&tstyle=style46" title="Style 46">
<img src="images/stories/styles/style46.png" title="Style 46" alt="Style 46" />
</a>
</div>
</div>

RokSlide Module

The Features page has the RokSlide module placed in the User 1 position as a dynamic overview of the Replicant extras.

RokSlide Module configuration

Below are the settings that are used in the Replicant demo for RokSlide

  1. Login to the Joomla! adminiistration area.
  2. Navigate to Extensions -> Module Manager.
  3. Select RokSlide from the list to activate its control panel.
  4. Configure the following settings:-
    Show Title: No
    Position: User 1(demo only)
    Access Level: Public
    Published: Yes
    Menu Item Link(s): Features(demo only)
    Category: Newsflashes/RokSlide Conent(demo only)
    Width: 605(demo only)
    Height: 180(demo only)
    Show images: Yes
    Read More: Hide(demo only)
    Include Mootools JS library: No
  5. Save.

RokSlide Demo Content Items

RokFlow Tab

<div style="float:left;margin-top:15px;margin-right:10px">
<img src="images/stories/rokslide/rokslide_rokflow2.png" 
alt="RokFlow" height="165" width="192" style="margin-top:-7px" />
</div>

<h3 style="font-size:130%;">Using RokFlow for Content</h3>

<p style="margin-top:-15px;">The new RokFlow module enables you to implement 
a fluvial display of content and images which activates via mouse hover</p>

<p style="margin-top:-8px;">RokFlow has full RokZoom support as seen  in this demo.</p>

<a href="index.php?option=com_content&task=view&id=20&Itemid=47">Read More...</a>

RokZoom Tab

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="35%"><h3 style="font-size:130%;height:8px;">RokZoom Returns</h3>
<p style="margin-top:-8px;"><strong>RokZoom</strong> has returned and has been 
re-styled with dark characteristics to add the professional touch</p></td>
<td width="28%"><center><img src="images/stories/rokslide/rokslide_rokzoom.png" 
alt="RokZoom" height="160" width="120" /></center></td>
<td width="35%"><h3 style="font-size:130%;height:8px;">Using Rokzoom</h3>
<p style="margin-top:-8px;">The demo has a range of extensive tutorials on many 
aspects of RokZoom such as its Usage in Content.
<br/>
<br/>
You can <a href="index.php?option=com_content&task=view&id=17&Itemid=37">Read more...</a> 
on the RokZoom page.</p></td>
</tr>
</table>

RokSlide Tab

<div style="float:left;margin-top:15px;margin-right:10px"></div>

<img style="margin-right:15px;margin-top:10px" 
src="images/stories/rokslide/rokslide_tab1.png" width="229" height="80" 
alt="Tab 1" align="left" />
<h3 style="font-size:130%;margin-top:8px;">Using RokSlide</h3>

<p style="margin-top: -20px;"><strong>RokSlide</strong> 
enables you to implement beautifully sliding tabs to display your Joomla content.</p>

<img style="margin-left:5px;margin-top:5px;margin-right:5px;" 
src="images/stories/rokslide/rokslide_tab5.png" width="229" height="80" 
alt="Tab 5" align="right" />

<p style="margin-top:15px;width:230px;">This demo features some different styles 
and approaches for displaying your content in the tabs. <br/>
<a href="index.php?option=com_content&task=view&id=29&Itemid=56">Learn more</a>.</p>

RokMooMenu Tab

<div style="width:230px;float:left;">
<h3 style="font-size:130%;">The RokMooMenu!</h3>

<p style="margin-top:-15px;">The popular <strong>RokMooMenu</strong> 
combines the functionality of suckerfish with smooth, javascript-based transition.</p>

<p style="margin-top:-8px;"><strong>RokMooMenu</strong> is completely 
compatible with SEO(Search Engine Optimisation).</p>

<p style="margin-top:-8px;">
<a href="index.php?option=com_content&task=view&id=23&Itemid=46">Read More...</a>
</p>
</div>

<img src="images/stories/rokslide/rokslide_moomenu.png" 
alt="RokMoomenu" height="131" width="225" style="margin-top:15px;"/>

New Releases Module

On the frontpage, there is a module named New Releases. It is a simple custom module composed of images and text (some partially styled).
  1. Navigate to Extensions -> Module Manager
  2. Select the New icon on the top of the module control area
  3. Insert the following into the empty white box at the bottom of the module setting page.
<img src="images/music/nr_1.png" width="45" height="62" align="left" style="margin-right:8px" 
alt="Ratatouille image" /><strong>Ratatouille</strong><br /><i>Original Motion Picture Soundtrack
</i><br /><br />

<img src="images/music/nr_2.png" width="45" height="62" align="left" style="margin-right:8px" 
alt="Social Distortion image" /><strong>Social Distortion</strong><br /><i>The Greatest Hits</i>
<br /><br />

<img src="images/music/nr_3.png" width="45" height="62" align="left" style="margin-right:8px" 
alt="Kelly Clarkson" /><strong>Kelly Clarkson</strong><br /><i>My December (Deluxe Version)</i>

RokZoom Legends

In the bottom area, is another custom module which uses the rokzoom script for its image. See guide below for more details.
  1. Navigate to Modules -> Site Modules
  2. Select the New icon on the top of the module control area
  3. Insert the following into the empty white box at the bottom of the module setting page.
<a href="images/music/im_2.jpg" rel="rokzoom" title="Iron Maiden">
<img src="images/music/im_1.jpg" alt="RokZoom" border="0" class="album" 
align="left" style="margin-right:10px;margin-bottom:1px" />
</a>
<strong>Iron Maiden</strong> is one of the most successful and 
influential bands in the heavy metal genre, having sold 80 million albums 
worldwide. 
<a href="#">Learn more...</a>