Syntac HTML5 Template Documentation


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!

Email
Themeforest


Author: eriktailor
Contact: Contact Form at profile page
Current Version: 1.3
Documentation Version 1.3
Created: 2013-08-03
Modified: 2013-10-18

Heads up! It is recommended to choose your desired color scheme before do any editing!

This template has 5 different pages and 3 header layout options, it is responsive with additional two color schemes. Every different content section is wrapped within a section element with an unique id, and a 960px wide container div for the contents.


Head Markup

The head template structure is the same throughout the template. Here is the head structure.

<head> 
 
	<!-- Basic Page Needs 
  ================================================== --> 
	<meta charset="utf-8"> 
	<title>Syntac | HTML5</title> 
	<meta name="description" content="Premium Personal Portfolio HTML5 Template"> 
	<meta name="author" content="eriktailor"> 
 
	<!-- Mobile Specific Metas 
  ================================================== --> 
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 
	<!-- CSS 
  ================================================== --> 
	<link rel="stylesheet" href="css/reset.css"> 
	<link rel="stylesheet" href="css/skeleton.css">  
	<link rel="stylesheet" href="css/layout.css"> 
	<link rel="stylesheet" href="css/animate.css">	 
	 
	<!--[if lt IE 9]> 
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
	<![endif]--> 
 
	<!-- Favicons 
	================================================== --> 
	<link rel="shortcut icon" href="img/favicon.ico"> 
	<link rel="apple-touch-icon" href="img/apple-touch-icon.png"> 
	<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png"> 
	<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png"> 
	 
	<!-- Webfonts 
	================================================== -->	 
	<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'> 
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600,800' rel='stylesheet' type='text/css'> 
	<link rel="stylesheet" href="font/font-awesome.min.css"> 
 
</head>

Body Markup

The body template structure is the same throughout the template. Here is the body structure.

<body> 
 
<!-- Primary Page Layout 
================================================== --> 
 
<!-- Wrapper --> 
<div id="wrapper"> 
 
	<!-- Header --> 
	<header id="header"> 
	 
		... 
	 
	</header><!-- / Header --> 
 
 
	<!-- Intro --> 
	<section id="intro"> 
	 
		<!-- Container --> 
		<div class="container"> 
		 
			... 
		 
		</div><!-- / Container --> 
		 
	</section><!-- / Intro -->	 
 
	 
	<!-- Section --> 
	<section id="..."> 
	 
		<!-- Container --> 
		<div class="container">		 
		 
			... 
		 
		</div><!-- / Container --> 
		 
	</section><!-- / Section -->	 
 
	 
	<!-- Section --> 
	<section id="..."> 
	 
		<!-- Container --> 
		<div class="container">		 
		 
			... 
		 
		</div><!-- / Container --> 
		 
	</section><!-- / Section -->	 
	 
	 
	 
	<!-- Footer --> 
	<footer id="footer"> 
	 
		<!-- Container --> 
		<div class="container"> 
		 
			... 
		 
		</div><!-- / Container --> 
 
	</footer><!-- / Footer --> 
	 
 
</div><!-- / Wrapper --> 
 
 
<!-- Javascript 
================================================== --> 
 
... 
 
<!-- End Document 
================================================== --> 
</body>

Heads up! I'm using seven CSS files in this template. Two of them: red.css or turq.css are imported through layout.css

Stylesheets

They are located in "/css" folder. Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:

File Name Description
reset.css Contains the basic browser reset information
skeleton.css Contains responsive grid framework for layout
layout.css The main stylesheet, contains main template and module styling
animate.css Contains the CSS3 animation effects
lightbox.css Contains the lightbox styling for the Portfolio page
red.css Additional stylesheet contains the red color skin
turq.css Additional stylesheet contains the turquise color skin

CSS Structure

The Main stylesheet layout.css is divided for easier customization. Beside are the table of content for the stylesheet:

/*----------------------------------------------------------*/
/*	# Table of Contents */
/*----------------------------------------------------------*/
/* 
	 1.  Import Skin
	 2.  Basics & Typography
	 3.  Header
	 4.  My Profile
	 5.  Services
	 6.  Portfolio
	 7.  Resume
	 8.  Blog	 
	 9.  Contact
	10.  Footer
	11.  Media Queries	
*/
/*----------------------------------------------------------*/

JavaScript Files

There are seven Javascript files in the download. They are located in "/js" folder.

Tag Description
mediaelement-and-player.js This plugin is used for the header-video layout.
jquery.cycle2.js jQuery Cycle2 plugin is used to create sliders (eg. testimonials slider)
jquery.isotope.js jQuery Isotope.js is used for the dynamic portfolio filtering.
script.js The main javascript file, where global functions are defined.
lightbox-2.6.js jQuery Lightbox is used at the portfolio page, lightboxing images.
tweetie.js Tweetie jQuery plugin is used for real-time twitter feeds.
waypoints.min.js jQuery Waypoints let us execute a function whenever you scroll to an element.
waypoints-sticky.min.js jQuery Waypoints Sticky plugin used to create the sticky navigation bar.

