0
Welcome Guest! Login
0 items Join Now

Nuance: Recreating the Demo - RokSprocket Grids - Multiple Layouts

Your Guide to Recreating Elements of the Nuance Demo for Joomla


RokSprocket Grids - Multiple Layouts

This area of the page is a RokSprocket module utilizing the Simple content provider and the Grids layout.

The settings used in our demo are listed below.

Details

Option Setting
Title RokSprocket[span class="rt-title-tag"]Multiple Layouts & Themes[/span]
Show Title Show
Access Public
Position maintop-a
Status Published
Content Provider Simple
Layout Mode Grids

The title of this module requires RokCandy in order to appear properly on the screen due to the [span] tags present. See the main RokCandy guide for additional instructions.

Simple Content Provider

The Title and Description fields in each item have been altered. A few examples of these article changes can be found below, excluding the Image and Link fields which will likely not work on your local copy as the links will be different.

Article 1

Title

Grids

Description

<span class="rt-grids-heading1"><a href="#">A content block layout <span class="hidden-tablet">with dynamic distribution</span>.</a></span><span class="rt-grids-heading2">Present with images, text overlays, content or with all. <span class="visible-large">Grids is configurable up to 10 columns and has one built-in theme.</span></span><span class="rt-grids-heading3"><a class="largemarginright" href="#"><i class="fa fa-quote-right fa-fw"></i> Read More</a> <a href="#"><i class="fa fa-cloud-download fa-fw"></i> Download</a></span>

Article 2

Title

Features

Description

<span class="rt-grids-heading1"><a href="#"><span class="hidden-tablet">A layout for showcasing f</span><span class="visible-tablet">F</span>eatured content.</a></span><span class="rt-grids-heading2"><span>A slideshow layout, with various configurable themes<span class="visible-large"> for showcasing feature images with or without content</span>.</span></span><span class="rt-grids-heading3"><a href="#" class="largemarginright"><i class="fa fa-quote-right fa-fw"></i> Read More</a> <a href="#"><i class="fa fa-cloud-download fa-fw"></i> Download</a></span>

Article 3

The third item has a custom image in the Image field. This enables the grid item to show up as an image with the Description appearing as you move your mouse cursor over it.

Title

Headlines

Description

<span class="rt-grids-heading1"><a href="#">A content snippet or newsticker layout.</a></span><span class="rt-grids-heading2"><span class="hidden-tablet">Headlines is outfitted with a word counter to auto snippet text.</span></span><span class="rt-grids-heading3"><a href="#" class="largemarginright"><i class="fa fa-quote-right fa-fw"></i> Read More</a> <a href="#"><i class="fa fa-cloud-download fa-fw"></i> Download</a></span>

Layout Options

Option Setting
Theme Basic
Display Limit
Columns 3
Preview Length
Strip HTML Tags No
Block Animation Fade, Scale, Rotate
Image Resize Disable
Default Title Default Article Title
Default Article Text Default Article Text
Default Article Image Default Article Image
Default Link Default Article Link

Advanced

Option Setting
Module Class Suffix fp-roksprocket-grids-maintop rt-title-center rt-large-title

Found errors? Think you can improve this documentation? Please edit this page. You can also view the history of this page.