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
  • You are here:  
  • Home /
  • Tutorials /
  • Custom Code For This Design
1103 Park Avenue Colorado City, USA
Mon-Sat: 8am to 5pm Closed on Sundays
1-800-555-1212

Search our Site

Custom Code Used For This Design

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

Social Icons:

This is a custom html module that is published custom_6. It does require Ion Icons to be enabled.



<a href="" target="_blank" class="social_icon ion-social-facebook"></a>
<a href="" target="_blank" class="social_icon ion-social-twitter"></a>
<a href="" target="_blank" class="social_icon ion-social-googleplus"></a>
<a href="" target="_blank" class="social_icon ion-social-pinterest"></a>
<a href="" target="_blank" class="social_icon ion-social-linkedin"></a>

Top Header Info:

This is a custom html module that is published to custom_1. It does require Ion Icons to be enabled.



<div class="top_info">
<div class="top_info_set">
<div class="top_info_set_inner">
<i class="ion-ios-home"></i>
<div class="top_info_set_right">
<span class="top_info_text_top">1103 Park Avenue</span>
<span class="top_info_text_bottom">Colorado City, USA</span>
</div>
</div>
</div>
<div class="top_info_set">
<div class="top_info_set_inner">
<i class="ion-clock"></i>
<div class="top_info_set_right">
<span class="top_info_text_top">Mon-Sat: 8am to 5pm</span>
<span class="top_info_text_bottom">Closed on Sundays</span>
</div>
</div>
</div>
<div style="clear:both;height:0px;"></div>
</div>

Phone Number:

This is a custom html module that is published to custom_2. It does require Ion Icons to be enabled.



<div class="phone_number">
<img src="images/phone.png" alt="" />
1-800-555-1212
</div>

Image and Content Fader & Quick Contact:

The S5 Image and Cotent Fader is published custom_3 and the slides use only the slide text; make sure the titles are turned off. The custom html used for the slides is found below. The text can use class "iacf_right" or "iacf_left"

For setup instructions of this extension please visit https://www.shape5.com/documentation/Joomla/Extensions/S5-Image-and-Content-Fader

The S5 Quick Contact is published custom_4 and shows below the Image and Content Fader. The pre-text field is required for this design, that can be set in the module's parameters. The pre-text on this demo reads "Request a Quote" with no special html markup needed.

For setup instructions of this extension please visit https://www.shape5.com/documentation/Joomla/Extensions/S5-Quick-Contact



<span class="iacf_text iacf_right">

<span class="iacf_title">Learn How To Grow Your Own Beautiful Garden</span>

Lorem ipsum dolor sit amet, consectetur adipiicing elit sed do eiusmod
tempor incid dunt ut lorem ipsum labore et dolore magna.
<br><br>
<a href="index.php/extensions/s5-image-and-content-fader" class="readon">Learn More</a>
&nbsp;&nbsp;&nbsp;
<a href="index.php/extensions/s5-image-and-content-fader" class="readon readon_highlight2">Get Started Now</a>

</span>

20 Years of Quality:

This is a custom html module that is published to top_row1_1.



<div class="left_title">
<h3>20 Years of Quality Service in Landscaping</h3>
Quisque odio nisi, pharetra vitae nisl commodo, finibus tristique lacus. Nullam dolor odio, tempus quis ante sed, iaculis sollicitudin sem. Duis et viverra turpis. Cras fermentum laoreet nulla in semper. Tellus ultricies gravida. Phasellus quis erat eu tortor malesuada tristique vitae volutpat nulla.
<div style="clear:both;height:0px;"></div>
</div>

OUr Services Top Boxes:

This is a custom html module that is published to top_row2_1. The background for this row is controlled in the template configuration under Main/Layout.



<div class="service_wrap">
<div class="service_row" data-sr="enter left, over 0.8s, move 300px, wait 0.3s">
<div class="service_item">
<a href="/demo/fitness_center/index.php/features-mainmenu-47/template-specific-features">
<div class="service_item_img_wrap">
<img src="images/service1.jpg" alt="">
</div>
</a>
<div class="service_item_text">
<div class="service_item_text_inner">
<h3>Lawn & Garden Care</h3>

Lorem ipsum dolor sit amet, consectetur adipi icing elit sed do eiusmod tempor incid dunt.
</div>
<a class="readon readon_highlight1_less1" href="index.php/features-mainmenu-47/template-specific-features">Get Started Now</a>
</div>
</div>
<div class="service_item">
<a href="/demo/fitness_center/index.php/features-mainmenu-47/template-specific-features">
<div class="service_item_img_wrap">
<img src="images/service2.jpg" alt="">
</div>
</a>
<div class="service_item_text">
<div class="service_item_text_inner">
<h3>Snow Removal</h3>
Mauris convallis dictum urna, sit amet rhoncus lacus lacinia nec. Phasellus vel ligula ipsum nisi.
</div>
<a class="readon" href="index.php/features-mainmenu-47/template-specific-features">Get Started Now</a>
</div>
</div>
<div style="clear:both:height:0px;"></div>
</div>
<div class="service_row" data-sr="enter right, over 0.8s, move 300px, wait 0.3s">
<div class="service_item">
<a href="/demo/fitness_center/index.php/features-mainmenu-47/template-specific-features">
<div class="service_item_img_wrap">
<img src="images/service3.jpg" alt="">
</div>
</a>
<div class="service_item_text">
<div class="service_item_text_inner">
<h3>Patios & Pavers</h3>
Praesent pharetra neque ut nulla faucibus, a aliquet purus condimentum. Curabitur at eros.
</div>
<a class="readon readon_highlight1_plus1" href="index.php/features-mainmenu-47/template-specific-features">Get Started Now</a>
</div>
</div>
<div class="service_item">
<a href="/demo/fitness_center/index.php/features-mainmenu-47/template-specific-features">
<div class="service_item_img_wrap">
<img src="images/service4.jpg" alt="">
</div>
</a>
<div class="service_item_text">
<div class="service_item_text_inner">
<h3>Mowing Services</h3>
Praesent pharetra neque ut nulla faucibus, a aliquet purus condimentum. In ac elit interdum.
</div>
<a class="readon readon_highlight1_plus2" href="index.php/features-mainmenu-47/template-specific-features">Get Started Now</a>
</div>
</div>
<div style="clear:both:height:0px;"></div>
</div>
<div style="clear:both:height:0px;"></div>
</div>

Landscape Experts:

This is a custom html module that is published to top_row_1.



<div class="picture_text">

<div class="picture_text_left">
<h3>We are Your Landscape Experts</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris commodo luctus ante, in vestibulum est auctor ut. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam vitae ante consectetur, elementum justo nec, convallis tortor.
<br /><br /><br />
<div class="icon_text">
<img src="images/icon1.png" alt="" />
<h4>Professional Quality</h4>
Mauris purus lorem, mattis at tincidunt at, accumsan quis nulla. Pellentesque vel lacus sit quis egestas amet.
</div>
<div class="icon_text">
<img src="images/icon2.png" alt="" />
<h4>Daily Maintenance</h4>
Mauris commodo luctus ante, in vestibulum est. Lorem ipsum dolor sit amet, consec tetur quis egestas adi elit.
</div>
<div class="icon_text">
<img src="images/icon3.png" alt="" />
<h4>Fence Installations</h4>
Duis nec euismod libero. In tellus urna, iaculis ut tellus ut, ultricies consectetur quis egestas finibus lorem nulla.
</div>
<div style="clear:both;height:0px;"></div>
</div>

<div class="picture_text_right" data-sr="move 16px scale up 20%, over 0.7s">
<img src="images/person.jpg" alt="" />
<div style="clear:both;height:0px;"></div>
</div>

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

</div>

Article and Price Boxes:

This is a custom html module that is published to right_top, and an article set to featured. The background for this row is controlled in the template configuration under Main/Layout.



right_top module:
<div class="prices_wrap">

<div class="centered_title">
<h3>Pick the landscape service that’s right for you!</h3>
Lorem ipsum dolor sit amet, consectetur adipiicing elit sed do eiusmod tempor incid dunt ut lorem ipsum labore et dolore magna aliqua Aliquam adipiscing egestas.
<br /><br />
<a href="index.php/features-mainmenu-47/template-specific-features" class="readon readon_highlight2">Get Started Now</a>
</div>

