Sample Sidebar Module

This is a sample module published to the sidebar_top position, using the -sidebar module class suffix. There is also a sidebar_bottom position below the menu.

Sample Sidebar Module

This is a sample module published to the sidebar_bottom position, using the -sidebar module class suffix. There is also a sidebar_top position below the search.
Custom Code For This Design

Search our Site

Custom Code Used For This Design

Details
Category: Demo Info
Hits: 3360
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.

Logo Setup:

The logo setup for this design is a little different than most of our templates. You can still pick your logo type from under Main/Logo in the template configuration, but you most also create a menu item on your main menu. Name the menu item "Logo Position", the type should be a Text Separator, and under Link Type set the CSS Style to "s5_logo_spacer". By creating a menu item with those specific settings the logo will automatically appear in that menu item's position. A logo is required for this design or it will cause header layout issues.




Video and Text:

This area consists of the custom_1 and custom_2 position. The video is a custom html module published to custom_1, and the text is a custom html module published to custom_2. There is a setting in the Theme Specific tab of the configuration to enable or disable an overlay on the video. Alternatively you can also publish the S5 Image and Content Fader module to custom_1.



Video:
<div class="video_wrap" style="max-height:1010px;min-height:700px;background: url('images/video_preload.jpg');">
<video muted autoplay="autoplay" loop="loop" src="images/video.mp4"></video>
<div class="video_overlay"></div>
</div>

Video Text:
<div class="video_text">
<img class="video_text_img" src="images/mountain.png" alt="" />
<div class="video_text_sub">Biking and Hiking Club</div>
<div class="video_text_large">Ready For Adventure</div>
<a href="index.php/features-mainmenu-47/template-specific-features" class="readon">Achieve More Together</a>
<div style="clear:both;height:0px;"></div>
</div>


Trails In Your Backyard:

This is a custom html module that is published to the top_row1_1 position. The background image is controlled under the Main/Layout tab in the template configuration. Scroll reveal must be enabled for the transition effect.



Trails In Your Backyard:
<div class="large_picture">
<img data-sr="move 16px scale up 20%, over 0.7s" class="large_picture_img" src="images/large_picture.jpg" alt="" />
<div class="large_picture_text">
<h3>Trails In Your Backyard</h3>
<div class="large_text_sub">
<div class="lage_text_sub_line"></div>
Explore your local national parks
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum felis in lacus dignissim venenatis. Morbi quam ante, convallis id venenatis ac, vulputate ac ex. In in commodo magna. Pellentesque dapibus risus ipsum, sed ullamcorper libero dapibus ac. Morbi porttitor venenatis malesuada. Vivamus eu magna bibendum, vestibulum turpis vitae, vestibulum dui.
</div>
<div style="clear:both;height:0px;"></div>
</div>


Accordion Menu and Icons:

This area consists of the S5 Accordion menu published to the top_row2_1 position and a custom html module published to the top_row2_2 position. Scroll reveal must be enabled for the transition effect, and Ion Icons must be enabled for the icons to appear. The available Ion Icons can be found: http://ionicons.com/



Icons:
<div class="icon_group">

<div class="icon_group_item" data-sr="move 16px scale up 20%, over 0.6s">
<div class="icon_group_icon">
<i class="ion-flame"></i>
</div>
<div style="overflow:hidden">
<span class="icon_group_title">Find a Campsite in Your Area</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum felis.
</div>
</div>

<div class="icon_group_item" data-sr="move 16px scale up 20%, over 0.6s, wait 0.2s">
<div class="icon_group_icon">
<i class="ion-waterdrop"></i>
</div>
<div style="overflow:hidden">
<span class="icon_group_title">Learn Survival Techniques</span>
Nullam ac dolor a tortor fermentum interdum et tempus justo a sollicitudin mi.
</div>
</div>

<div class="icon_group_item" data-sr="move 16px scale up 20%, over 0.6s, wait 0.4s">
<div class="icon_group_icon">
<i class="ion-leaf"></i>
</div>
<div style="overflow:hidden">
<span class="icon_group_title">Hike New Trails Nearby</span>
Praesent arcu justo, vestibulum non ante sit amet, tincidunt placerat odio.
</div>
</div>

<div class="icon_group_item" data-sr="move 16px scale up 20%, over 0.6s, wait 0.6s">
<div class="icon_group_icon">
<i class="ion-information-circled"></i>
</div>
<div style="overflow:hidden">
<span class="icon_group_title">Find Out More Information</span>
Proin vestibulum felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>

<div style="clear:both;height:0px;"></div>

</div>


Trails In Your Backyard:

This area consists of three custom html modules, one is published to top_row3_1, and two are published to custom_5. The background image is controlled under the Main/Layout tab in the template configuration. Scroll reveal must be enabled for the transition effect. Info slide must be enabled for the hover effect on the instructor images. The "Instructor / FPEA Certified" module uses the class suffix "white".



Instructors / FPEA Certified:
<div class="title_left" data-sr="move 16px scale up 20%, over 0.7s">
<h3 class="highlight1_title">Instructors</h3>
<div class="title_left_text">
<div class="title_left_text_sub">Meet our team of experts</div>
<h3>FPEA Certified</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
</div>
<div style="clear:both;height:0px;"></div>
</div>

