Documentation


Welcome to the inHarmony documentation. This guide was created for everyone that wants to create their own website using this template and is not that familiar with coding. All steps are thoroughly explained, so that using this template becomes as easy as it can get!


Get Started with the inHarmony Template

This template is very easy to use, it has comments all over its files and clearly visible and understandable element structure. First, keep the copy of the template in a folder and copy the whole folder to your server or test folder on your computer. Make sure the index.html file is in the root of your server. This template uses PHP for a contact form, so make sure that your server has PHP installed and enabled for you. Other than that, it is pure HTML / CSS / Javascript.

Using HTML elements

See the elements structure in this image:

Every page in this template has HTML elements that you can use anywhere. When copying, make sure, you kept all the element classes and/or IDs (.pricing for pricing table for example), otherwise the styling of your element won't look right.

If something goes wrong, first step is to copy the whole code of your newly created html page and paste it in the validator. This will tell you, wheter you have an unclosed tag somewhere. If everything is OK from the validator but you still experience bad styling on your element, compare it tag by tag, class by class, with the original code.

Tip: Use Google Chrome browser, right-click with your mouse the bad element and select "Inspect Element". This opens the HTML and CSS doctor in the browser, which can tremendously help you in searching for a cause of trouble.

How to change the logo

The logo of the template has an image, text headline and sub-headline. The image logo should be 130px in height maximum. Replace the logo.gif file in /imgs folder.

If you want to change height of the logo, open master.css file in /css folder, locate line for #logo and change the height in pixels.

If you don't want the text headlines, remove them from html:

<div id="logo">
	<h1>
		<a href="/" rel="home"><img src="imgs/logo.gif" alt="inHarmony Logo" /></a>
		REMOVE FROM HERE
		<a href="/" rel="home">inHarmony<span class="blue">.</span></a> <br />
		<span class="subtitle">Just another HTML template</span>
		TO HERE
	</h1>
</div>

The <span class="blue">.</span> is just a design touch, you can remove it too if you like.

Change the address and social links

The #address-block in header is a microdata rich snippet, which helps your business to be better seen and previewed by search engines, especially Google, in search results. Fill out the fields of the address, don't forget the mailto: parameter (or remove the a link for a span if you don't want the email address to be clickable).

Below the address are the social links. The icons are Font Awesome icons and you have more of them to your disposal - they are commented, choose the ones useful for you. Fill out the href links to your social profiles, with target="_blank", it all opens in a new window.

You can change the colors and size of the social icons in the master.css file. Locate #social-block a i,

Setting up Google Custom Search & Google Analytics

You'll need a gmail account for all of this. For Google CSE Search, go to https://www.google.com/cse/, add new custom search, use the domain name of your website and save the ID (of your newly created custom search). Go to the .html file (all of them), locate this line and put the ID there:

var cx = '017683756184911932766:rvnzs1j9m1g';

For Google Analytics, go to https://www.google.com/analytics/, set up the Analytics for your website and save its UX- number. Go to the .html file (all of them) at the bottom and put the number there:

_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);

Setting up your homepage: slider

The #slider is operated by a jQuery Cycle Plugin by malsup. Every .slide has 3 layers: the background image layer (the main one), the semi-transparent image layer over it (the girl on the first slider for example) and the text box with paragraphs:

  • .slide-back (jpg image)
  • .slide-image (png image)
  • .slide-text (paragraphs)

You will need to have at least one jpg image (.slide-back) to have the slider functioning. This image should be 1065 x 450 px.

The image on top of the background image is a png image with transparency.

The paragraphs in .slide-text are all animated. For best experience, have 4 of them at most.

Tip: If you want to have a button there, make sure the paragraph has an inline class, like so:

<p class="inline"><a href="#" class="button">Buy it</a></p>

The script operating the cycle slider can be found at the bottom of index.html file. Here are some parameters you can change:

  • fx - transition effect. Best is fade. Others can be found here.
  • speed - how long does it take for the the background to fade out (in miliseconds)
  • timeout - how long does the slide stays visible (in miliseconds)

For professionals, here are all options for the slider.

The subtle animation of paragraphs is handled in before and after functions.

You can have as many slides as you wish.

Warning: If you only have one .slide, the plugin will not work and you'll see blank space.

Setting up your homepage: content and widgets

Homepage comprises of these content components:

  • #slider (cycle slider)
  • #features (6 icons)
  • #slogan (grey box with text)
  • #latest-projects (images in carousel)
  • #recent-news (vertical carousel)
  • #testimonials (quotes in a cycle)
  • #clients (client logos in carousel)

Plugins operating the components can be found at the bottom of index.html file:

  • #slider (operated by Cycle)
  • #latest-projects (operated by jCarousel)
  • #recent-news (operated by jCarousel)
  • #testimonials (ooperated by Cycle)
  • #clients (operated by jCarousel)

Slider

This component is explained by detail in the previous section of this documentation.

Features - 6 icons

