Documentation by “Ansonika” v1.3

“LOVEFIT - HTML Site template”

Created: 12 Oct 2016
Last update: 18 February 2021
By: Ansonika

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please post a comment on item page. If you are happy with the theme, please TAKE A MOMENT TO RATE IT from your DOWNLOADS PAGE. Thanks so much!

HTML Structure
CSS Files, Structure and basic modifications
PHP contact form, newsltetter form and plan a visit form
JavaScript
Sources and Credit
UPDATES

A) HTML Structure - top

This theme has a fixed centered layout 1170px. It's based on Boostrap framework grid. It's ULTRA RESPONSIVE!!
LoveFit is an HTML5 site template suitable for Fitness industry. Love fit provide full-length fitness workout videos and quality health information. Users can purchase a great variety of fitness workout videos: Yoga, Cardio Exercise, Strength programs, etc…

B) CSS Files Structure and basic modfication - top

The css files are inside the css folder (not minified and minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. We reccomend to apply every changes in css/custom.css in order to makes future updates easly to apply. Below how the file is organized:

1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Buttons
- 1.3 Structure

2. CONTENT
- 2.1 Home all versions
- 2.2 Workout page
- 2.3 About us
- 2.4 Explore page
- 2.5 Cart section
- 2.6 Faq page
- 2.7 Gallery page
- 2.8 Contact page
- 2.9 Login/Register modals
- 3.0 Trainer profile page
- 3.1 About
- 3.2 Contacts

3. COMMON
3.1 Preloader
3.2 Spacing
3.3 Containers
3.4 Ribbons
3.5 Tabs
3.6 Parallax bg
3.7 Input form style
3.8 Scroll top button
3.9 Plans price style
3.10 Search modal
3.11 Input Switcher
3.12 Pagination
3.13 Carousel

IMPORTANT
 All the common css styles are imported in base.css...this for a fast editing and more clean code. 
Then some pages have on top some specific css style (like blog section, etc).

BASE.CSS
@import url("https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700");  /* Fonts */
@import url("https://fonts.googleapis.com/css?family=Kalam:400,700"); 	/* Fonts */
@import url("animate.min.css");	/* Animate */
@import url("bootstrap.min.css"); /* Main Bootstrap */
@import url("menu.css"); /* Menu styles */
@import url("style.css"); /* Main theme styles */
@import url("responsive.css"); /* Responsive */
@import url("icon_fonts/css/all_icons.min.css"); /* Icons */
@import url("magnific-popup.min.css"); /* Modal */
@import url("custom.css"); /* Your custom css */

Change the logo
To change the logo, simply use your PNG24 file (start from the psd in the psd_assets folder. Below how is coded. As you can see you have to create two logo versions (depending on your logo colors).

<a href="index.html" id="logo">
<img src="img/logo.png" width="95" height="27" alt="" data-retina="true" class="logo_normal">
<img src="img/logo_sticky.png" width="95" height="27" alt="" data-retina="true" class="logo_sticky">
</a>

LOGO NORMAL
<a href="index.html" id="logo"><img src="img/logo.png" width="170" height="30" alt="" data-retina="true"></a>

REMEMBER to create the retina version that have double size of the orginal dimension and name it with _2x
(in this case for example width:190px height:54px logo_2x.png).

Set up site launch page located in site_launch folder
Open functions.js and find this line of code:

SET THE DATE
Open site_launch/js/functions.js and find this line.

var target = new Date("July 15 2014 13:30:00 GMT+0100"); //replace with YOUR DATE

SET NEWSLETTER EMAIL
Open site_launch/assets/newsletter.php and find this commented code.

//$address = "your email address";
$address = "test@domain.com";

Change the address of Google map in contact page: open mapmarker_func.js and change with your latitude and longitude + your full address. You can change also your map marker (that has to be png24).

//set up markers 
		var myMarkers = {"markers": [
				{"latitude": "51.511732", "longitude":"-0.123270", "icon": "img/map-marker.png"}
			]
		};
		
		//set up map options
		$("#map").mapmarker({
			zoom	: 14,
			center	: 'Covent Garden London', //YOUR FULL ADDRESS 
			markers	: myMarkers
		});

COMMON ISSUE ON GOOGLE MAP (if the Google map works locally but does not works once the site will be online)

In some cases Google require an api key for the Google map.

You can create your own "Standard api key" here 
by clicking on "GET KEY" BUTTON (on Authentication for the standard API—API keys section), 
and follow the steps.
https://developers.google.com/maps/documentation/javascript/get-api-key#key

Here some additionale info on how to create an API KEY http://thegrue.org/google-map-javascript-api-key/

Then replace at the bottom of every page that use Google map, this line

<script src="http://maps.googleapis.com/maps/api/js"></script> OR 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

with your api key included, like the example below
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>


NOTE: if you apply an api key, the map locally does not load. You must upload your site.

Home with video header (fallback with a background image in tablets and mobile)

1)Save you mp4 and ogv video in the video folder.The name of the files must match the datasource tag:

Example
data-teaser-source="video/intro" (folder/name_files)=
paris.mp4
paris.ogv

2) To change the fallback background image open css/style.css an find this class in the "responsive section"