Instructor Pictures:
<div class="info_pictures">

<div class="s5_is_css_8" data-sr="move 16px scale up 20%, over 0.6s">
<img alt="" src="images/trainer1.jpg" />
<div class="s5_is_slide_css">
<h3>Chris Reynolds</h3>
<span class="s5_is_slide_text">
Personalized outdoor expeditions
<br />
<a href="">
<i class="info_pictures_icon ion-social-facebook"></i>
</a>
<a href="">
<i class="info_pictures_icon ion-social-twitter"></i>
</a>
</span>
</div>
</div>

<div class="s5_is_css_8" data-sr="move 16px scale up 20%, over 0.6s, wait 0.2s">
<img alt="" src="images/trainer2.jpg" />
<div class="s5_is_slide_css">
<h3>Kelly Rogers</h3>
<span class="s5_is_slide_text">
Personalized outdoor expeditions
<br />
<a href="">
<i class="info_pictures_icon ion-social-facebook"></i>
</a>
<a href="">
<i class="info_pictures_icon ion-social-twitter"></i>
</a>
</span>
</div>
</div>

<div class="s5_is_css_8" data-sr="move 16px scale up 20%, over 0.6s, wait 0.4s">
<img alt="" src="images/trainer3.jpg" />
<div class="s5_is_slide_css">
<h3>Matthew Smith</h3>
<span class="s5_is_slide_text">
Personalized outdoor expeditions
<br />
<a href="">
<i class="info_pictures_icon ion-social-facebook"></i>
</a>
<a href="">
<i class="info_pictures_icon ion-social-twitter"></i>
</a>
</span>
</div>
</div>

<div class="s5_is_css_8" data-sr="move 16px scale up 20%, over 0.6s, wait 0.6s">
<img alt="" src="images/trainer4.jpg" />
<div class="s5_is_slide_css">
<h3>Brian Armstrong</h3>
<span class="s5_is_slide_text">
Personalized outdoor expeditions
<br />
<a href="">
<i class="info_pictures_icon ion-social-facebook"></i>
</a>
<a href="">
<i class="info_pictures_icon ion-social-twitter"></i>
</a>
</span>
</div>
</div>

<div class="s5_is_css_8" data-sr="move 16px scale up 20%, over 0.6s, wait 0.8s">
<img alt="" src="images/trainer5.jpg" />
<div class="s5_is_slide_css">
<h3>Amy Bridgers</h3>
<span class="s5_is_slide_text">
Personalized outdoor expeditions
<br />
<a href="">
<i class="info_pictures_icon ion-social-facebook"></i>
</a>
<a href="">
<i class="info_pictures_icon ion-social-twitter"></i>
</a>
</span>
</div>
</div>

<div class="s5_is_css_8" data-sr="move 16px scale up 20%, over 0.6s, wait 1s">
<img alt="" src="images/trainer6.jpg" />
<div class="s5_is_slide_css">
<h3>Ryan Davis</h3>
<span class="s5_is_slide_text">
Personalized outdoor expeditions
<br />
<a href="">
<i class="info_pictures_icon ion-social-facebook"></i>
</a>
<a href="">
<i class="info_pictures_icon ion-social-twitter"></i>
</a>
</span>
</div>
</div>

<div style="clear:both:height:0px;"></div>

</div>

Call Us Today:
<div class="alert_box">
<div class="alert_box_inner">

Get speical discounts on select tours and and excursions. <div class="alert_phone">Call 1-800-555-1212</div>

</div>
</div>


Explore Our Trek Packages:

This is a custom html module that is published to the below_columns_1 position. Scroll reveal must be enabled for the transition effect.



Explore Our Trek Packages:
<div class="large_text">
<h3>Explore Our Trek Packages</h3>
<div class="large_text_sub">
<div class="lage_text_sub_line"></div>
We have many affordable packages right for you
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum felis in lacus dignissim venenatis. Morbi quam ante, convallis id venenatis ac, vulputate ac ex. In in commodo magna. Pellentesque dapibus risus ipsum, sed ullamcorper libero dapibus ac. Morbi porttitor venenatis malesuada. Vivamus eu magna bibendum, vestibulum turpis vitae, vestibulum dui. Morbi quam ante, convallis id venenatis ac.
</div>