Every .feature takes up 1/6 of the content width (16.67%). If you want to have less features, change the percentage in css/master.css (locate .feature line). Icons in the features are Font Awesome icons - take a look at 350+ Font Awesome icons - you can have any icon there! Just change the class in the i tag:

<i class="icon-ANYTHING"></i>

You can control the color and size of the icons in the css file.

Slogan

Here you can have anything, it is just a grey box with centered text.

Latest Projects

This is a jCarousel carousel. It is composed by .carousel4 li items, each having the popup image, headline and brief description. The popup is controlled with the Magnific Popup plugin. Every popup image is encapsulated in a link with a .popup class. Here is the code:

<a class="popup" href="LARGE IMAGE"><img src="THUMBNAIL" alt="DESCRIPTION" /></a>

Each project is 264px wide. Make sure the thumbnail image is at least 264px in width (ideally 480px in width, but the size can be anything). Also, the thumbnails should have the same height, otherwise you end up with an odd-looking carousel.

If you choose to have a lot of portfolio pieces in the carousel, go to css/master.css file, locate ul.carousel4 line and make sure it's width is sufficient (right now it's 3000px, which is enough for 8 pieces).

Recent News

This component is operated by jCarousel, its orientation is vertical.

In css/master.css file, this is styled as .carousel-vert4

Testimonials

This component (#quotes) is operated similarly to the slider, by the Cycle plugin.

In css/master.css file, this is styled as .quote

Clients

This component is operated by jCarousel, you can change the automatic movement timing (interval) in the script at the end of index.html file.

In css/master.css file, this is styled as .carousel7

The client logo image should have maximum width of 160px and maximum height of 150px.

Columns in footer

Each .footerbox takes up 1/4 of content space. It's basically up to you what you put in it. The newsletter sign-up form is just an example, it is not functioning. If you're using Mailchimp for your subscriptions, I recommend this article.

If you want to have a 3-column footer instead, go to css/master.css and locate line .footerbox. Change the width to 30%.

Make sure that the last .footerbox has class .last:

<div class="footerbox last">

Setting up layouts and sidebar for pages

Page layout are easy. You have 3 of them to your disposal (each are represented as a body class):

  • .full - page with no sidebar
  • .right-sidebar - content on the left, sidebar floating on the right
  • .left-sidebar - content on the right, sidebar floating on the left
<body class="left-sidebar">
	<div id="content"> CONTENT </div>
	<aside id="sidebar"> SIDEBAR </aside>
</body>
						

Each component in the sidebar is encapsulated in .widget element.

Setting up portfolio

Portfolio is operated by the Mixitup plugin, which handles its filtering.

Code nessessery to create a category menu:

<ul id="menu-portfolio-items" class="tags">
	<li><a href="#" data-filter="all" class="active">All</a></li>
	<li><a href="#" data-filter="cat-1">Category 1</a></li>
</ul>
					

The .gallery has many .gallery-items and these gallery items sit in .gallery-rows.

If you want 4-column gallery, make sure that each .gallery-item has class .col-4 and that there are exactly 4 gallery items in each gallery row.

Similarly, 3-column gallery will have gallery items with class .col-3 and there will be exactly 3 gallery items in each gallery row.

Each gallery item has categories as classes for filtering, make sure they correspond with the data-filter attributes in the category menu.

<div class="gallery">
	<div class="gallery-row">
		<dl class="gallery-item col-NUMBER CATEGORY">
			<dt class="gallery-icon">
				<a href="LARGE IMAGE"><img src="THUMBNAIL IMAGE" alt="" /></a>
			</dt>
			<dd class="gallery-caption">
				<strong>HEADING</strong> 
				<span class="small">DESCRIPTION OR CATEGORIES</span>
			</dd>
		</dl>
	</div>
</div>
					

Make sure the thumbnail images have the same width and height, ideally 480px in width.

Setting up blog pages

Blog page consists of:

  • article - one blog post
  • .entry-header
    • .post-thumb - wide thumbnail
    • .entry-byline - meta info with author vcard
  • .entry-summary - excerpt
    • h1 - heading
    • p - excerpt
    • .entry-footer - meta info

Choose the layout of the blog page by adding a .left-sidebar or .right-sidebar class to the body tag.

Tip: In the author's vcard, use your google plus account link - that way your page will appear in search results like this: Google search result

Setting up contact page, map and contact form

Open the contact.html file and go to the bottom, where the map script is. Here, fill the address twice (on two lines). Make sure that maps.google.com recognizes this address. You can play with the zoom property to get a perfect map granularity.

All files needed for the contact form to work are in the /contact folder. Open the contact.php file and change the email address to yours. You can try the contact form, but first it has to be uploaded on a server with php.

Creating your own color scheme

Each html file uses a colors-classic.css color scheme. There are more to your disposal in the /css folder. Take any you like the most and copy it. Keep it in the /css folder. Include the link to your newly created color scheme in the <head> section of your html files.

The color scheme css file has only a couple colors. If you take a closer look, each section divided by comments has one color. So if you want to change blue for red, make sure you change the color hex code in the whole section.

For a perfect color scheme with harmonious colors, I recommend colorschemedesigner.com.