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. Some area may require that you enable the Ion Icons (Under General) and Scroll Reveal (Under Javascripts) features in the template configuration.

Video and Tab Show:

The are shown below uses the custom_3 positiion for the video in a custom html module, and the custom_4 postion which overlays custom_3 for the S5 Tab Show module. Custom_3 will accept any module, but on this demo we show it with a custom html module that uses an html5 video.



Code used for video in custom_3. Adjust the height settings as necessary. The video itself is not included; a link is provided in the downloads area for purchase from it's copyright owner. Note - the video will not show on tablets and mobile due to restrictions in the devices that do not allow video to be automatically played, a poster image should be defined for these devices:


Code used for the S5 Tab Show in custom_4:

For setup instructions for S5 Tab Show please visit http://www.shape5.com/documentation/Joomla/Extensions/S5-Tab-Show

Top Three Boxes:

This is a custom html module that is published to the custom_5 position.



Code used for this area:

Middle Lists:

This is a custom html module that is published to the top_row1 position. The image on the left is defined in the tempalte configuration under the Theme Specific tab.



Code used for this area:

Large Text Area:

This is a custom html module that is published to the custom_6 position.



Code used for this area:

Center Area:

The text at the top of this area is simply a default article that is published to the frontpage. The three images below that are in a custom html module that is published to the S5 Tab Show slides, the code for these is below. The Book Appointment area is our S5 Quick Contact module that is published to the right position with the classes "dark" and "split_title_small".



Code used for the S5 Tab Show in middle_bottom_1:

For setup instructions for S5 Tab Show please visit http://www.shape5.com/documentation/Joomla/Extensions/S5-Tab-Show

Our Doctors:

This is a custom html module that is published to the bottom_row_1 position. The background for this area is controlled under the Main / Layout tab in the template configuration.



Code used for this area:

Our History and S5 Vertical Accordion:

The Our History area is a custom html module that is published to bottom_row2_1 and uses the classes "split_title" and "padding_right", it's code is found below. The accordion area uses our S5 Vertical Accorion and module. The image on the right is defined under the Theme Specific tab in the template configuration.



Code used for this area:


The code used for the S5 Vertical Accordion slides is shown below. It uses the classes "split_title" and "padding_right". For setup instructions for the S5 Vertical Accordion please visit http://www.shape5.com/documentation/Joomla/Extensions/S5-Vertical-Accordion

S5 Map It and Our Location:

The Our Location area is a custom html module that is published to the bottom_row3_2 position, uses the classes "split_title" and "extra_padding". The map is our S5 Map It module that is published to bottom_row3_1.



Code used for this area:

Top Bar:

This bar consist of custom_1, custom_2, language, and search positions. It also contains the login and register links, which are explained here.



Code used for phone number and address area in custom_1:


Code used for social icon area in custom_2:

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)

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