Documentation by “Ansonika” v1.5

“ACTIVITY HTML Template”

Created: 3 SEPTEMBER 2014
By: Ansonika
Last update: 15 September 2021

Thank you for purchasing my theme. If you are happy with the theme, please TAKE A MOMENT TO RATE IT from your DOWNLOADS PAGE. Thanks so much!

 

Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. Customize the template
  4. PHP newsltetter form and sign up form
  5. JavaScript
  6. PSD Files
  7. Sources and Credits
  8. Updates

A) HTML Structure - top

This theme has a fixed centered layout 1170px. It's based on Boostrap 3 framework grid. The item come with 2 version: 1) Full site and 2) Widget version so you can include the calculators on your site with few steps.

B) CSS Files Structure and basic modfication - top

The css files are inside the css folder.

  1. bootstrap.css: The framework (not necessary to open/edit)
  2. bootstrap.min.css: The framework minified (not necessary to open/edit)
  3. menu.css: menu
  4. fontello.css: Icons
  5. style.css: all layout styles (mediaqueries included)
  6. flexslider.css/slider.css: navigation styles for Home Fullscreen slider
  7. owl.theme.css/owl.carousel.css: testimonial carousel

To modify colors, typografy, button style ecc....find the realtive commen line in base.css. Below how the file is organized:

STYLE.CSS STRUCTURE:
1. SITE STRUCTURE and TYPOGRAPHY
2. PAGES AND CONTENT
3. FORMS
3. COMMON
4. MEDIA QUERIES

C) Customize the template - top

Change the logo
To change the logo, simply use your PNG24 file. Keep in mind you have to setup the dimensions of your logo div container. 

OPEN STYLE.CSS

#logo a {
	width:160px;
	height:40px;
	display:block;
	position:absolute;
	left:12px;
	top:12px;
	z-index:9;
}

Remeber to create a double size version for retina display and name it logo_2x.png

RETINA IMAGES
To quickly mark a element to be replaced just add data-retina="true" and any image source or background image will be replaced on retina enabled devices or give a look to full documentation.

Example
<img src="/img/foo.jpg" data-retina="true" width="40" height="30"> 
<div class="foo-with-background-image" data-retina="true"></div>

Change the button colors, and main typography styles
It's all placed at the top of styles.css under the section 1.SITE STRUCTURE and TYPOGRAPHY: 

/** Typography **/
........

/** List **/
.....


/** Links **/
.....


/** Buttons **/
.....


etc...

THE GRID
Please refer to this documentation Boostrap

HOW TO INCLUDE THE WIDGET VERSION ON YOUR SITE
Please take as reference the widget folder. 

1) Copy the calculators folder and paste on your main root site

2) Paste on you head page this css 
<link rel="stylesheet" href="calculators/js/fancybox/source/jquery.fancybox.css">

3) Paste the links to the respective modal window that display the calculators on your body page.
<ul>
<li>
	<a href="calculators/daily-calorie-calculator.html" class="fancybox" data-fancybox-type="iframe">
	Daily Calorie Calculator
	</a>
</li>
<li>
	<a href="calculators/calories-burned-by-heart-rate.html" class="fancybox" data-fancybox-type="iframe">
	Calorie Burned by heart/rate
	</a>
</li>
<li>
	<a href="calculators/calories-burned-by-activities.html" class="fancybox" data-fancybox-type="iframe">
	Calorie Burned by activities
	</a>
</li>
<li>
	<a href="calculators/BMI-body-mass-calculator.html" class="fancybox" data-fancybox-type="iframe">
	Bmi Body mass Calculator
	</a>
</li>
</ul>

4) Call the Fancybox modal placing at the bottom of the page before body close tag these lines of code.
<!-- FANCYBOX -->
<script src="calculators/js/fancybox/source/jquery.fancybox.js" type="text/javascript"></script> 
<script src="calculators/js/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5" type="text/javascript">
</script>
<script src="calculators/js/fancy_func.js" type="text/javascript"></script>

Bootstrap 3 framework is required. Be sure to have a copy of bootstrap files on you main root site
(js and css folder)


D) PHP files - top

All the files you need are located in asset folder. 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 and support php language
3) If your email has to be managed from the same hosting provider


E) JavaScript - top

This theme use These Javascript. This folder structure is for the full site version.




F) PSD Files - top

Inlcuded with the theme there is only the logo.

G ) Sources and Credits - top

I've used the following scripts, plugins or frameworks as listed.

H) Updates - top

V.1.5 (15 September 2021)

V.1.4 (18 February 2021)

V.1.3 (14 December 2018)

How to update from previous version:

in the head of every page add the Google web font:
<!-- GOOGLE WEB FONT -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Montserrat:400,700|Raleway:400,500,600,700,800|Lato:400,700,900" rel="stylesheet">

V1.2 6 November 2014
- Respond and Hml5Shiv fixed for IE8 in the head of the page: the links provided from here http://getbootstrap.com/getting-started/ should be http and not https. 

WRONG
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

OK
<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

V1.1 24 SEPT 2014
- Fixed an unclosed div on the contact form success message in contact.php (bottom)....this ' character was missing...sorry :)




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.

Need customization or availability for freelance projects?

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

Ansonika

Go To Table of Contents