The S5 Media Player is a very powerful, responsive, free to use, html5 audio and video player that will work on any device! It is based on the MediaElement html5 script, and comes loaded with features! Because this player is html5 based that means it will work on all devices, including Apple products. Setup is a breeze, with absolutely no programming knowledge needed at all. Please see some working examples below. Click Read More for a full list of options available.

At the bottom of this page you will see three example sermon blog posts using this plugin. This easily setup through the default blog category structure of the CMS itself.

MP3 Example:

MP4 Example:

The video above can be downloaded from http://www.creationswap.com/media/12703 for your use. It is not being re-distributed by shape5.com. This plugin does have the ability for a Download button for both audio and video.

Read more ...

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:

Simply enter the images and into the default fields in the backend of the module. This demo uses 2000x1030 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. The module is published to the "custom_3" module position



Code used for title area: Code used for description area:

Menu Overlay:

The custom_4 is a position that will show on top of the custom_3 module position. It will only show when there is a custom_3 module published. For the demo we published our Image and Content Fader to the custom_3 position. The custom_4 position is designed to show a menu as we have demo'd and the scroll bar will only show if the content extends past the vertical height of the position. Just simply publish a standard Joomla menu to the custom_4 module position:

Tab Show Icon Mode:

The Tab Show is published to the "below_columns_1" module position and has a custom class of "-icons" and a module suffix of "-default"


The below code is what is placed in each "button text" area for the Tab Show:

Social Icons:

This is one custom HTML module that is published to the custom_1 position. Ion Icons must be enabled in the template configuration for these to show.

Upcoming Events Dates:

This is a custom HTML module published to the "s5_tab1" module position.

Quick Link Boxes:

This code is published to a custom HTML module published to the bottom_row1_1 position.

Quick link box text:

This code is published to a custom HTML module published to the bottom_row1_2 position.

Latest News Text:

This code is published to a custom HTML module published to the bottom_row2_1 position.

Upcoming Meetings and Alerts:

This is the Joomla "Article - Categories" module published to the left position. We used the module style "-highlight2line" and "-highlight1line":

S5 Masonry:

This module is published to above_body_1 and does not use any custom HTML. The images and defined as the article's intro image in the settings of the article. We have set the display type to "overlay" and selected the item width to "first item only":


Example shown with full width items:

Township Office:

This is a custom HTML module publishd to the custom_6 position.

Centered Logo

In this design we have for the first time included a centered logo within the main menu. To do so we had to add some JavaScript and custom CSS. Below is a screenshot of the logo as seen on the site and following it is a small tutorial to guide you on how to set this up.



1. The first step to create the centered logo is to create an external link menu item and publish it between all your other menu items. To get it centered at a good spot you may have to reword or add/remove a menu item since the logo is just another menu item itself. It works best when you have an even amount of menu items so that you can just stick the logo right in the middle of them. Below is a screenshot of this first step under the Joomla menu manager area.



2. The next step is to click the tab "link type" and enter in the CSS class for the logo so the design knows where to position your logo. So enter in the class "s5_logo_spacer" as shown below:



3. Next you may need to edit the vertical position of your logo here:

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.

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)

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

The S5 Live Search module is demo'd towards the top of this page and can be used on any Joomla template. 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.

Allow your users to search quickly and without loading or refreshing pages with our amazing ajax search module! Simply publish the module to the 'search' position.

The S5 Vertical Accordion module is demonstrated on the left side of this page.

This module contains up to 10 module positions that appear in an accordion function so you can publish any of your favorite modules or custom html modules to one of the accordion slides and keep your site clean and consolidated while giving it a nice effect. 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.

Features at a Glance:

• Responsive/Fluid layout
• Set the width of the module
• Onclick or Onmouseover trigger methods
• Auto cycle or manual for transition
• Set slide transition speed
• Compatible with IE7+, Firefox, Opera 10.5+, Safari, Chrome

The Map it with Google module is displayed on this page. Simply enter your address and the module uses the Google API to display a map with a marker to the address. A user simply clicks the marker and they are prompted with a popup box to get directions. Clicking "Get Directions" will take you to google maps with your business address already entered so all they have to do is enter their address to get directions. You can also specify the size of the map and whether or not to enable or disable certain controls.

The floating menu feature is a great way for your users to easily navigate your website! The floating menu will show at the top of your browser once the screen reaches a certain point. You can determine the exact point at which this occurs via the template specific area of Vertex. NOTE: This is a Vertex addition and is not guaranteed to work with all Vertex Templates. Some custom CSS may need to be adjusted per template. This feature is not supported by IE7/8.

Features at a glance:

• Set a background image to the menu, gradient or solid color
• Set to snap or smooth scroll in
• Determine at which point as you scroll down your page that the menu drops in
• and many more features, just check out the screenshot below

Admin area of the floating menu:

Parallax backgrounds as well as other background options are built directly into the Vertex Framework. Parallax causes the background image of an element to scroll at a different speed than your browser. For an example of this view the homepage of the Velocity template here and watch the background of the top_row1 area as you scroll down the page. This feature is found under "Backgrounds" tab in Vetex, where you can control the background for many areas of your website.

Features:

• Set the scroll speed of the images
• Set background repeat style
• Set background image size, 100%, cover, contain, etc
• Set custom backgrounds for all s5 rows in the framework.
• Enable or disable parallax on a per row basis

Admin Area Of The Backgrounds Tab: