Thank you for purchasing Options - Admin Template. This documentation will help you understand basic structure of the template. If you have any questions that are beyond the scope of this help file, you can create support ticket at https://salttechno.ticksy.com/ or email us on support@themesease.com.
Created on: 19-Apr-2017 Version: 1.0
We have dedicated team for support. For quicker response, we request you to use online ticket system at https://salttechno.ticksy.com/. Email support & comment on ThemeForest might take some extra time for turnaround.
'Options' is a responsive Admin Site-Template. So, you will need all .html files & supporting .css, .js, .php files with some images. 'documentation' folder contains help document and other files are actual template files. Structure of your folder would look like following image.
You will need to upload .html files along with supporting folders provided with this theme. Uploading complete HTML folder (provided with your download) would make it easy for you to setup the theme as shown on demo link.
We are using Bootstrap framework. So, basic HTML structure is same as it is used in Bootstrap.
Following is the basic structure of home page. You can change it as per your need.
<!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap & Other CSS files --> </head> <body> <header> <!-- Logo & social links in .container --> <nav> <!-- Navigation Links --> </nav> </header> <section> <!-- page content --> </section> <div> <!-- Footer --> </div> <!-- Bootstrap, jQuery & other js files --> </body> </html>
All plugins / vendor css files are in folder named 'css'. Our theme's main.css file is generated via Sass. main.scss, bootstrap-sass, bourbon are stored in another folder named 'sass'. main.scss file is complied to save as main.css in css folder. We also compress the css file and save it in main.min.css file.
<!-- ========== COMMON STYLES ========== --> <link rel="stylesheet" href="css/bootstrap.min.css" media="screen" > <link rel="stylesheet" href="css/font-awesome.min.css" media="screen" > <link rel="stylesheet" href="css/animate.min.css" media="screen"> <link rel="stylesheet" href="css/lobipanel/lobipanel.min.css" media="screen"> <!-- ========== PAGE STYLES ========== --> <link rel="stylesheet" href="css/prism/prism.css" media="screen" > <!-- USED FOR DEMO HELP - YOU CAN REMOVE IT --> <link rel="stylesheet" href="css/toastr/toastr.min.css" media="screen" > <link rel="stylesheet" href="css/icheck/skins/line/blue.css" > <link rel="stylesheet" href="css/icheck/skins/line/red.css" > <link rel="stylesheet" href="css/icheck/skins/line/green.css" > <!-- ========== THEME CSS ========== --> <link rel="stylesheet" href="css/main.min.css" media="screen" >
We have view / edit main.scss file stored in sass folder if you are comfortable with it.
Few css or js files are required when you are using particular plugin / library.
@import 'https://fonts.googleapis.com/css?family=Poppins:300,400,600';
You can change this template's fonts very easily & quickly using main.scss file. Add font in above line to fetch from Google. We have used two variables in scss file. $st-body-font
is used for body font and $st-heading-font
is used for heading font. Just replace these font names in these variables and fonts will be replaced in complete template.
We have used two different font icons for wider variety of icons. Following two lines are for these font icons:
<link rel="stylesheet" href="css/font-awesome.min.css" media="screen" >
main.js & main.min.js files are located in folder named 'js'. This file is used for theme's common javascript functions. Other vendor js files are also in same folder and we call them in .html file before end of body tag.
<!-- ========== COMMON JS FILES ========== --> <script src="js/jquery/jquery-2.2.4.min.js"></script> <script src="js/jquery-ui/jquery-ui.min.js"></script> <script src="js/bootstrap/bootstrap.min.js"></script> <script src="js/pace/pace.min.js"></script> <script src="js/lobipanel/lobipanel.min.js"></script> <script src="js/iscroll/iscroll.js"></script> <!-- ========== PAGE JS FILES ========== --> <script src="js/prism/prism.js"></script> <script src="js/waypoint/waypoints.min.js"></script> <script src="js/counterUp/jquery.counterup.min.js"></script> <script src="js/amcharts/amcharts.js"></script> <script src="js/amcharts/serial.js"></script> <script src="js/amcharts/plugins/export/export.min.js"></script> <link rel="stylesheet" href="js/amcharts/plugins/export/export.css" type="text/css" media="all" /> <script src="js/amcharts/themes/light.js"></script> <script src="js/toastr/toastr.min.js"></script> <script src="js/icheck/icheck.min.js"></script> <!-- ========== THEME JS ========== --> <script src="js/main.js"></script> <script src="js/production-chart.js"></script> <script src="js/traffic-chart.js"></script> <script src="js/task-list.js"></script>
We have made it easy for you to copy components' code without searching for it in .html file. Just click on 'Toggle Code' button in upper right corner to see component's code. You can just copy and paste it in your .html file.