Welcome Guest! Login
0 items Join Now

Chimera: Recreating the Demo - FP Utility B

Your Guide to Recreating Elements of the Chimera Template for Joomla

FP Utility B

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

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.


Option Setting
Title FP Utility B
Show Title Hide
Position utility-b
Status Published
Access Public

Custom Output

Enter the following in the Custom Output text editor.

<div class="rt-device-animation" data-animation-step="1">
  <div class="device">
    <div class="phone-home-button"></div>
    <div class="tablet-home-button"></div>
    <div class="screen-stand"><div class="leg"></div><div class="foot"></div></div>
    <div class="display">
      <div class="slide1"><div>Chimera's design is great on <strong>desktops</strong>...</div></div>
      <div class="slide2"><div>...brilliant on <strong>tablets</strong>...</div></div>
      <div class="slide3"><div>and perfect for <strong>mobile!</strong></div></div>


  var duration = 20000, steps = 3, step = 1;

  setInterval( function() {
    document.querySelector( '.rt-device-animation' ).setAttribute( 'data-animation-step', step = ++step > steps ? 1 : step );
  }, duration / steps );



Option Setting
Prepare Content No
Select a Background Image Blank


Option Setting
Module Class Suffix fp-utility-b

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