The Pear Documentation

Multipurpose Onepage Templates

• By: annabalashova
• themeforest.net/user/annabalashova

Thank you for purchasing our theme. It has an understandable documentation that is easy to setup. If you still have some questions that you could not find in this help file, please contact us on our forum. You can also follow us on Themeforest for our future themes, that you could be interested in. Thank you very much!

Theme Installation

There are several ways to install html themes, we prefer using FTP but you may choose any other ways.

• please unzip the installable zip file that you downloaded from ThemeForest (thepear.zip);
• the archive contains 25 templates. select a template;
• upload "(ex. home_building)" theme folder to the theme directory of your server via ftp;
• open your browser. enter in the address bar http://your_domain_name/home_building/index.html;

Customization

After installing themes on your server, you need to change the content.

All the text that is on the site is edited in index.html file. one of the editors in which is very convenient to edit the code Notepad++. Each of the major parts of the site is marked with label < !-- Ex. Section -->. Each of the files of template are all in their respective folders.

• css - style files
• fonts - contains fonts of icons. list of icons ICONS
• images - all images are included in the template
• js - template functions
• plugins - all additional functions which are used in this template

Original images are not included in theme archive

Grid

The Pear is based on Bootstrap 3.3 and uses the default Bootstrap 12 column grid system for the underlying structure of each section. Each use of the grid should be wrapped in both a container and row element. Below is a brief example for a section with three equal columns (3 for tablet and up, 6 for smartphones).

	<div class="container">
		<div class="row">
			<div class="col-md-4 col-sm-6">...</div>
			<div class="col-md-4 col-sm-6">...</div>
			<div class="col-md-4 col-sm-6">...</div>
		</div>
	</div>

Spacing

The Pear uses helper classes to space elements out from one another on the page. Helper classes are used to space elements with margin and padding. This makes it easier to create your own elements in HTML without needing extra CSS to arrange them appropriately.

Example: You have a large h1 that you'd like to push 80px away from the subsequent content by adding margin to the bottom. You can use The Pear's spacing classes to help:

	<h2 class="mb40">I'm a large heading</h2>
	<p>
		....
	</p>
	<div>
		...
	</div>

If we wanted to use padding on that element we would have used 'pb' instead of 'mb' where 'pb' refers to 'padding-bottom'.

Available classes

	.m0{margin: 0;}
	.m5{margin: 5px;}

	.mb0{margin-bottom: 0;}
	.mb5{margin-bottom: 5px;}
	.mb10{margin-bottom: 10px;}
	.mb20{margin-bottom: 20px;}
	.mb30{margin-bottom: 30px;}
	.mb40{margin-bottom: 40px;}
	.mb50{margin-bottom: 50px;}

	.mt0{margin-top: 0;}
	.mt5{margin-top: 5px;}
	.mt10{margin-top: 10px;}
	.mt20{margin-top: 20px;}
	.mt30{margin-top: 30px;}
	.mt40{margin-top: 40px;}
	.mt50{margin-top: 50px;}

	.p0{padding: 0;}
	.p5{padding: 5px;}

	.pb0{padding-bottom: 0;}
	.pb5{padding-bottom: 5px;}
	.pb10{padding-bottom: 10px;}
	.pb20{padding-bottom: 20px;}
	.pb30{padding-bottom: 30px;}
	.pb40{padding-bottom: 40px;}
	.pb50{padding-bottom: 50px;}

	.pt0{padding-top: 0;}
	.pt5{padding-top: 5px;}
	.pt10{padding-top: 10px;}
	.pt20{padding-top: 20px;}
	.pt30{padding-top: 30px;}
	.pt40{padding-top: 40px;}
	.pt50{padding-top: 50px;}

Color

The Pear template has its own unique color #0066cc. The color of the styles registered in the file css/style.css. You can change the color for all your color. You need to open the file by replacing styles and replace the color of your.

Backgrounds & Parallax

Many elements in Foundry have images that cover the background. Often, these elements also have the parallax effect enabled.

To cover an element with a background image, follow this standard:

	<section class="blackout bg1" style="background-position: 50% 86px;">

		<div class="container">

			<h2>Buy now and get a Discount</h2>

			<div class="align_center">

				<a class="btn" href="#">Go to Info Page</a>

			</div>

		</div>

	</section>

You can easily switch on or off the parallax effect by adding (or removing) the class 'blackout' from the parent element.

Font Icons

By default, The Pear makes use of the Premium Icon Set. Using the Premium Icons requires you to follow simple syntax using the predefined icon codes. For a list of all available icon codes, look Here.

Syntax for icons is as follows:

	<i class="icon Evatheme-Icon-Fonts-thin-0001_compose_write_pencil_new"></i>

Navigation

The Pear has Onepage navigation smooth scroll to the item

	<nav>
		<button class="nav_btn"><i class="fa fa-bars"></i></button>

		<ul class="navigation clearfix">
			<li class="current"><a href="#section1">Home</a></li>
			<li><a href="#section2">Features</a></li>
			. . .
			<li><a href="#section6">Comment</a></li>
		</ul>
	</nav>

< button class="nav_btn" >< i class="fa fa-bars" >< /i >< /button > - "Hamburger" button for mobile menu

< ul > . . . < /ul > - navigation items list of template

href="#section2" - the name of the id element to which the transition will

For the proper operation of a menu, you need to create a menu item with id section

Example:

< li >< a href="#section2" >Features< /a >< /li > - item of menu

< section id="section2" class="section section_offset" > . . . < /section > - section

Sliders

The Pear uses the Flexslider jQuery plugin to handle all slider behaviour including image sliders and text sliders.

Slider elements are always structured as so:

	<div class="main_slider flexslider">
		<ul class="slides">
			<li>...</li>
			<li>...</li>
		</ul>
	</div>

Instagram Feeds

Some elements in The Pear offer the ability to embed an Instagram image feed. These elements use a data attribute data-userId in conjunction with the Instafeed jQuery plugin to fetch the latest images from the specified Instragram account.

Setting up an Instagram element is as simple as placing your username inside the data attribute like so:

	<ul id="instafeed" class="instagram_feed" data-userId='2303923949'></ul>

Google Maps

Pear uses custom Google maps. to show your location on the map you need to determine your location with service Google Maps

After determining the coordinates you need to change the code as in the example below:

	<div class="gmap" id="gmap"
		data-gmap-type="mapBox"
		data-coords='[{
			"lat": 40.713175131022716,
			"lon": -74.00150299072266,
			"title":"Graf-in"
		}]'>
	</div>

Ajax Contact Form

Some templates of The Pear is used the ajax contact form. Through this form you can receive emails from your website visitors. you need to configure just specify your email address.