Elemental Demo Content
Elemental Demo Content

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

The RokSlide Tab Content

Elemental includes an exciting new module that allows you to display category content in sliding tabs. This new module has a host of configuration options to customize the way the content is displayed. In our demo example, we have published several custom content items to the "Newsflash" category, and we have the RokSlide module pointing this category. The size of the module is set to width: 722 and height: 200.

We created 4 individual content items in the "Newsflash" section and category. The Five Elements, RokSlide Content, RokMooMenu, RT Exclusive Extensions.

The Five Elements

This content pane is made up of a single image. Because the image needed to be able to adapt to the different background colors for our demo, we had to go a different route by making it a background image and utilizing css in the body css files to allow for switching as the IE6 Transparent PNG fix will not work for images within the Tabs module. For these examples, I'm going to show code for normal images in the content.

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 set to No Editor -Editor. The following will make a content item with a single linked banner image of your choice display in the tab. In our demo example, the image is 560 x 190px.
<center><a href="yourlink.html"><img src="images/promoimage.png"
alt="Promo Image" /></a></center>

RokSlide Content

This content pane makes use of a left aligned image block and a text description on the right. The following code makes a content item of this nature.

<img src="images/stories/rokslide_content.png" alt="RokSlide" align="left"
RokSlide for Content</h3><p> The new RokSlide module enables
you to implement beautiful sliding tabs to display your Joomla category
content in a unique and concise fashion.</p>

<p>This demo features some different styles and approaches for
displaying your content in the tabs.<a href="index.php?option=com_content
&task=view&id=29&Itemid=56">Learn more</a>
about how to set up your content in RokSlide similar to this demo.</p>


This content pane also utilizes a left aligned module, you can use the exact same code structure that was used in the "RokSlide Content" item and replace the image and text to suit the new content.

RT Exclusive Extensions

This content pane changes things up a bit by including three columns of text with small bulleted headers and a right aligned image. The following code is how this type of layout was achieved in the content item.

<img src="images/module.jpg" alt="module" style="float:right;margin-top:14px;margin-left:8px" />
<div style="float:left;width:135px;padding-right:5px;margin-right:18px">
<img src="images/bullet1.jpg" alt="bullet" style="float:left;margin-top:15px;margin-right:5px" />
<h3>RokSlide</h3>The exciting all new sliding tabs module featuring tabbed
sliding transitions and dynamic content integration.<a href="index.php?option=com_content
&task=view&id=20&Itemid=40">Learn more...</a></div>

<div style="float:left;width:135px;padding-right:5px"><img src="images/bullet2.jpg"
alt="bullet" style="float:left;margin-top:14px;margin-right:5px" /><h3>RokLatest>/h3>
The popular RokLatest module has been overhauled with MooTools functionality
and built to blend beautifully into Elemental. <a href="index.php?option=com_content
&task=view&id=20&Itemid=40">Learn more...</a></div>

<div style="float:right;width:135px"><img src="images/bullet3" alt="bullet" style="float:left;
margin-top:14px;margin-right:5px" /><h3>RokZoom</h3>The all new
RokZoom mambot is an exciting new take on the ever popular slimbox functionality.
<a href="index.php?option=com_content&task=view&id=17&Itemid=37">
Learn more...</a></div>