Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form or to our support forum at http://inwave.ticksy.com/
- devs (Development files)
This directory is for developers to customize and update athlete template by himself.
- PSD (All photoshop files)
- Documentation (All HTML source)
- athlete (All HTML source)
For users, without updating any thing, users can use all of files. For developers to customize and update it.
- сss (All compiled files css)
- fonts (Open Sans font, Font Awesome, Merriweather font, Glyphicons Bootstrap fonts)
- images (All images and backgrounds)
- js (Template JS)
- images/video (All video)
The template is based on Bootstrap 3 Framework - http://getbootstrap.com
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
<div class="row">
<div class="col-md-12">
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>
If you need more information, please visit this site: http://getbootstrap.com/css/#grid
(It consists of 2 sections; css and sass)
- CSS
- animate.css (Is a cross-browser animations for you to use in your projects, http://daneden.me/animate)
- color.css (Main file of css, include all modules with different color scheme)
- effect.css (Variants effects)
- font-awesome.css (CSS for font styles)
- masterslider.css/ms-fullscreen.css (CSS for Master Slider)
- owl.carousel.css/owl.transitions.css (CSS for Carousel Slider)
- style.css (Main CSS files for Athlete styles)
jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/
- jqueryui (A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library)
- bootstrap (Javascript Library for using some bootstrap elements)
Please check the other Javascrip libraries on Source & Credit.
The style switcher was made to support unlimited skin colors
You can change its color scheme to you want easily. For example, if you want blue color scheme, you can replace it at this file.
<link type="text/css" data-themecolor="default" rel='stylesheet' href="css/color.css">
The template has two different layout modes, Wide and Boxed. The wide one is the default option, if you want to use the Boxed version, add the following class in the <body>:
<body class="body-boxed">
There are several variats of headers on the project, here are examples of:
<!--Header-->
<header id="header" class="header header-container alt reveal">
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-3 logo">
<a href="index.html"><img src="images/logo.png"></a>
</div>
<div class="col-md-9 nav-container">
<nav class="megamenu collapse navbar-collapse bs-navbar-collapse navbar-right mainnav col-md-10" role="navigation">
<ul class="nav-menu">
...
</ul>
</nav>
</div>
<div class="quick-access col-md-1 col-sm-2 col-xs-3">
<div class="shopping-cart">
<a href="#"><i class="fa fa-shopping-cart"></i></a>
<div class="mini-cart product-popular">
<h3 class="title">Your Cart</h3>
....
</div>
</div>
<div class="search">
<a href="#"><i class="fa fa-search"></i></a>
<form id="search" method="post" name="">
<div class="search-box">
<input class="top-search" type="text" placeholder="Enter your keywords" name="search" title="Search">
<input class="sub-search" type="image" src="images/search.png" alt="Submit">
</div>
</form>
</div>
</div>
<button class="menu-button" id="open-button"></button>
</div>
</div>
</header>
<!--End Header-->
All of them you can find in root directory (index-header-v1.html, index-header-v2.html, index-header-v3.html)
To change the embedded font, please take a look in the css/style.css file and you will find this tag:
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:700);
To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code.
To change the settings of google map, please take a look at maps-google.js in js/module directory. You can change all of options to ones which you want.
And to change the marker icon you want, please take a look in the corresponding page and you will find this tag:
<img data-retina src="images/pin.png" data-label="" class="marker-template hidden" />
Font Awesome is a @font-face iconset that you can change size and color of the icons using CSS.
If you need more information, please visit this site: http://fontawesome.io/
<i class="icon-edit"></i> <i class="icon-search"></i> ...
Master Slider
This is one of the best slider plugins we have seen so far.
"Master Slider is a premium image and content slider with super smooth hardware accelerated transitions. It supports touch navigation with pure swipe gesture that you have never experienced before. It’s a truly responsive and device friendly slider which works perfect in all major devices.
More details on http://codecanyon.net/item/master-slider-responsive-touch-swipe-slider/6337671
For more information check the documentation.
Create link elements whose href attributes will contain the path of the element you wish to open within the Custom Box Plugin.
The filter is driven by the Isotope script - http://isotope.metafizzy.co/
Here's an example of usage:
<div class="categories">
<div id="filters" class="filters button-group container">
<button data-filter="*" class="filter button is-checked">All Class</button>
<button data-filter=".aerobic" class="filter button">Yoga Class</button>
<button data-filter=".fitness" class="filter button">Fitness Class</button>
<button data-filter=".sport" class="filter button">Sport Class</button>
<button data-filter=".boxing" class="filter button">Boxing Class</button>
</div>
</div>
<section id="our-class-main" class="isotope">
<div class="mix sport boxing element-item col-xs-12 col-sm-6 col-md-4" data-category="sport">
<div class="box-inner">
....
</div>
</div>
....
</section>
The images included in preview are for demonstration purposes and should always be replaced with your own work.
Fonts:
Icons Font-face - http://fontawesome.io/
Scripts:
jQuery - http://www.jquery.com/
Bootstrap 3 - http://getbootstrap.com/
Master Slider - http://codecanyon.net/item/master-slider-responsive-touch-swipe-slider/6337671
Slide Carousel - http://owlgraphic.com/owlcarousel/
Parallax Background - http://www.ianlunn.co.uk/plugins/jquery-parallax/
Jquery Easing - http://gsgd.co.uk/sandbox/jquery/easing/
Jquery Transform - https://github.com/louisremi/jquery.transform.js
Scripts:
https://www.flickr.com/photos/flagg87/13881102865
https://www.flickr.com/photos/james_lord_productions/7595808200
https://www.flickr.com/photos/7186423@N05/14513399887
https://www.flickr.com/photos/imageworksja/13221884254/sizes/l
https://www.flickr.com/photos/121195568@N03/13453166823
https://www.flickr.com/photos/catchlightsa/8139176656/sizes/k/
https://www.flickr.com/photos/pewald/8370065135/sizes/k/
https://www.flickr.com/photos/catchlightsa/6243439576/sizes/l
https://www.flickr.com/photos/goooooooooo/8255995716/sizes/o/
https://www.flickr.com/photos/miamifitnesstv/8295241597
https://www.flickr.com/photos/76245693@N04/6969413610
https://www.flickr.com/photos/colonnade/6810389534
https://www.flickr.com/photos/kriskesiak/8600496938
https://www.flickr.com/photos/109714188@N06/11167412476
http://www.bradgouthrofitness.com
https://farm8.staticflickr.com/7444/11821590764_b12c5874a9_b.jpg
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions.