All Module Positions

Here are all module positions of template.

Application of CO2-extracts

Module styles

With the module styles you can see in this page you can set the way a module is displayed.

To set the style of a module, login to the administrator's control panel, go to the Module Manager, locate and edit the Module Suffix data field and click the Save button. Alternatively, you can read our tutorials where you can find simple step by step examples.

How to use the Sliders

You can insert the below code in a custom html module to get the same result as our demo home page.

Sliding background image menu with jQuery


<div id="bt_sbi_container" class="bt_sbi_container">


<div class="bt_sbi_panel" data-bg="images/sampledata/image-sbi-1.jpg">


<a href="#" class="bt_sbi_label">About Beauty</a>


<div class="bt_sbi_content">


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac viverra risus. Mauris vehicula euismod augue, vehicula euismod augue.</p>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac viverra risus. Mauris vehicula euismod augue, vehicula euismod augue.</p>


</div>


</div>


<div class="bt_sbi_panel" data-bg="images/sampledata/image-sbi-2.jpg">


<a href="#" class="bt_sbi_label">Our Products</a>


<div class="bt_sbi_content" style="max-height:230px">


<ul>


<li><a href="index.php">Home page</a></li>


<li><a href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=102">Typography</a></li>


<li><a href="index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=116">Template map</a></li>


<li><a href="index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=304">All module positions</a></li>


<li><a href="index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=118">System Messages</a></li>


<li><a href="index.php?option=non-existing-component&amp;Itemid=119">Error 404 page</a></li>


</ul>


</div>


</div>


<div class="bt_sbi_panel" data-bg="images/sampledata/image-sbi-3.jpg">


<a href="#" class="bt_sbi_label">Special Gifts</a>


<div class="bt_sbi_content">


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac viverra risus. Mauris vehicula euismod augue, vehicula euismod augue.</p>


</div>


</div>


</div>

Animated content tabs with CSS3


<section class="bt_tabs">


   <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />


   <label for="tab-1" class="tab-label-1">Beauty Oil</label>


   <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />


   <label for="tab-2" class="tab-label-2">Beauty Sampoo</label>


   <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />


   <label for="tab-3" class="tab-label-3">Beauty Clean</label>


   <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />


   <label for="tab-4" class="tab-label-4">Dream Tan</label>


   <div class="bt_clear-shadow"></div>


   <div class="bt_content_tabs">

<div class="bt_content_tabs-1">


   <img style="float:left;margin: 10px 15px 50px 0" src="images/sampledata/beautyoil-image.png" alt="beauty oil" />


   <h1>Beauty Oil</h1>

<h3>Cosmetics with Olive Oil</h3>

<p style="padding-top:10px">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.</p><br />


   <p>Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis.</p>


   <br />


   <p><a href="index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=129" class="button">Read More &raquo;</a></p>


   </div>


   <div class="bt_content_tabs-2">


   <img style="float:left;margin: 0 15px 30px 0" src="images/sampledata/beautysampoo-image.png" alt="beauty sampoo" />


   <h1>Beauty Sampoo</h1>

<h3>with Aloe Vera</h3>

<p style="padding-top:10px">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.</p><br />


   <p>Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis.</p>


   <br />


   <p><a href="index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=129" class="button">Read more &raquo;</a></p>


   </div>

<div class="bt_content_tabs-3">


   <img style="float:left;" src="images/sampledata/beautyclean-image.png" alt="beauty clean" />


   <h1>Beauty Clean</h1>

<h3>Excepteur sint occaecat</h3>

<p style="padding-top:10px">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.</p><br />


   <p>Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis.</p>


   <br />


   <p><a href="index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=129" class="button">Read more &raquo;</a></p>


   </div>

<div class="bt_content_tabs-4">


   <img style="float:left;" src="images/sampledata/beautyperfume-image.png" alt="dream tan" />


   <h1>Dream Tan</h1>

<h3>Beauty Perfume</h3>

<p style="padding-top:10px">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.</p><br />


   <p>Voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis.</p>

   


   <br />


   <p><a href="index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=129" class="button">Read More &raquo;</a></p>


   </div>

</div>


   </section>


   <div class="clearfix"></div>

Hover Effects with CSS3



Explore the Beauty

The series of Beauty includes Heat Rubs, Alcoholic Lotion, Mosquito and Hand's Antiseptics.









Aloe vera

Aloe vera is a succulent plant species that probably originated in northern Africa. The species does not have any naturally occurring populations, although closely related aloes do occur in northern Africa.The species is... read more..













Paraben FREE

Parabens are a class of chemicals widely used as preservatives by cosmetic and pharmaceutical industries. Parabens are effective preservatives in many types of formulas. These compounds, and their salts... read more..













Coenzyme Q10

Coenzyme Q10, also known as ubiquinone, ubidecarenone, coenzyme Q, and abbreviated at times to CoQ10 /ˌkoʊ ˌkjuː ˈtɛn/, CoQ, or Q10 is a 1,4-benzoquinone, where Q refers to the quinone chemical group, and 10 refers... read more...