<div class="price_display" data-sr="move 16px scale up 20%, over 0.7s">
<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Standard</div>
<div class="s5_price_wrap"><span class="dollarsign">$</span><span class="price">249</span><span class="month">/per month</span></div>
<div class="s5_options">
<div class="s5_option">1 Hour of Weeding</div>
<div class="s5_option">Weekly Mowing</div>
<div class="s5_option">Weekly Watering</div>
<div class="s5_option">Basic Lawn Treatment</div>
<div class="s5_option">48 Hour Response</div>
</div>
</div>
</div>
<div class="s5_pricetable_column recommended" data-sr="move 16px scale up 20%, over 0.7s, wait 0.3s">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Platinum</div>
<div class="s5_price_wrap"><span class="dollarsign">$</span><span class="price">399</span><span class="month">/per month</span></div>
<div class="s5_options">
<div class="s5_option">4 Hours of Weeding</div>
<div class="s5_option">Bi-Weekly Mowing</div>
<div class="s5_option">Bi-Weekly Watering</div>
<div class="s5_option">Full Lawn Treatment</div>
<div class="s5_option">On Call Response</div>
</div>
</div>
</div>
<div style="clear: both; height: 0px;"></div>
</div>

</div>


article:
<a href="index.php/features-mainmenu-47/template-specific-features">
<img src="images/article.jpg" alt="">
<h3 class="default_font article_h3">Cultivating people with a love for gardening</h3>
</a>
Lorem ipsum dolor sit amet, consectetur adipisc ing elit, sed do eiusmod tempor incididun ut labore et dolore. Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem ape riam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<hr id="system-readmore" />
<br /><br />
Curabitur iaculis, tortor at ornare cursus, nisi tortor malesuada urna, ac posuere leo augue pulvinar mi. Sed tristique pulvinar massa, malesuada interdum nunc tincidunt quis. Aliquam bibendum lobortis magna eu faucibus. Integer et tincidunt elit. Suspendisse vestibulum ipsum nec sapien accumsan, at lacinia nisl finibus. Aenean in malesuada diam. Pellentesque volutpat diam enim, a consectetur nisi iaculis id. Donec vitae porttitor lacus, quis porttitor ligula. Nam sed purus mattis, ornare nunc sed, interdum massa. Maecenas id risus vitae mauris tempus lobortis. Quisque suscipit placerat augue vitae tristique. Aenean convallis commodo odio, eu facilisis lacus faucibus quis. Sed non sapien sagittis, dignissim ante eget, pharetra leo.
<br /><br />
Ut mattis pharetra rhoncus. Suspendisse pharetra, mauris at scelerisque lobortis, nibh risus commodo lorem, id fringilla erat metus at nulla. Fusce et justo in tortor eleifend suscipit. Phasellus malesuada in ex tempor fringilla. Donec fringilla metus eu leo tincidunt venenatis. Duis lacinia mattis lorem, non elementum mi malesuada a. Vestibulum eleifend ultricies purus a gravida. Mauris quis vehicula ex. Integer non nulla fringilla, placerat est eget, aliquam ligula. Etiam consectetur lorem neque, ut dictum odio consequat eget. Ut eu odio vel lacus porta aliquet.
<br /><br />
Curabitur pretium aliquet magna non rutrum. Ut a cursus odio. Phasellus vel justo eget enim varius venenatis at sed metus. Vestibulum maximus dolor fermentum, tristique purus eget, finibus elit. Mauris in sapien aliquam, bibendum orci nec, consequat lectus. Nunc bibendum lobortis quam. Sed sollicitudin egestas mauris. Fusce lobortis odio et orci interdum imperdiet.

FAQ Area:

This is a custom html module that is published to bottom_row1_1.



<div class="faqs_wrap">

<div class="centered_title">
<h3>Curb Appeal is the perfect choice for your small business</h3>
Lorem ipsum dolor sit amet, consectetur adipiicing elit sed do eiusmod tempor incid dunt ut lorem ipsum labore et dolore magna aliqua Aliquam adipiscing egestas leo Duis et erat aliquam.
</div>

<div class="faqs_wrap_detail_wrap">

<div class="faqs_wrap_detail_img_wrap" style="background: url('images/faq.jpg');"></div>