#hero_video{
background: #333 url(../img/sub_header_home.jpg);
background-size:cover;
background-position: center bottom;}

THE GRID
Please refer to this documentation Boostrap

C) PHP files: Contact form, Newsletter subscription, Subscribe plan - top

All the files you need are located in assets folder(for the site launch is site_launch/assets). If you need to change the allert messages open assets/validate.js. Below an example taken from newsletter.php; all the files are well commented.

If you doesn't recieve the email please first check:
1) Your spam folder
2) If you hosting requires special settings (SMTP Authentication is not supported by the script)
3) If your email has to be managed from the same hosting provider
4) Set the permission of the asset folder on your host to 755 your FTP client

D) JavaScript - top

This theme use these Javascript (minified versions included). i've included the common theme scripts in a single file for a fast edit and load (or if you prefer you can find the same js in separate files in js folder).

common_scripts.js content:

Menu
Boostrap
Search modal
Wow
Retina-replace
Parallax
Magnifc-popup
Owl.carousel.
Animate modal
Theia Sticky bar
Calories Calculator

E) Sources and Credits - top

I've used the following images, icons or other files as listed. For the js listed below, you can find the more documentation on the relative sites.

Images are not included.

F) UPDATES - top

V.1.3 18 February 2021.

Updated Documentation

V.1.2 (17 December 2018).

Removed @import
Removed conditional css comments for IE 8/9 in the html pages

How to update from previous version:

in the head of every page please replace this line:

<!-- BASE CSS -->
<link href="css/base.css" rel="stylesheet">

with
<!-- BASE CSS -->
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/menu.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/icon_fonts/css/all_icons.min.css" rel="stylesheet">
<link href="css/magnific-popup.min.css" rel="stylesheet">

<!-- YOUR CUSTOM CSS -->
<link href="css/custom.css" rel="stylesheet">

V.1.1 (28 Feb 2017)

Fixed an issue related to the Coming soon page (files to update: coming_soon/style.css, coming_soon/index.html, coming_soon/assets/newsletter.php)

Maybe you are interested in

Once again, thank you so much for purchasing this theme. Please take a moment to rate it from your Downloads page.

Need support?

For support contact me using the form on my profile page with subject [ThemeForest Support] Template name, or submit a comment on item page. You will receive an answer within 24-48 hours (working days) GMT +1.

I only provide support for fixing bugs or small issues on my items.
I don't provide free support for additional custom modifications to the items.
Please provide your site link, screenshots and other information about your issue.
Envato support terms

Need customization or availability for freelance projects?

Just send an email via profile page form; please don't forget to specify:

if you are a company, agency or private user
all the information about your projects, needs, site urls, project sheet, etc..
from which country you are
if you have a deadline
if you have basic knowledge of HTML , CSS, JS, PHP

Ansonika

Go To Table of Contents