<div class="packages_wrap" data-sr="roll 10deg, over 0.7s">
<div class="package_row">
<div class="package_item package_blue">
<a href="index.php/features-mainmenu-47/template-specific-features">
<div class="package_item_img_wrap">
<img src="images/package1.jpg" alt="" />
</div>
</a>
<div class="package_item_text">
<h3>Adventure Plan</h3>
<div class="package_item_price">
<span class="package_item_dollar_sign">$</span>
<span class="package_item_dollar">49</span>
<span class="package_item_cents">99</span>
</div>
<div class="package_item_list">Custom Trail Experience For 1 Adult</div>
<div class="package_item_list">Self Guided Tour With Maps</div>
<div class="package_item_list">Lasts Between one and two hours</div>
<div class="package_item_list">Bring Your Own Equipment On The Trek</div>
</div>
</div>
<div class="package_item package_red">
<a href="index.php/features-mainmenu-47/template-specific-features">
<div class="package_item_img_wrap">
<img src="images/package2.jpg" alt="" />
</div>
</a>
<div class="package_item_text">
<h3>Outdoor Plan</h3>
<div class="package_item_price">
<span class="package_item_dollar_sign">$</span>
<span class="package_item_dollar">99</span>
<span class="package_item_cents">99</span>
</div>
<div class="package_item_list">Custom Trail Experience For 1 Adult</div>
<div class="package_item_list">Self Guided Tour With Maps</div>
<div class="package_item_list">Lasts Between two and three hours</div>
<div class="package_item_list">Bring Your Own Equipment Except Ropes</div>
</div>
</div>
<div style="clear:both:height:0px;"></div>
</div>
<div class="package_row">
<div class="package_item package_orange">
<a href="index.php/features-mainmenu-47/template-specific-features">
<div class="package_item_img_wrap">
<img src="images/package3.jpg" alt="" />
</div>
</a>
<div class="package_item_text">
<h3>Best Value Plan</h3>
<div class="package_item_price">
<span class="package_item_dollar_sign">$</span>
<span class="package_item_dollar">299</span>
<span class="package_item_cents">99</span>
</div>
<div class="package_item_list">Custom Trail Experience For 2 Adults</div>
<div class="package_item_list">Guide By A Rookie Trail Member</div>
<div class="package_item_list">Lasts Between three and four hours</div>
<div class="package_item_list">All Equipment Will Be Provided On The Trek</div>
</div>
</div>
<div class="package_item package_green">
<a href="index.php/features-mainmenu-47/template-specific-features">
<div class="package_item_img_wrap">
<img src="images/package4.jpg" alt="" />
</div>
</a>
<div class="package_item_text">
<h3>Ultimate Plan</h3>
<div class="package_item_price">
<span class="package_item_dollar_sign">$</span>
<span class="package_item_dollar">599</span>
<span class="package_item_cents">99</span>
</div>
<div class="package_item_list">Custom Trail Experience For Up To 5</div>
<div class="package_item_list">Guided By a Veteran Trail Member</div>
<div class="package_item_list">All Day From Sunrise to Sunset</div>
<div class="package_item_list">All Equipment Will Be Provided On The Trek</div>
</div>
</div>
<div style="clear:both:height:0px;"></div>
</div>
<div style="clear:both:height:0px;"></div>
</div>


Signup Today and Save:

This is a custom html module that is published to the custom_6 position. Scroll reveal must be enabled for the transition effect. Ion Icons must be enabled for the credit card icon to appear. The available Ion Icons can be found: http://ionicons.com/



Signup Today and Save:
<div class="overlapping_img_wrap">

<div class="overlapping_image_highlight">
<div class="s5_wrap">
<img src="images/hiker.png" class="overlapping_image_img" alt="" data-sr="move 16px scale up 20%, over 0.7s" />
<div class="overlapping_image_text">
<div class="overlapping_image_sub">Signup today and save!</div>
<h3>Up To 40% Off</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.
</div>
<div style="clear:both;height:0px;"></div>
</div>
<div style="clear:both;height:0px;"></div>
</div>

<div class="overlapping_image_gray">
<div class="s5_wrap">
<div class="overlapping_image_gray_text">
<div class="overlapping_image_gray_box">
<div class="overlapping_image_gray_box_icon">
<i class="ion-card"></i>
</div>
<div style="overflow:hidden">
<h3 class="overlapping_image_gray_box_title">100% Money Back Guarantee</h3>
Mauris feugiat facilisis nulla, ac semper felis eleifend in. Lorem ipsum dolor sit amet, consectetur adipiscing elit iaculis.
</div>
</div>
</div>
<div style="clear:both;height:0px;"></div>
</div>
<div style="clear:both;height:0px;"></div>
</div>

</div>


Testimonials Tab Show:

This the S5 Tab Show module published to the bottom_row2_1 position, using the classes "white large_title centered extra_spacing". The background image is controlled under the Main/Layout tab in the template configuration. For setup instructions for S5 Tab Show please visit: http://www.shape5.com/documentation/Joomla/Extensions/S5-Tab-Show



Testimonial:
<div class="testimonial_item">
<div class="testimonial_text">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute."
</div>
<div class="testimonial_name">Ron Miller</div>
<div class="testimonial_name_sub">Hiking Adventure</div>
</div>


Social Icons:

The social icons are not shown on this demo but they are stylized for positoin custom_4 and they do come with the site shaper. They are a custom html module. Ion Icons must be enabled for the icons to appear.



Social Icons:
<a href="" class="social_icon ion-social-facebook"></a>
<a href="" class="social_icon ion-social-twitter"></a>
<a href="" class="social_icon ion-social-googleplus"></a>
<a href="" class="social_icon ion-social-pinterest"></a>
  • fr-FR
  • English (UK)
  • You are here:  
  • Home /
  • Tutorials /
  • Custom Code For This Design