<div class="faqs_wrap_detail_text_wrap" data-sr="move 16px scale up 20%, over 0.7s">
<div class="faqs_wrap_detail_text_wrap_inner">
<h4 class="default_font">What You Need To Know About Hardscaping</h4>
<section class="ac-container">
<div><input id="ac-1" name="accordion-1" checked="checked" type="radio" /> <label for="ac-1">1. How long will a patio installation generally take?</label>
<article class="ac-small">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis gravida justo, a rhoncus sem volutpat in. Pellentesque lacinia lacinia ligula, eget tempor elit sagittis non. Vestibulum pellentesque lorem nec diam interdum pellentesque.</p>
</article>
</div>
<div><input id="ac-2" name="accordion-1" type="radio" /> <label for="ac-2">2. What brand pavers do you install and where are they made?</label>
<article class="ac-small">
<p>Etiam tempus facilisis ultrices. Nam adipiscing nunc nec est dapibus, eget eleifend velit mattis. Curabitur facilisis a rhoncus sem volutpat in condimentum augue at viverra. Ut ut tortor feugiat, dignissim nulla non, venenatis leo.</p>
</article>
</div>
<div><input id="ac-3" name="accordion-1" type="radio" /> <label for="ac-3">3. How do I go about receiving a quote for hardscaping?</label>
<article class="ac-small">
<p>Morbi nunc nunc, elementum quis tortor et, feugiat pharetra eros. Mauris mattis purus at lobortis auctor. Nullam eros velit, laoreet vel libero posuere, a rhoncus sem volutpat in eleifend ornare libero. Cras iaculis interdum dui.</p>
</article>
</div>
</section>
</div>
</div>

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

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

Customer Quotes:

This area uses the S5 Tab Show module, which is published to bottom_row2_1. For setup instructions for S5 Tab Show please visit: http://www.shape5.com/documentation/Joomla/Extensions/S5-Tab-Show. The custom html used for each customer is show below and does require Ion Icons to be enabled if you are using the star ratings. The customer images are defined in the module's backend under the Button Options area.



<div class="customer_quote">
“Lorem ipsum dolor sit amet, consectetur aled leium adipiscing elit. Donec et eleifend libero dignissim sit ametlobo tis vestibulum lorem ipsum ligula et malesuada fames ac ante ipsum primis in faucibus.”<br />
<span class="customer_quote_name"><strong>Michele Moyer</strong></span>
<span class="ion-android-star active_star"></span>
<span class="ion-android-star active_star"></span>
<span class="ion-android-star active_star"></span>
<span class="ion-android-star inactive_star"></span>
<span class="ion-android-star inactive_star"></span>
</div>

Our Landscape Team:

This is a custom html module that is published to custom_5. This area must be used with the html given below and is intended only for use with text on the left side on top of the highlight color background.



<div class="our_team_wrap">
<div class="our_team_left">
<h3>Our Landscape Team</h3>
Lorem ipsum dolor sit amet, consectetur adipiicing elit sed do eiusmod tempor incid dunt ut lorem ipsum labore et dolore magna aliqua.
<br /><br />
Arem ipsum labore et dolore magna aliqua Aliquam adipiscing egestas leo Duis et erat aliquam.
<br /><br />
<a class="readon" href="index.php/pages/contact-us">Contact Us Now</a>
</div>
<div class="our_team_right">
<div class="our_team_employee_wrap" data-sr="move 16px scale up 20%, over 0.7s">
<div class="our_team_employee">
<div class="our_team_employee_text">
<div class="our_team_employee_name">Sarah Kline</div>
<div class="our_team_employee_title">Head Garden Expert</div>
</div>
<img src="images/employee1.jpg" alt="" />
</div>
<div class="our_team_employee" data-sr="move 16px scale up 20%, over 0.7s, wait 0.3s">
<div class="our_team_employee_text">
<div class="our_team_employee_name">Richard Smith</div>
<div class="our_team_employee_title">Mowing Specialist</div>
</div>
<img src="images/employee2.jpg" alt="" />
</div>
<div class="our_team_employee" data-sr="move 16px scale up 20%, over 0.7s, wait 0.3s">
<div class="our_team_employee_text">
<div class="our_team_employee_name">Brandon Lee</div>
<div class="our_team_employee_title">Hardscaping Services</div>
</div>
<img src="images/employee3.jpg" alt="" />
</div>
<div style="clear:both;height:0px;"></div>
</div>
</div>
<div style="clear:both;height:0px;"></div>
</div>

Bottom Row3:

This area does not use custom html, but the background images are defined in the Main/Layout area of the template configuration. The top gras image is applied to the Area2 settings, and the repeating dirt background is applied to the Area1 settings. The template will by default come with these settings already in place, but does not come with the images as they are stock photography. Links are provided in the Curb Appeal downloads area to where you can purchase these images.