0
Welcome Guest! Login
0 items Join Now

Cygnet: Recreating the Demo - FP RokSprocket Tabs

Your Guide to Recreating Elements of the Cygnet Template for Joomla

details download demo support

FP RokSprocket Tabs

Demo

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

There are two RokSprocket modules represented in this area of the page. The one pictured above appears for devices other than phones. The other is set to display only on phones (pictured below).

Demo Phone

The settings used in our demo are listed below.

Details

Demo

Option Setting
Title FP RokSprocket Tabs
Show Title Hide
Access Public
Position showcase-a
Status Published
Content Provider Simple
Layout Mode Tabs

Simple Content Provider

The Tab Label and Description fields in each item have been altered. A couple examples of these article changes can be found below.

Article 1

Option Setting
Tab Label <i class="fa fa-fw fa-calculator"></i>
Icon None
Link None

Description

<div class="gantry-row">
    <div class="gantry-width-container">
        <div class="gantry-width-25 rt-bg-1">
            <h2>Easy to Configure CSS Menu</h2>
        </div>

        <div class="gantry-width-25">
            <a href="#"><span class="sprocket-strips-image-overlay"><img alt=
            "image" src=
            "images/rocketlauncher/home/fp-roksprocket-tabs/img-01.jpg"></span></a>
        </div>

        <div class="gantry-width-25 rt-bg-2">
            <h2>Light and Dark Style Variations</h2>
        </div>

        <div class="gantry-width-25">
            <a href="#"><span class="sprocket-strips-image-overlay"><img alt=
            "image" src=
            "images/rocketlauncher/home/fp-roksprocket-tabs/img-02.jpg"></span></a>
        </div>
    </div>
</div>

Article 2

Option Setting
Tab Label <i class="fa fa-fw fa-clock-o"></i>
Icon None
Link None

Description

<div class="gantry-row">
    <div class="gantry-width-container">
        <div class="gantry-width-25 rt-bg-1">
            <h2>Multiple Grid Layout Possibilities</h2>
        </div>

        <div class="gantry-width-25">
            <a href="#"><span class="sprocket-strips-image-overlay"><img alt=
            "image" src=
            "images/rocketlauncher/home/fp-roksprocket-tabs/img-03.jpg"></span></a>
        </div>

        <div class="gantry-width-25 rt-bg-2">
            <h2>Many Color Chooser Options</h2>
        </div>

        <div class="gantry-width-25">
            <a href="#"><span class="sprocket-strips-image-overlay"><img alt=
            "image" src=
            "images/rocketlauncher/home/fp-roksprocket-tabs/img-04.jpg"></span></a>
        </div>
    </div>
</div>

Layout Options

Demo

Option Setting
Theme Default
Display Limit ∞
Tabs Position Bottom
Animation Slide and Fade
Autoplay Disable
Autoplay Delay 5
Image Resize Disable
Preview Length 0
Strip HTML Tags No
Default Title Default Article Title
Default Article Text Default Article Text
Default Article Image Default Article Image
Default Link Default Article Link

Advanced

Demo

Option Setting
Module Class Suffix fp-roksprocket-tabs hidden-phone

FP RokSprocket Tabs - Phone Only

Demo Phone

The settings used in our demo for phones are listed below.

Details

Demo

Option Setting
Title FP RokSprocket Tabs - Phone Only
Show Title Hide
Access Public
Position showcase-a
Status Published
Content Provider Simple
Layout Mode Tabs

Simple Content Provider

The Tab Label and Description fields in each item have been altered. A couple examples of these article changes can be found below.

Article 1

Option Setting
Tab Label <i class="fa fa-fw fa-calculator"></i>
Icon None
Link None

Description

<div class="gantry-row">
    <div class="gantry-width-container">
        <div class="gantry-width-100">
            <a href="#"><span class="sprocket-strips-image-overlay"><img alt=
            "image" src=
            "images/rocketlauncher/home/fp-roksprocket-tabs/img-01.jpg"></span></a>
        </div>
    </div>
</div>

Article 2

Option Setting
Tab Label <i class="fa fa-fw fa-clock-o"></i>
Icon None
Link None

Description

<div class="gantry-row">
    <div class="gantry-width-container">
        <div class="gantry-width-100">
            <a href="#"><span class="sprocket-strips-image-overlay"><img alt=
            "image" src=
            "images/rocketlauncher/home/fp-roksprocket-tabs/img-02.jpg"></span></a>
        </div>
    </div>
</div>

Layout Options

Demo

Option Setting
Theme Default
Display Limit ∞
Tabs Position Bottom
Animation Slide and Fade
Autoplay Disable
Autoplay Delay 5
Image Resize Disable
Preview Length 0
Strip HTML Tags No
Default Title Default Article Title
Default Article Text Default Article Text
Default Article Image Default Article Image
Default Link Default Article Link

Advanced

Demo

Option Setting
Module Class Suffix fp-roksprocket-tabs visible-phone
Found errors? Think you can improve this documentation? Please edit this page. You can also view the history of this page.