0
Welcome Guest! Login
0 items Join Now

Nuance: Recreating the Demo - FP Extension B

Your Guide to Recreating Elements of the Nuance Demo for Joomla


FP Extension B

This area of the front page is a Custom HTML module. You will find the settings used in our demo below.

To replicate the "pop up" effect as you click on the images in this module, you will need to have the RokBox extension installed and activated.

Any mod_custom (Custom HTML) modules are best handled using either RokPad or no editor as a WYSIWYG editor can cause issues with any code that exists in the Custom Output field.

Details

Option Setting
Title FP Extension B
Show Title Hide
Position extension-b
Status Published
Access Public

Custom Output

<div class="gantry-row">
    <div class="gantry-width-20">
        <div class="gantry-width-spacer">
            <span class="rt-image with-overlay">
                <a data-rokbox data-rokbox-album="Nuance Gallery" data-rokbox-caption="RokBox, a fully responsive modal &quot;pop-up&quot; plugin" href="/images/rocketlauncher/home/fp-extension/img-01.jpg">
                    <img src="/images/rocketlauncher/home/fp-extension/img-01.jpg" />
                    <span class="rt-img-overlay"><span><i class="fa fa-search"></i></span></span>   
                </a>            
            </span>
        </div>
    </div>
    <div class="gantry-width-20">
        <div class="gantry-width-spacer">
            <span class="rt-image with-overlay">
                <a data-rokbox data-rokbox-album="Nuance Gallery" data-rokbox-caption="RokAjaxSearch, a search module with AJAX generated results" href="/images/rocketlauncher/home/fp-extension/img-02.jpg">
                    <img src="/images/rocketlauncher/home/fp-extension/img-02.jpg" />
                    <span class="rt-img-overlay"><span><i class="fa fa-search"></i></span></span>   
                </a>            
            </span>
        </div>
    </div>
    <div class="gantry-width-20">
        <div class="gantry-width-spacer">
            <span class="rt-image with-overlay">
                <a data-rokbox data-rokbox-album="Nuance Gallery" data-rokbox-caption="RokSprocket, a powerful content switchblade extension" href="/images/rocketlauncher/home/fp-extension/img-03.jpg">
                    <img src="/images/rocketlauncher/home/fp-extension/img-03.jpg" />
                    <span class="rt-img-overlay"><span><i class="fa fa-search"></i></span></span>   
                </a>            
            </span>
        </div>
    </div>
    <div class="gantry-width-20">
        <div class="gantry-width-spacer">
            <span class="rt-image with-overlay">
                <a data-rokbox data-rokbox-album="Nuance Gallery" data-rokbox-caption="RokBooster, a site performance utility" href="/images/rocketlauncher/home/fp-extension/img-04.jpg">
                    <img src="/images/rocketlauncher/home/fp-extension/img-04.jpg" />
                    <span class="rt-img-overlay"><span><i class="fa fa-search"></i></span></span>   
                </a>            
            </span>
        </div>
    </div>
    <div class="gantry-width-20">
        <div class="gantry-width-spacer">
            <span class="rt-image with-overlay">
                <a data-rokbox data-rokbox-album="Nuance Gallery" data-rokbox-caption="RokPad, an advanced code editor" href="/images/rocketlauncher/home/fp-extension/img-05.jpg">
                    <img src="/images/rocketlauncher/home/fp-extension/img-05.jpg" />
                    <span class="rt-img-overlay"><span><i class="fa fa-search"></i></span></span>   
                </a>            
            </span>
        </div>
    </div>              
</div>

<div class="clear"></div>

<div class="gantry-row">
    <div class="gantry-width-20">
        <div class="gantry-width-spacer">
            <span class="rt-image with-overlay">
                <a data-rokbox data-rokbox-album="Nuance Gallery" data-rokbox-caption="RokMiniEvents, a responsive events module" href="/images/rocketlauncher/home/fp-extension/img-06.jpg">
                    <img src="/images/rocketlauncher/home/fp-extension/img-06.jpg" />
                    <span class="rt-img-overlay"><span><i class="fa fa-search"></i></span></span>   
                </a>            
            </span>
        </div>
    </div>
    <div class="gantry-width-20">
        <div class="gantry-width-spacer">
            <span class="rt-image with-overlay">
                <a data-rokbox data-rokbox-album="Nuance Gallery" data-rokbox-caption="RokCandy, a macro snippet insertion plugin" href="/images/rocketlauncher/home/fp-extension/img-07.jpg">
                    <img src="/images/rocketlauncher/home/fp-extension/img-07.jpg" />
                    <span class="rt-img-overlay"><span><i class="fa fa-search"></i></span></span>   
                </a>            
            </span>
        </div>
    </div>
    <div class="gantry-width-20">
        <div class="gantry-width-spacer">
            <span class="rt-image with-overlay">
                <a data-rokbox data-rokbox-album="Nuance Gallery" data-rokbox-caption="RokComments, a multiple comments platforms integration plugin" href="/images/rocketlauncher/home/fp-extension/img-08.jpg">
                    <img src="/images/rocketlauncher/home/fp-extension/img-08.jpg" />
                    <span class="rt-img-overlay"><span><i class="fa fa-search"></i></span></span>   
                </a>            
            </span>
        </div>
    </div>
    <div class="gantry-width-20">
        <div class="gantry-width-spacer">
            <span class="rt-image with-overlay">
                <a data-rokbox data-rokbox-album="Nuance Gallery" data-rokbox-caption="RokQuickCart, a simple cart solution" href="/images/rocketlauncher/home/fp-extension/img-09.jpg">
                    <img src="/images/rocketlauncher/home/fp-extension/img-01.jpg" />
                    <span class="rt-img-overlay"><span><i class="fa fa-search"></i></span></span>   
                </a>            
            </span>
        </div>
    </div>
    <div class="gantry-width-20">
        <div class="gantry-width-spacer">
            <span class="rt-image with-overlay">
                <a data-rokbox data-rokbox-album="Nuance Gallery" data-rokbox-caption="RokWeather, an easy to use weather module" href="/images/rocketlauncher/home/fp-extension/img-10.jpg">
                    <img src="/images/rocketlauncher/home/fp-extension/img-10.jpg" />
                    <span class="rt-img-overlay"><span><i class="fa fa-search"></i></span></span>   
                </a>            
            </span>
        </div>
    </div>              
</div>

<div class="clear"></div>

Basic

Option Setting
Prepare Content No
Select a Background Image Blank

Advanced

Option Setting
Module Class Suffix fp-extension-b

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