Hello and thank you for purchasing this website template! Unicase is the perfect high-quality solution for those who want a beautiful eCommerce website in no time. It‘s fully responsive and will adapt itself to any mobile device. iPad, iPhone, Android, it doesn‘t matter. Your content will always looks its absolute best. This documentation guides you through the main features of this template and shows you how to use and customize them. If you have any further questions just drop us a line to transvelo@support.assembla.com
If you are comfortable with PHP We've provided PHP files. These files have been broken into smaller parts keeping in mind the DRY (Do not repeat yourself) principle. Repeatable blocks and individual blocks have been broken down into smaller files and have been included wherever required.
All pages are loaded from index.php file.
1.2.2.5.1 Footer
1.2.2.5.2 Header
1.2.2.5.3 Sidebar
CSS files – with usage details (order of importance):
Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. If you are not experienced or not aware of what LESS files is you don't have to worry, these files are not required for the template. Instead LESS files are compiled as CSS files. You can either edit LESS files and compile it to CSS or directly edit the LESS files
Template images – with usage details (order of importance):
JavaScripts and integrated jQuery scripts – with usage details (order of importance):
Unicase is based on Twitters popular front-end framework Bootstrap for fully flexible and responsive layouts. It also uses the latest web technology HTML5 for semantic content structuring and CSS3 for versatile and powerful styling options.
Read more about the used technology:
Bootstrap: http://getbootstrap.com
HTML5/CSS3: http://www.w3schools.com
HTML5: http://html5doctor.com
Now comes the really interesting part! Learn how to use and customize this website template to fit your needs. The most important thing for you to do is actually look into the HTML source code and see how elements are written! The clean and commented code makes it easy for you to copy code blocks from content modules and past them in different places or layouts.
<!-- ========================================= SEARCH AREA ========================================= --> <div class="search-area"> ... </div> <!-- ========================================= SEARCH AREA :END ========================================= -->
It is highly recommended to use vector graphics for the logo like the Unicase template does with the SVG (Scalable Vector Graphics) file format. This ensures the best possible and sharpest view on mobile devices and of course when scaling the logo. If it is not possible for you to use vector graphics you can still use raster graphics like the JPG or PNG file format of course. In this case you have to change the filename extension of the logo in the following HTML parts to this for example:
<!-- ============================================================= LOGO ============================================================= --> <div class="logo "> <a href="index.php?page=home"> <img alt="" src="assets/images/logo.png" /> </a> </div> <!-- ============================================================= LOGO : END ============================================================= -->
Unicase comes with 6 prestyled template color schemes: green, blue, red, orange and dark-green. Just change the next line in the
section of the HTML code to the color you prefer:<link rel="stylesheet" href="assets/css/green.css">
Afterwards you can delete these lines of code for demo purposes:
<!-- Demo Purpose Only. Should be removed in production --> <link rel="stylesheet" href="assets/css/config.css"> <link href="assets/css/green.css" rel="alternate stylesheet" title="Green color"> <link href="assets/css/blue.css" rel="alternate stylesheet" title="Blue color"> <link href="assets/css/red.css" rel="alternate stylesheet" title="Red color"> <link href="assets/css/orange.css" rel="alternate stylesheet" title="Orange color"> <link href="assets/css/dark-green.css" rel="alternate stylesheet" title="DarkGreen color"> <!-- Demo Purpose Only. Should be removed in production : END -->
The image usage in this website template is very easy to handle as well. The various image dimensions used across the website has been given as a placholder. The placeholder will also contain the image dimensions. This service is provided by http://placehold.it. Here is an example below :
<div class="blog-post-image"> <div class="image"> <a href="index.php?page=blog"> <img alt="" src="http://placehold.it/270x135/" /> </a> </div> </div>
Sometimes it is faster and more effective to solve problems through communication. So for problems you cannot solve with help of this documentation please send us a message and we will see how we can help!
transvelo@support.assembla.comWe've used the following images, icons or other files as listed.
Once again, thank you so much for purchasing this theme. As We said at the beginning, We'd be glad to help you if you have any questions relating to this theme. No guarantees, but We'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Akther Jabeen & Mohamed Anas