The demo for Refraction utilises a large stock of custom code and styling to make the most of every content item and show what Refraction 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 Refraction. If you would like to quickly deploy a replica of our Refraction demo for a new Joomla site, be sure to check out our RocketLauncher package.

Feature Modules

You may notice that the modules allocated to the Feature position have a curious hover. This is generated by javascript to bring focus to those positions. Also, the effect only appears when 2 or more of the feature positions are active, such as feature and feature2.

Frontpage Main Article

The following statement produces the leading article on the Frontpage, which is using RokCandy syntax:

[main1 img="images/stories/demo/fp/mc1.jpg" url="#" label="More" title="RokTwittie" subheader="New module that harnesses the power of Twitter"]The latest extension from RocketTheme provides a means to showcase various aspects of Twitter, from your tweets to profile information plus much more. The perfect addition to any site geared towards social networking.[/main1]

[main1 img="images/stories/demo/fp/mc2.jpg" url="#" label="More" title="Transparency" subheader="Bring your art to the forefront of your content"]The template is based on a low opacity design which allows your stylish background to show through and add a degree of splendour to your site. One simple change can change the style dramatically.[/main1]

[main1 img="images/stories/demo/fp/mc3.jpg" url="#" label="More" title="SuperBlogger" subheader="Advanced plugin extending the reaches of Joomla"]SuperBlogger is a commercial plugin from JoomlaWorks and is a marvellous addition to any Joomla site. It extends the facilities of Joomla's Content System to great effect. It boasts many features such as comments, bookmarking, rating and many more adaptable and versatile controls / options.[/main1]
 
[main1 img="images/stories/demo/fp/mc4.jpg" url="#" label="More" title="Extensions" subheader="Specific styling for an array or varying extensions"]Extensions are a key element of a site and Refraction boasts styling for a diverse range of extensions, such as RokStories or RokNewsFlash. Refraction is the debut of the RokTwittie module and continues the trend of complimentary addons.[/main1]

Video

The following statement produces the video showcase as seen on Logo Tutorial page, which is using RokCandy syntax:

[video url="images/video/logo.mov" title="RokCandy Video Tutorial" img="images/stories/logo-editing-video.jpg" header="RokCandy Video Tutorial" label="Watch Now!"]Learn how to edit the template logo using Adobe Fireworks.[/video]

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:

[readon url="insert link here"]Read More...[/readon]

[readon1 url="insert link here"]Read More...[/readon1]