Responsive Multipurpose Template
Welcome to Floris Template Documentation
This document covers installation and usage of this template and contains answers to common problems and issues - read this document thoroughly if you find any difficulties. If you have any questions that are beyond the scope of this document, feel free to post them in dedicated support section.
Template Features
Clean & Simple Design
Advance Bootstrap 3 Framework
HTML5 & CSS3
CSS3 Animations
Fully Responsive Design
Mutipurpose Concept
All files are well commented
Crossbrowser Compatible with IE9+, Firefox, Safari, Opera, Chrome
Extensive Documentation
Go ahead to learn more.
This template has responsive layout and is based on Bootstrap Framework. For more information please visit Bootstrap.
The default Bootstrap grid system utilizes 12 columns making 1170px wide container without responsive features enabled. With responsive CSS file added the grid adapts to 724px and 1170px wide container depending on your viewport. The columns become fluid and stack vertically when viewports are below 767px viewports.
<div class="container"> <div class="col-md-4">...</div> <div class="col-md-4">...</div> <div class="col-md-4">...</div> </div>
To input the content with grid as default, add new .container and a set of .col-md-* columns inside the existing .col-md-* column. Inserted rows should include a set of columns, which would add to the number of rows its parent.
<div class="container"> <div class="col-md-9"> Level 1 column <div class="row"> <div class="col-md-6">Level 2</div> <div class="col-md-6">Level 2</div> </div> </div> <div class="col-md-3"> Level 2 column </div> </div>
These are css files located in Head section.
<!-- CSS -->
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<link href="css/fontello.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
Don't change anything in bootstrap.css file. It may affect the whole template.
These are JS files located at the very end of Body section.
<!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script> <script src="js/SmoothScroll.js"></script> <script src="js/all.js"></script>
Replace your company logo here.
<a href="index.html" class="logo align-scroll"><img src="img/logo.png" alt=""></a>
This is the structure of navigation menu.
<nav class="slide-menu"> <div class="table-align"> <div class="cell-view"> <div class="container-menu"> <ul class="list-menu"> <li><a href="#"><span>Home</span></a></li> <li><a href="catalog.html"><span>Collections</span></a> <ul class="drop-menu"> <li><a href="#"><span>Eye</span></a></li> <li><a href="#"><span>Lips</span></a></li> <li><a href="#"><span>Face</span></a></li> <li><a href="#"><span>Skin</span></a></li> </ul> </li> <li><a href="#"><span>Blog</span></a></li> <li><a href="#"><span>Contacts</span></a></li> </ul> </div> </div> <div class="menu-copy"><span>Copyright © 2016</span></div> <div class="menu-folow share-link"> <a href="#"><i class="icon-facebook"></i></a> <a href="#"><i class="icon-twitter"></i></a> <a href="#"><i class="icon-instagram"></i></a> <a href="#"><i class="icon-tumbler"></i></a> <a href="#"><i class="icon-pinterest-circled"></i></a> </div> </div> </nav>
There is a possibility to change menu options as per your demands.
Click here for the Swiper Slider documentation.
<div class="product-item right item-animation"> <div class="image"> <a href="#"><img src="img/item_img_1.jpg" alt=""></a> <div class="title item-title"> <h4 class="h4"><a href="#">above it all</a></h4> <p class="sub-title"><b>9ML –</b><span> $45.00</span></p> </div> </div> </div>
Replace "img/item_img_1.jpg" with your image.
Replace title above it all.
Replace sub-title 9ML - $45.00.
BLOG CONTENT
<div class="blog-item blog-type-1 left"> <div class="image"> <div class="bg" style="background-image:url(img/blog_img_3.jpg)"></div> </div> <div class="title vertical-align"> <span class="date">October 13, 2015</span> <a href="#" class="font-fam-2">CHLOE NORGAARD CASTAWAY IN NICARAGUA</a> <div class="post-info"> <a href="#">fashion</a> <a href="#">by j. smith</a> <a href="#"><span><i class="icon-comment-empty"></i>10</span></a> <a href="#"><span><i class="icon-heart-empty"></i>28</span></a> </div> <div class="simple-text"> <p>Lorem Ipsum is simply dummy text of the printing and typesettin</p> </div> </div> </div>
Replace "img/blog_img_3.jpg" with link to the image of the post.
Change the date of post October 13, 2015.
Replace the title CHLOE NORGAARD CASTAWAY IN NICARAGUA of the post.
Change by j. smith with name of author of the post.
Replace 10 with number of comments to the post.
Replace 28 with number of likes of the post.
Change by j. smith with name of author of the post.
Replace simple text.
You should open email-action.php file and change test@test.com email address to yours. Floris Theme Subject to your subject.
<footer> <div class="container"> <div class="footer"> <div class="footer-folow share-link"> <a href="#"><i class="icon-facebook"></i></a> <a href="#"><i class="icon-twitter"></i></a> <a href="#"><i class="icon-instagram"></i></a> <a href="#"><i class="icon-tumbler"></i></a> <a href="#"><i class="icon-pinterest-circled"></i></a> </div> <ul class="footer-nav"> <li><a href="#">Order Status</a></li> <li><a href="#">FIND A STOre</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">faq</a></li> <li><a href="#">terms</a></li> </ul> <div class="copyright"><span>Copyright © 2016</span></div> </div> </div> </footer>
Replace social icons and reference for social networks.
Replace link and menu name for footer.
Fonts used in the template are free:
Plugins used in the template are free for commercial use.
Images in live preview are not included to the template.
Thank you for purchasing this template.
As it was said at the beginning we would be glad to help you if you have any questions. We'll do our best to assist.
Thank you.