Details

Written by Super User

Category: Demo Info

Published: 15 January 2015

Hits: 3715

Occasionally we need to use custom html to obtain the layouts shown on our demos in specific modules. The code below is what was used on this template. It is best to enter this code directly into the HTML editor function of your editor.

Image and Content Fader Code:

The S5 Image and Content Fader actually uses no custom code for this design. Simply enter the images and into the default fields in the backend of the module. This demo uses 1600x900 images, but you can use any image size; just make sure they are all the same size. Features like size, zoom, slide effects, and others are controlled in the module's backend. Links for the images are set under Image Settings tab, you can also add a link to the sub text or title by wrapping the text in an HREF call like this: <a href="you link">Your text goes here.</a>

Top Colored Boxes With Images:

This is one custom HTML module published that is published to the top_row1_1 position.

Homepage Article:

This is an article published to Featured. It's title is turned off in the article's settings.

Plus Image Boxes:

These images are published to the custom_3 position.

S5 Vertical Accordion, S5 Tab Show, Ad and Game List:

There are four modules shown here, but only two use custom HTML. The vertical accordion module has default Joomla Newsflash modules pubished to each slide, same is true for the S5 Tab Show slides. The ad and the game list use a custom HTML module, the code for these is shown below. The modules on the left (in the dark area) are published to custom_2, the images on the right side are published to right_inset.

Banner Ads:

These ads are published to below_columns_1 and below_columns_2, and they are custom HTML modules. The background for this row is controlled in the Vertex admin under Main/Layout.

S5 Media Player and Text:

This area is a custom HTML module published to bottom_row1_1. The background is controlled under Main/Layout in the template configuration. The video uses the S5 Media Player plugin, which must be installed and enabled. Instructions for this plugin are found in the plugin's backend.

S5 Masonry:

This module is published to bottom_row2_1 and does not use any custom HTML. The images and defined as the article's intro image in the settings of the article.

Social Icons:

This is a custom HTML module publishd to the custom_4 position. Ion Icons must be enabled in the template configuration for these to show.

Details

Written by Super User

Category: Demo Info

Published: 06 August 2014

Hits: 2302

Ion Icons is an iconic font that gives you scalable vector icons that can be customized by any font css command, such as size, color, backgrounds, hover effects and more. Below you will see several examples of this feature in action, but please visit http://ionicons.com/ for a full list of all icons available.

Round icon example:

Icon Examples:

View Full Cheatsheet (all CSS classes)

Details

Written by Super User

Category: Demo Info

Published: 14 September 2014

Hits: 1976

The Mail Chimp Signup module is demo'd on this page. The module is AJAX powered and allows your users to instantly signup and get added to your MailChimp list that you specify in the module admin. All you need to do is enter your MailChimp API Key and Unique List ID. The styling of the module shown here is customized specifically for this template with css overrides, and cannot be used with any other template. The same module can be used on any template, but with default or other styling in its place.

Details

Written by Super User

Category: Demo Info

Published: 13 July 2014

Hits: 2144

Our Scroll Reveal feature is powered by the script found here: https://github.com/julianlloyd/scrollReveal.js. The script allows you to add "data-scroll-reveal" to HTML elements for on page scroll animations. We recommend adding to DIVs over SPAN etc as DIVs can move vs SPAN tags just fading in. Once you add the code to a DIV refresh a page or scroll down and it will animate in. It will only do this once until you refresh the page again. The great feature about the script is you can use plain English to describe how you'd like to animate your HTML element.

Example of this in action (refresh this page if you didn't see it already):

Code used for the above:

Usage:

For a lengthier explanation on this visit the following page: https://github.com/julianlloyd/scrollReveal.js