Template Mars Docs

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to use my support service at http://osetin.ticksy.com. Thanks so much!

File structure

Here is a list of files and folder you receive with a purchase of template "Mars":

mars_template.zip

html The main folder which contains files of the template as well as less and scss files
- assets Contains assets for your template
- index.html Source for your homepage
- calendar.html Source for your calendar page
- charts.html Showcase of available charts
- datatable.html Source for datatables tables
- elements.html Showcase of elements available to use
- login.html Login page example
- forms.html Example how to use different forms
- notifications.html Example of notifications page

HTML Structure

This is the base structure for HTML for this template:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='assets/css/app.css'>// MAIN STYLES
  <link rel='stylesheet' href='assets/css/animate.min.css'>// CSS ANIMATIONS
  <link href='http://fonts.googleapis.com/css?family=Raleway:200,300,400,500,700' rel='stylesheet' type='text/css'>// LOADING GOOGLE FONTS
  <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">// FONT AWESOME ICONS
  <link href="assets/favicon.ico" rel="shortcut icon">
  <link href="assets/apple-touch-icon.png" rel="apple-touch-icon">
  <title>New Project</title>
</head>
<body>
  // PAGE CONTENT
  <script src='assets/js/jquery.js'></script>
  <script src='assets/js/bootstrap/button.js'></script>
  <script src='assets/js/bootstrap/carousel.js'></script>// SLIDER SCRIPTS
  <script src='assets/js/bootstrap/transition.js'></script>// SMOOTH ANIMATION OF ACCORDION AND SLIDER
  <script src='assets/js/bootstrap/collapse.js'></script>// ACCORDION SCRIPTS
  <script src='assets/js/bootstrap/modal.js'></script>// MODALS SUPPORT
  <script src='assets/js/bootstrap/dropdown.js'></script>// DROPDOWN SUPPORT
  <script src='assets/js/jquery.visible.min.js'></script>// CHECK IF ELEMENT IS VISIBLE TO APPLY ANIMATION
  <script src='assets/js/bootstrap/tab.js'></script>// TABS SUPPORT
  <script src='assets/js/jquery.isotope.min.js'></script>// SORTING OF PORTOFLIO ITEMS
  <script src='assets/js/jquery.knob.js'></script>// CIRCULAR CHART FOR PERCENTAGE
  <script src='assets/js/jquery.scrollUp.min.js'></script>// SCROLL TO TOP LINK SCRIPTS
  <script src='assets/js/application.js'></script>// MAIN SCRIPTS
  </body>
</html>

Included CSS

All of the styles are located in app.css file, you can add styles directly into it or you can change styles in the source less file which is located in the source/less folder and is called main.less.

Animations for the elements are defined in the animate.min.css file. We are loading Google Fonts and Font Awesome Icons assets at the top of the HTML.

Included JS

The theme imports multiple Javascript files:

jquery.js - a Javascript library that greatly reduces the amount of code that you must write.
bootstrap/carousel.js - script which is responsible for carousel logic
bootstrap/transition.js - script which is responsible for transition effects if they are not supported by browser
bootstrap/collapse.js - script which is responsible for accordion
bootstrap/modal.js - script which is responsible for modal activation
bootstrap/dropdown.js - script which is responsible for dropdowns
bootstrap/tab.js - script which is responsible for tabs
jquery.visible.min.js - script checks if the element in browser viewport and applies animation
jquery.knob.js - shows circilar charts for percentage showcase
jquery.scrollUp.min.js - scripts that shows a scroll to top link
jquery.application.js - your main application javascript file

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my 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.

Table of contents

Template Mars Docs

File structure

HTML Structure

Included CSS

Included JS