“GYMFIT” Documentation by “Basir Mukhtar” v1.0


“GYM FIT - Fitness Landing Page”

By: Basir
Email: basirmukhtar@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. Contact forms
  5. SVG based icons

A) HTML Structure - top

This theme is a responsive layout with full screen sections. All of the information within the main content area is nested within a seciton for each content block. The general template structure is the same throughout the template. Here is the general structure.

HTML Structure

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

	section#sectionid a {
		color: #someColor;
	} 

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight. Or add the new style at the end of the style sheet to make it override all the others.

I.E.

	#wrap #primaryContent a {
		color: #someColor;
	}

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.


B) CSS Files and Structure - top

I'm using bootstrap CSS along with style.css as custom stylesheet in this template. If you want to make major style changes i recommand adding another custom.css after all other css files in header and add your styles in it. .

Please do not edit any other css files. If needed use !important in your custom.css or style.css which might be highly unlikely.

	/* === Header Section === */

	#wrap #primaryContent a {
		color: #someColor !important;
	}

	
	etc, etc. 

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.


C) JavaScript - top

This theme imports three Javascript files.

  1. jQuery
  2. Bootstrap
  3. custom.js

All the js files are attached in the bottom of the html page just before </body> tag.

  1. If you want to edit the javascript please edit custom.js
  2. in some cases if you need to add alot of javascript please create another file

D) Contact forms - top

I've included two forms:

  1. Get Your Free Pass
  2. Subscribe form

Currently the forms are being validated by ajax call that is handeled in custom.js file. You need to add your own codes for submittion of the forms using php or any other language you are using.

Open Config.php file

This is basically configuration file where you have to put mailchimp account API and List ID.

HTML Structure

How to get Account API and List ID?

For getting mailchimp account API, you have to login in mailchimp account

Now you have to choose in which list you want to store all of your subscribers information. In this case, you have to create a list in List option.


E) SVG based icons - top

I've used the SVG based icons in the our classes section. If you would like to change those icons you can upload new ones in /svg directory and change the file name from index.html file.

<img src="svg/cardio-training.svg" alt="Cardio Training" class="svg_icon cardio" />

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. There wll be future upgrades coming in very soon.

Basir Mukhtar

Go To Table of Contents