Images

All of the images are located in the "/img" folder, here are the contents:

Folder Description
img/ The root folder contains default images, design elements and favicons.
img/blog Preview images for blog posts are stored in this folder.
img/bullets Bullets folder contains the triangle bullets used in the site.
img/portfolio This folder contains the portfolio images.
img/slider This folder contains the images for the slider-header layout.

Heads up! To edit files in this template you need a text editor software installed in your computer.

Below are some of popular text editor software out there:

  1. Sublime Text (Cross Platform)
  2. Notepad++ (Windows)
  3. TextMate (Mac)

How To Edit Colors

Open the css color skin file you'll want to edit (e.g. red.css), and then do the following:

/* All / Page Title */
.page-title span {color: #yourColor;}

How To Set Header Layout

There are 3 header layout options included with this template:header-basic, header-video, header-slider. The deafult is the basic header with a static image. If you would like to use the video or the slider version, just edit each html file: add the class video or slider to the #header.

<!-- Header -->
<header id="header" class="slider">		

You may want to apply for example the slider layout for all pages, then you can add this code to script.js file:

$('#header').addClass('slider');	
Basic Header

Just need to replace the header_bg.jpg sample image with yours.

Video Header

First you need to convert your videos to the HTML5 formats .mp4 .ogg .webm, then place them in the /video folder then replace the sample image with the first screen of your video (this image will show up on small devices). There are several HTML5 video converter programs, but if it helps I converted my samples with this one.

Slider Header

Replace the sample files in the img/slider folder with yours.


How To Change Icons

Choose the wished one from the icon reference, then simply replace the sample icon's name (e.g. icon-twitter) in it's class for the chosen one:

<div class="twitter-sign">
	<i class="icon-twitter"></i>
</div>

How To Change Portfolio Filters

Locate the filters section in portfolio.html file, then change the attributes to your desired filters in the data-option-value="..." element.

<!-- Filter 2--> 
<li class="filter"><a href="#filter" data-option-value=".design"> 
	<i class="icon-desktop"></i><span>Design</span> 
</a></li>

How To Apply Portfolio Filters

Add your filter's class to each portfolio-item's bounding div, e.g.: <div class="one-third column item ...your filter..."> Note: You can add several filters to a portfolio item, not only one.

<!-- Portfolio Item --> 
<div class="one-third column item photo paint">			 
	<figure class="portfolio-item"> 
		<div class="picture"> 
			<div class="overlay"> 
				<span class="bullet"></span> 
				<a href="img/portfolio/01.jpg" data-lightbox="image-1" class="zoom"> 
					<i class="icon-plus"></i> 
				</a> 
			</div> 
			<img src="img/portfolio/01.jpg" alt=""/> 
		</div> 
		<figcaption> 
			<span>Title of project</span>Lorem ipsum dolor sit amet 
		</figcaption>	 
	</figure> 
</div>

How To Use The Skill Bars

At the resume.html page, you can easily set your skill's values by editing the data-percent="..." custom attribute.

<!-- Skill --> 
<div class="skill"> 
<div class="skill-bar" data-percent="81"><p>Front-End Development</p></div> 
	<span class="resume-bullet-left"></span><div class="skill-tip">81%</div> 
</div>

How To Set Your Email

Open mailer.php file in your editor, and just replace the sample e-mail address for yours.

$to = 'youremail@domain.com';

How to Connect to Twitter

Follow the instructions below to create your twitter feed.

Syntac twitter feed tutorial

How to apply custom animations

If you would like to change on of the CSS3 animations, open up script.js file, and locate the "Animation Effects" section at the bottom of the document. Below, you will find the elements and the applied animation effect. To change one of them, just replace the name of animation in the (animated ...) part. You find a reference of the available animations here.

// Page Titles
$('#header').waypoint(function() {
	
	$('.page-title').addClass('animated fadeInUp');
	  
}, { offset: -100 });

How To Use The Maps

To specify your address on the map, open contact.html file and scroll to the bottom to the javascript section. All you have to do is to change the coordinates to your own ones. You can get your addresses coordinates here.

// Replace with your coordinates
// ----------------------------------- 
 
var latitude = 40.81992, 
	longitude = -73.90683; 
	 
// -----------------------------------

Install Theme

Here's a brief information about how to install Omnibiz from scratch

Pick your color scheme and layout first, and the extract zip file and then upload the files to your online host.

Customize the template to your liking according to the instructions above. Feel free to contact me if you have any further questions.

In order to see whether the editing has been done or not, you need to refresh your browser. If you don't see any changes then the browser's cache need to be cleared.

AvaLance template used these scripts & graphic files:

JavaScript

  1. jQuery
  2. jQuery Cycle 2
  3. jQuery Isotope
  4. jQuery LightBox 2
  5. jQuery Tweetie
  6. jQuery Waypoints
  7. jQuery MediaElement

CSS

  1. Skeleton
  2. Animate

Fonts

  1. Google Webfonts
  2. Font Awesome

Images & Video

  1. Daniele Zedda
  2. Pedro Conti

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.