Details

Written by Super User

Category: Demo Info

Published: 15 January 2015

Hits: 2463

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:

Image and Content Fader Code:

This is for the code that we used in the "description" box for the image and content fader.

Custom 2 and Custom 3:

The following area shows the "S5 Tab Show" module published to the custom_2 module position with a class of "-righttab" set to it. This enables only the right arrow to show if you have arrows enabled in the Tab Show admin. It also includes the specially designed arrow that butts up next to the custom_3 module position that has a white background. The below code is what we used for the play button and text published to the first tab show position of "s5_tab1":

Custom 4 and Custom 5:

The following area shows the "S5 Tab Show" module published to the custom_5 module position with a class of "-lefttab" set to it. This enables only the left arrow to show if you have arrows enabled in the Tab Show admin. It also includes the specially designed arrow that butts up next to the custom_4 module position that has a white background. The below code is what we used for the cart and products published to the first tab show position of "s5_tab4". NOTE: You will see the width_33 in the below code. This means 3 in a row. You can also change the 33 to either 50 or 25. 50 for 2 in a row and 25 for 4:

Cart and Phone/Address:

The cart is simply the "S5 Simple Cart" module published to the "cart" position. As for the phone and address the below code is pasted in a custom HTML module to the "phone_hours" module position:

Massage Packages:

This is the below code we used for the Massage Packages area and what is published to the "s5_tab3" position:

Testimonial Area:

This is the code we used for the testimonial area. This code is published to the "s5_tab7" module position.

Book an Appointment:

This is the code used for the book an appointment area:

Social Icons:

This is the code published to the "custom_6" module position:

Our Store:

The below code is what we published to an article. With the "S5 Snip Cart" and Ion Icons enabled in the Vertex admin this is what your site will look like too. We created a menu item and linked it to a category and set the menu item to "list categories". We then created 3 categories and published to this top level parent category that the menu item "Our Store" is linking too. We then just published articles with the below content into each of the these categories along with uploading intro images and full page detail images.