cvCard Documentation

Overview of the template, its contents, and how to get started with the template.

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, you can sign in to our support forums with your purchase code. And please rate the theme on themeforest if you liked it. Thanks so much!

- Pixelwars Team

Support Forums

Any questions that are beyond the scope of this help file, use support forums.

Visit Support Forums

Follow us

Follow us on themeforest and don't miss new upcoming premium themes.

Follow us on themeforest

Rate Theme

If you liked the theme you can rate it on themeforest in your downloads menu.

Rate on themeforest

We assume you have basic knowledge of HTML / CSS and JS. In this doc you will not learn how to code but you will learn how to setup, use and customize the theme. Before you begin make sure you have a code editor, you can use Dreamweaver or any other editor like Notepad++ will be enough.

Within the download you'll find the following file structure, logically groupped common assets.

Once downloaded, unzip the compressed folder to see the structure of th theme. You'll see something like this:

  cvCard/
  ├── css/
  ├── js/
  ├── media/
  ├── images/
  ├── Templates/
  └── index.html
  └── other html files

If you have Dreamweaver, and you are going to build a static html site with this template you can benefit template files in "Templates" folder. Template files includes layout markup shared by all pages, and once you have updated a template all pages that inherits that template are automatically updated. For example if you create a new site in Dreamweaver, then copy all project files to this site folder, then open "layout.dwt" under "Templates/" folder and update some parts in the markup in "layout.dwt", when you save it, all pages' markup will be updated. Check out this article for more about Dreamweaver templates. Here are the Dreamweaver template files in this project;

  • layout.dwt Includes general layout markup shared by all pages.

In this template you will find all HTML files in well formatted and highly commented.. Most of the markup is self explanatory with comments. So i will only explain the parts where the markup needs more attention.

cvCard includes two layout; one is "CSS3 Sliding Horizontal Layout" and the other is "Classic Layout" for non supported browsers. Both layout uses the same common markup. This template is a kind of a one page template, all pages are in "index.html".

Doctype

Uses plain HTML5 Doctype

<!DOCTYPE html>

Html tag

html tag with custom html5 data attributes for easy customizing. You can learn more about in customization section

<html lang="en" class="no-js one-page-layout" data-classic-layout="false" data-mobile-only-classic-layout="true" data-inAnimation="fadeInUp" data-outAnimation="fadeOutDownBig">

Important : one-page-layout class only used in index.html file which has a one page layout.

Other single pages use single-page-layout class;

<html lang="en" class="no-js single-page-layout" data-classic-layout="false" data-mobile-only-classic-layout="true" data-inAnimation="fadeInUp" data-outAnimation="fadeOutDownBig">

This template has 5 pages in index.html file: About Me + Portfolio + Contact + Blog(latest posts only) + Resume. The HTML files are in well formatted and highly commented.

Layout Markup

Here is the markup for general layout;

<!-- CONTAINER -->
<div class="container" id="container">
	
	<!-- HEADER -->
	<header class="header">
	
	</header>
	<!-- HEADER -->
	

	<!-- WRAPPER -->
	<div class="wrapper">
	
	
		<!-- PAGE : ABOUT -->
		<section id="about" class="page">
			<div class="content">
			
				<!-- ABOUT PAGE CONTENT -->
				
			</div>
			<!-- CONTENT -->
		</section>
		<!-- PAGE : ABOUT -->
		
		
		<!-- PAGE : PORTFOLIO -->
		<section id="portfolio" class="portfolio page">
			<div class="content">
				
				<!-- PORTFOLIO PAGE CONTENT -->
			
			</div>
			<!-- CONTENT -->
		</section>
		<!-- PAGE : PORTFOLIO -->
		
		
		<!-- PAGE : CONTACT -->
		<section id="contact" class="page">
			<div class="content">
					
				 <!-- CONTACT PAGE CONTENT -->					  
								  
			</div>
		</section>
		<!-- PAGE : CONTACT -->
		
		
		<!-- PAGE : BLOG -->
		<section id="blog" class="page">
			<div class="content">
				
				<!-- BLOG PAGE CONTENT -->	   
				
			</div>
		</section>
		<!-- PAGE : BLOG -->
		
		
		<!-- PAGE : RESUME -->
		<section id="resume" class="page">
			<div class="content">
				
				<!-- RESUME PAGE CONTENT -->			   
				
			</div>
			<!-- CONTENT -->
		</section>
		<!-- PAGE : RESUME -->

	
	</div>
	<!-- WRAPPER -->
	
	
</div>
<!-- CONTAINER -->
        
  
<!-- PORTFOLIO SINGLE AJAX CONTENT CONTAINER -->
<div class="p-overlay"></div>
<div class="p-overlay"></div>

<!-- ALERT : used for contact form mail delivery alert -->
<div class="site-alert animated"></div>

Header Markup

Here is the markup for header.

<!-- HEADER -->
<header class="header">

	<img src="images/site/avatar.png" alt="avatar">
	<h1>Johnny Doe</h1>
	<p>freelance graphic designer</p>

	<!-- NAV MENU -->
	<ul class="vs-nav">
		
		<li><a href="#/about">about me</a></li>
		<li><a href="#/portfolio">portfolio</a></li>
		<li><a href="#/contact">contact</a></li>
		<li><a href="#/blog">blog</a></li>
		<li><a href="#/resume">resume</a></li>

	</ul>
	<!-- NAV MENU -->

	<!-- SEARCH --> 
	<div class="header-search">
		<form role="search" method="get" id="search-form" action="#">
		  <input type="text" value="" name="s" id="search" placeholder="ENTER KEYWORD">
		  <input type="submit" id="search-submit" title="Search" value="&#8594;">
		</form>
	</div>
	<!-- SEARCH -->

</header>
<!-- HEADER -->

This template is based on Bootstrap 's solid responsive 12 column grid system.

Here is a simple example of using grid to crate a 3 column layout;

<div class="row">
  <div class="col-md-4">column 4/12</div>
  <div class="col-md-4">column 4/12</div>
  <div class="col-md-4">column 4/12</div>
</div>

Note that: columns must be wrapped by a row container. This is a simple usage of the grid system. Bootstrap grid sytems has more powerfull features, check out Bootstrap Doc to learn more about the grid system.

This template uses 2 font icon set. They are all font icons(vector) and can be styled easily with css. They are also easy to drop in anywhere as you will see in some part of this template.

All Available Icons

300+ FontAwesome Icons

200+ Fontello Icons

Usage of the icons

For FontAwesome icons;

<i class="fa fa-microphone"></i>

For Fontello icons;

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

"About Me" page is consist of : Intro Text / Latest Tweets / Services / Work Process / Fun Fact and Clients.

Intro Text

<!-- intro -->
<div class="intro">

	<h2>
		
		Hello. I am
	
		<span class="rotate-words">
			<span>an illustrator.</span>
			<span>a writer.</span>
			<span>a freelancer.</span>
			<span>an inventor.</span>
			<span>a wordpress fan.</span>
			<span>a coffee lover.</span>
		</span>
		
		<br> 
		I live in a small town somewhere in the world. 
		<br> 
		I am passionated about <strong>minimalistic</strong> and flat design.
		
	</h2>
	  
</div>
<!-- intro -->

You can add many span to div.rotate-words, they will be rotated automatically.

Latest Tweets

<div id="latest-tweets" class="widget-twitter" data-twitterId="388393979672150017" data-tweet-count="1"></div>

How to create a valid ID to use:

  1. Go to www.twitter.com and sign in as normal, go to your settings page.
  2. Go to "Widgets" on the left hand side.
  3. Create a new widget for what you need eg "user timeline" or "search" etc.
  4. Feel free to check "exclude replies" if you dont want replies in results.
  5. Now go back to settings page, and then go back to widgets page, you should
  6. see the widget you just created. Click edit.
  7. Now look at the URL in your web browser, you will see a long number like this: 345735908357048478
  8. Use this as your ID : data-twitterId

data-tweet-count determines how many tweet to show.

Resume page is consist of : Work and Education History/ Skills / Testimonials.

Skills

Here is the markup for skills;

<!-- DEV SKILLS -->
<div class="skillset">

	<!-- .skill-unit -->
	<div class="skill-unit">
		<h4>HTML5</h4>
		<div class="bar" data-percent="100">
			<div class="progress"></div>
		</div>
	</div>
	<!-- .skill-unit -->
	
	<!-- .skill-unit -->
	<div class="skill-unit">
		<h4>CSS3</h4>
		<div class="bar" data-percent="50">
			<div class="progress"></div>
		</div>
	</div>
	<!-- .skill-unit -->

</div>
<!-- DEV SKILLS -->

Note that : Use data-percent="number" attribute to give percentage to each skill.

Portfolio page has multi column masonry layout and filtering powered by isotope plugin.

Filters

Here is the markup for filters;

<!--FILTERS-->
<ul id="filters" class="filters">
  <li class="current"><a href="#" data-filter="*">ALL</a></li>
  <li><a href="#" data-filter=".design">DESIGN</a></li>
  <li><a href="#" data-filter=".coding">CODING</a></li>
  <li><a href="#" data-filter=".logo">LOGO</a></li>
</ul>
<!--FILTERS-->

Note that : data-filter=".design" attiribute keeps the class name of items which will be filtered under same category.

Portfolio Items

Here is the structure of portfolio items;

<!-- PORTFOLIO ITEMS -->
<div class="portfolio-items media-grid" data-layout="masonry">

  <div class="hentry design media-cell">
	...
  </div>
  
  <div class="hentry coding media-cell">
	...
  </div>
  
  <div class="hentry logo media-cell">
	..
  </div>
  
</div>
<!-- PORTFOLIO ITEMS -->   

Note that again : class name design in <div class="hentry design"> is related to data-filter=".design" attribute of filter markup.

data-layout determines grid layout, see all isotope layouts. Most used two layouts are masonry and fitRows.

We have 3 different types of portfolio item in general; Ajax Portfolio Details (with sidebar - full width layout) / Lightbox (image - image gallery - video - audio) and Custom Url.

1- Ajax Portfolio Details Link

Uses jquery ajax html loading to show portfolio details. Here is the markup;

<!-- portfolio-item -->  
<div class="media-cell design hentry">

	<div class="media-box">
		<img src="images/portfolio/01.png" alt="portfolio-post">
		<div class="mask"></div>
		<a href="portfolio-item-01.html" class="ajax"></a>
	</div>

	<div class="media-cell-desc">
		<h3>Personal Cv Project</h3>
		<p class="category">an illustration work</p>
	</div>

</div>
<!-- portfolio-item -->

2- Lightbox Portfolio Details Link

Uses customized and mobile optimized fancybox plugin. Supports image titles, image gellaries, videos and audios. Here is the markup;

  <!-- portfolio-item - lightbox image -->  
  <div class="media-cell design image hentry">
	<div class="media-box">
		<img src="images/portfolio/04.png" alt="portfolio-post">
		<div class="mask">
		
			<!-- lightbox - image --> 
			<a href="images/portfolio/lightbox-01.jpg" title="an illustration by Vasili Tkach" data-lightbox-gallery="fancybox-item-01" class="lightbox"></a>
			<!-- lightbox - image -->
			
		</div>
	</div>
	<div class="media-cell-desc">
		<h3>World War X</h3>
		<p class="category">ligthbox image</p>
	</div>
  </div>
  <!-- portfolio-item - lightbox image -->
  
  
  <!-- portfolio-item - lightbox gallery -->
  <div class="media-cell logo image hentry">
	<div class="media-box">
		<img src="images/portfolio/07.png" alt="portfolio-post">
		<div class="mask">
			
			<!-- lightbox - gallery -->
			<a href="images/portfolio/lightbox-02.jpg" data-lightbox-gallery="fancybox-item-02" class="lightbox" title="Octopus is dangerous!"></a>
			<a href="images/portfolio/lightbox-03.jpg" data-lightbox-gallery="fancybox-item-02" class="hidden lightbox"></a>
			<a href="images/portfolio/lightbox-04.jpg" data-lightbox-gallery="fancybox-item-02" class="hidden lightbox" title="Dog have dreams"></a>
			<!-- lightbox - gallery -->
			
		</div>
	</div>
	<div class="media-cell-desc">
		<h3>Wizard Adventure</h3>
		<p class="category">lightbox gallery</p>
	</div>
  </div>
  <!-- portfolio-item - lightbox gallery -->
  
  
  <!-- portfolio-item - lightbox video -->  
  <div class="media-cell coding video hentry">
	
	<div class="media-box">
		<img src="images/portfolio/03.png" alt="portfolio-post">
		<div class="mask"></div>
		<!-- lightbox - video --> 
		<a href="http://player.vimeo.com/video/79380715?title=0&amp;byline=0&amp;portrait=0&amp;color=009966" title="Paper by FiftyThree" data-lightbox-gallery="fancybox-item-03" class="lightbox iframe"></a>
		<!-- lightbox - video -->
	</div>
	
	<div class="media-cell-desc">
		<h3>Sleepy Games</h3>
		<p class="category">lightbox video</p>
	</div>
	
  </div>
  <!-- portfolio-item - lightbox video -->
  
  
  <!-- portfolio-item - lightbox soundcloud -->  
  <div class="media-cell coding audio hentry">
	<div class="media-box">
		<img src="images/portfolio/06.png" alt="portfolio-post">
		<div class="mask">
			
			<!-- lightbox - soundcloud --> 
			<a href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/129829419&amp;color=009966&amp;auto_play=false&amp;show_artwork=true" title="Soundcloud embed" data-lightbox-gallery="fancybox-item-04" class="lightbox iframe"></a>
			<!-- lightbox - soundcloud -->
			
		</div>
	</div>
	<div class="media-cell-desc">
		<h3>Empty Battery</h3>
		<p class="category">lightbox soundcloud</p>
	</div>
  </div>
  <!-- portfolio-item - lightbox soundcloud -->

Note that : items with the same value of data-lightbox-gallery attribute will be shown as lightbox gallery.

Note that : lightbox video or audio link need to have class iframe to work correctly.

3- Custom Url

Opens a custom url in a new tab. The markup;

<!-- portfolio-item - custom url -->  
<div class="media-cell logo url hentry">
	<div class="media-box">
		<img src="images/portfolio/08.png" alt="portfolio-post">
		<div class="mask">
			<a href="http://themeforest.net/user/pixelwars" target="_blank"></a>
		</div>
	</div>
	<div class="media-cell-desc">
		<h3>Shinny Robot</h3>
		<p class="category">an illustration work</p>
	</div>
</div>
<!-- portfolio-item - custom url -->          

We have two different layout for portfolio details: Sidebar / without Sidebar.

Remember : You need to create an html file for for each portfolio item.

Portfolio Single Layout

Here is the generic layout of portfolio single pages;

<!-- CONTAINER -->
<div class="container" id="container">
	
	<!-- HEADER -->
	<header class="header">
		
	</header>
	<!-- HEADER -->
	
	<!-- WRAPPER -->
	<div class="wrapper">

		<!-- .portfolio-single -->
		<div class="portfolio-single">
		
			<!-- .row -->
			<div class="row">
				
				<!-- TITLE - column 8/12 -->
				<div class="col-md-8 portfolio-field portfolio-title">
					<h2>Showcase your project</h2>
				</div>
				<!-- TITLE - column 8/12 -->
				
				<!-- PORTFOLIO-NAV - column 4/12 -->
				<div class="col-md-4 portfolio-field portfolio-nav">
					<a class="icon button prev ajax" href="portfolio-item-03.html"></a>
					<a class="icon button next ajax" href="portfolio-item-02.html"></a>
					<a class="button back" href="#/portfolio"></a>
				</div>
				<!-- PORTFOLIO-NAV - column 4/12 -->    
			
			</div>
			<!-- .row -->
			
				
			<!-- PORTFOLIO SINGLE PAGE CONTENT -->
			
			
			<!-- .row -->
			<div class="row">
				
				<!-- PORTFOLIO-NAV BOTTOM - column 12/12 -->
				<div class="col-md-12 portfolio-field portfolio-nav bottom">
					<a class="icon button prev ajax" href="portfolio-item-03.html"></a>
					<a class="icon button next ajax" href="portfolio-item-02.html"></a>
					<a class="button back" href="#/portfolio"></a>
				</div>
				<!-- PORTFOLIO-NAV BOTTOM - column 12/12 -->    
			
			</div>
			<!-- .row -->
			
		</div>
		<!-- .portfolio-single -->
		
	</div>
	<!-- WRAPPER -->
	
</div>
<!-- CONTAINER -->

Note : we will pull the content of <div class="portfolio-single"> in index.html via ajax.

1 - Portfolio Single with sidebar

And the markup is;

<!-- .row -->
<div class="row">
	
	<!-- PORTFOLIO-IMAGES - column 8/12 -->
	<div class="col-md-8 portfolio-field">
		<img src="images/portfolio/single/single-05.png" alt="project">
		<img src="images/portfolio/single/single-07.png" alt="project">
	</div>
	<!-- PORTFOLIO-IMAGES - column 8/12 -->
	
	<!-- PORTFOLIO SIDEBAR - column 4/12 -->
	<div class="col-md-4 portfolio-field">
		
		<h3>Description</h3>
		<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p>
		<p>Established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters. </p>
		
		<h3>Client</h3>
		<p>Apple Inc.</p>
		
		<h3>Technology</h3>
		<ul class="tags">
			<li><a>HTML 5</a></li>
			<li><a>CSS 3</a></li>
			<li><a>jQuery</a></li>
			<li><a>Responsive Design</a></li>
		</ul>
		
		<div class="launch">
			<a href="#" class="button primary">LAUNCH PROJECT</a>
		</div>
		
	</div>
	<!-- PORTFOLIO SIDEBAR - column 4/12 -->    

</div>
<!-- .row -->

2 - Portfolio Single Full Width

And the markup is;

<!-- .row -->
<div class="row">
	
	<!-- PORTFOLIO-IMAGES - column 8/12 -->
	<div class="col-md-8 portfolio-field">
		<img src="images/portfolio/single/single-05.png" alt="project">
		<img src="images/portfolio/single/single-07.png" alt="project">
	</div>
	<!-- PORTFOLIO-IMAGES - column 8/12 -->
	
	<!-- PORTFOLIO SIDEBAR - column 4/12 -->
	<div class="col-md-4 portfolio-field">
		
		<h3>Description</h3>
		<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p>
		<p>Established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters. </p>
		
		<h3>Client</h3>
		<p>Apple Inc.</p>
		
		<h3>Technology</h3>
		<ul class="tags">
			<li><a>HTML 5</a></li>
			<li><a>CSS 3</a></li>
			<li><a>jQuery</a></li>
			<li><a>Responsive Design</a></li>
		</ul>
		
		<div class="launch">
			<a href="#" class="button primary">LAUNCH PROJECT</a>
		</div>
		
	</div>
	<!-- PORTFOLIO SIDEBAR - column 4/12 -->    

</div>
<!-- .row -->

NOTE : You can add images or videos as many as you wish to portfolio single content as shown above. They will behave flexible.

NOTE : You can built your own portfolio single templates with built in bootstrap responsive grid as you wish.

Contact page is consist of : Contact Info / Social Icons / Contact Form / Google Map.

Setting up Contact Form

1-) You can change mail subject in form's html markup;

<!-- enter mail subject here -->
<input type="hidden" name="subject" id="subject" value="You have a new message from cvCard!">

Change only the value="You have a new message from cvCard!" to your desired subject.

2-) Edit send-mail.php in a text editor,

// site owner
$site_name = 'cvCard HTML5 Template';
$sender_domain = 'server@your-domain.com';
$to = 'your-mail@gmail.com';
  • $site_name : this will be shown as sender name.
  • $sender_domain : this is required for some hosting like dreamhost. It should be like server@your-domain.com.
  • $to : This is the receiver e-mail address, your address.

Social Icons

Here is the markup for all available social icons;

<!-- SOCIAL -->
<ul class="social">
	<li><a class="facebook" href="#"></a></li>
	<li><a class="twitter" href="#"></a></li>
	<li><a class="linkedin" href="#"></a></li>
	<li><a class="google-plus" href="#"></a></li>
	<li><a class="pinterest" href="#"></a></li>
	<li><a class="github" href="#"></a></li>
	<li><a class="behance" href="#"></a></li>
	<li><a class="dribbble" href="#"></a></li>
	<li><a class="instagram" href="#"></a></li>
	<li><a class="lastfm" href="#"></a></li>
	<li><a class="rss" href="#"></a></li>
	<li><a class="vimeo" href="#"></a></li>
	<li><a class="forrst" href="#"></a></li>
	<li><a class="skype" href="#"></a></li>
	<li><a class="picasa" href="#"></a></li>
	<li><a class="youtube" href="#"></a></li>
	<li><a class="flickr" href="#"></a></li>
	<li><a class="tumblr" href="#"></a></li>
	<li><a class="blogger" href="#"></a></li>
	<li><a class="delicious" href="#"></a></li>
	<li><a class="digg" href="#"></a></li>
	<li><a class="friendfeed" href="#"></a></li>
	<li><a class="wordpress" href="#"></a></li>
	<li><a class="stack-overflow" href="#"></a></li>
	<li><a class="foursquare" href="#"></a></li>
	<li><a class="xing" href="#"></a></li>
	<li><a class="weibo" href="#"></a></li>
	<li><a class="soundcloud" href="#"></a></li>
	<li><a class="fivehundredpx" href="#"></a></li>
	<li><a class="slideshare" href="#"></a></li>
</ul>
<!-- SOCIAL -->

Google Map

This is the markup for google map;

<!-- GOOGLE MAP -->
<div class="map">
	<div data-latitude="-25.363882" data-longitude="131.044922" data-zoom="4" id="map-canvas" class="map-canvas"></div>
</div>
<!-- GOOGLE MAP -->

How to get latitude and longitude values.

  • data-latitude : enter latitude value for your map
  • data-longitude : enter longitude value for your map
  • data-zoom : enter zoom value for your map
  • $sender_domain : this is required for some hosting like dreamhost. It should be like server@your-domain.com.
  • $to : This is the receiver e-mail address, your address.

There are 2 different types of single page layout in this template;

1- Fixed width layout

Perfect for readable content. Here is the markup;

<!-- CONTAINER -->
<div class="container" id="container">
	
	<!-- HEADER -->
	<header class="header">

	</header>
	<!-- HEADER -->
	
	<!-- WRAPPER -->
	<div class="wrapper">

		<!-- .readable-content -->
		<div class="readable-content">
		
			<!-- .hentry -->
			<article class="post hentry">
				
				<!-- .entry-header -->
				<header class="entry-header">
					 <h1 class="entry-title">PAGE TITLE</h1>
				</header>
				<!-- .entry-header -->
				
				<!-- .entry-content -->
				<div class="entry-content">
					
					<!-- PAGE CONTENT HERE -->
					
				</div>
				<!-- .entry-content -->
				
			</article>
			<!-- .hentry -->
			
		</div>
		<!-- .readable-content -->
		
	</div>
	<!-- WRAPPER -->
	
</div>
<!-- CONTAINER -->

2- Full width layout

Perfect for readable content. Here is the markup;

<!-- CONTAINER -->
<div class="container" id="container">
	
	<!-- HEADER -->
	<header class="header">
	
	</header>
	<!-- HEADER -->
	
	<!-- WRAPPER -->
	<div class="wrapper">
		
		<!-- .full-width-content -->
		<div class="full-width-content">
		
			<!-- .hentry -->
			<article class="page type-page hentry">
				
				<!-- .entry-header -->
				<header class="entry-header">
					 <h1 class="entry-title">PAGE TITLE</h1>
				</header>
				<!-- .entry-header -->
				
				<!-- .entry-content -->
				<div class="entry-content">
					
					<!-- PAGE CONTENT HERE -->
					
				</div>
				<!-- .entry-content -->
			
			</article>
			<!-- .hentry -->
		
		</div>
		<!-- .full-width-content -->

	</div>
	<!-- WRAPPER -->
	
</div>
<!-- CONTAINER -->

Blog page supports several post formats. I want to talk about self hosted audio and video. Other post format's html markup is simple enough.

This template uses mediaelementjs script for self hosted html5 audio/video solution. It also has flash/silverlight fallbacks for non-supported browsers.

Only one .mp3 file is enough for self hosted html5 audio. Here is the markup;

<audio preload="none" src="media/AirReview-Landmarks-02-ChasingCorporate.mp3"  style="width: 100%;"></audio>

And again thanks to mediaelementjs only one .mp4 file is enough for self hosted html5 video. Here is the markup;

<!-- .media-wrap -->
<div class="media-wrap">
	<video src="media/big-buck-bunny-trailer.mp4" poster="media/big-buck-bunny-trailer.jpg" preload="none" style="width: 100%; height: 100%;"></video>
</div>
<!-- .media-wrap -->

Note : <div class="media-wrap">is needed to make the video responsive with correct aspect ratio.

Note : poster="media/big-buck-bunny-trailer.jpg" is the image that will be shown as placeholder (or poster) before video playing.

This template uses flexslider for image gallery. Here is the markup for slides;

<!-- .flexslider -->
<div class="flexslider" data-autoplay="false" data-interval="3000" data-animation="slide" data-direction="horizontal" data-animationSpeed="600"  data-pauseOnHover="true">
	<!-- .slides -->
	<ul class="slides">
		
		<!-- slide -->
		<li>
			<img src="images/blog/daft-punk-presentation.png" alt="slide">
			<p class="flex-title">This is a slide title.</p>
		</li>
		<!-- slide -->
		
		<!-- slide -->
		<li>
			<img src="images/blog/lee-2.png" alt="slide">
		</li>
		<!-- slide -->
		
		<!-- slide -->
		<li>
			<img src="images/blog/lee.png" alt="slide">
		</li>
		<!-- slide -->
		
	</ul>
	<!-- .slides -->
</div>
<!-- .flexslider -->

You can customize flexslider with data attributes;

data-autoplay autoplay slideshow : "true" or "false"

data-interval slideshow image change interval(in ms) when autoplay is on.

data-animation slide change animation : "slide" or "fade"

data-direction slide direction : "horizontal" or "vertical"

data-animationSpeed slide change animation speed(in ms)

data-pauseOnHover pause the slideshow when interacting with control elements : "true" or "false"

Here is a complete list of used css files in the theme and what thay stand for;

  • print.css : Print specific styles.
  • normalize.css : Normalize.css is an alternative to CSS resets. Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
  • bootstrap.min.css : Bootstrap is a powerful front-end framework and we only used the responsive grid system for our layout.
  • animate.css : Animate.css is a bunch of cool, fun, and cross-browser css3 animations. We are using it for page/portfolio details/lightbox transitions.
  • font-awesome.min.css : Font Awesome includes styles for Font Awesome font icons.
  • fontello.css : includes styles for fontello font icons.
  • google-code-prettify/prettify.css : style file fo the google code prettify script.
  • uniform.default.css : style file fo the Uniform script.
  • flexslider.css : style file of FlexSlider responsive slider script, used for post format gallery slider in blog.
  • mediaelementplayer.css : style file fo the MediaElement.js script file.
  • tooltipster.css : style file fo the tooltipsetter script.
  • nprogress.css : style file fo the nprogress script file.
  • jquery.fancybox-1.3.4.css : is the style file of Fancybox jquery plugin, used for lightbox.
  • style.css : wordpress specific styles (image alignments etc..). Since this template is intented to convert a wordpress theme soon, we used style.css
  • main.css : is the main style file of the theme. Layout/font/color and other style declerations are in this file. Code blocks are grouped and commented.

Included Fonts (Font icons)

In this theme we have used font icons instead of png icons, because font icons are vector-scalable, ready for retina screens, saves bandwidth and easy to work with.

  • css/fonts/FontAwesome : FontAwesome is the general font icon set we used in this template.
  • css/fonts/fontello : a custom set of icons from Fontello.com, mostly used for social icons.

We are using jquery (v1.10.2) as javascipt framework.

Here is a complete list of used script files in the template and what thay stand for;

  • jquery-1.10.2.min.js : jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
  • jquery-migrate-1.2.1.min.js a jQuery Migrate is a plugin used to detect and restore APIs or features that have been deprecated in jQuery and removed as of version 1.9
  • modernizr.js : Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. We are using it to proivde fallbacks for not supported browser.
  • html5shiv.js : HTML5 Shiv is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.
  • selectivizr-min.js : selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
  • respond.min.js : Respond is a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) (Required for bootstrap's mobile-first approach grid to work on older IEs).
  • jquery.address-1.5.min.js : jQuery Address plugin provides powerful deep linking capabilities and allows the creation of unique virtual addresses that can point to a website section or an application state.
  • smoothscroll.js : a script to provide smooth scroll on chrome.
  • nprogress.js : nprogress is a nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!
  • fastclick.js : fastclick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers.
  • jquery.imagesloaded.min.js : imagesloaded is a jQuery plugin that triggers a callback after all images have been loaded.
  • jquery.isotope.min.js : Isotope is an exquisite jQuery plugin for magical layouts. We used it to build portfolio layout and filtering. Also for gallery page layout.
  • jquery.flexslider-min.js : FlexSlider is a responsive slider script, used for post format gallery slider in blog.
  • jquery.fitvids.js : fitvids.JS is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. We used it for responsive video embeeding.
  • jquery.validate.min.js : jQuery validate plugin is a jQuery plugin makes simple client-side form validation. We used it for contact form client-side validation.
  • jquery.uniform.min.js : jQuery Uniform is a form style plugin, used for cross browser styled form elements.
  • jquery.fancybox-1.3.4.pack.js : is the script file of Fancybox jquery plugin, used for lightbox.
  • jquery.tooltipster.min.js : Tooltipsetter is a powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS.
  • google-code-prettify : google-code-prettify is a Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.
  • twitterFetcher_v10_min.js : Twitterfetcher is a plugin to show your latest tweets.
  • mediaelement-and-player.min.js : MediaElement.js is a script that provides HTML5 audio and video players in pure HTML and CSS with flash/silverlight fallbacks for non supported browsers.
  • send-mail.js : is a simple script file written by us to send mail via contact form with ajax support.
  • triple.layout.js : Sliding Horizontal Layout script used for layout.
  • main.js : This is the main script file of the theme. Plugin calls and other script works are done in this file with comments.

We designed this template for easy customization. You can customize the template easily to your needs in two general ways : Html Data Attributes / CSS Skins.

Here is a list of custom data attributes you can use with html tag.

<html lang="en" class="no-js one-page-layout" data-classic-layout="false" data-mobile-only-classic-layout="true" data-inAnimation="fadeInUp" data-outAnimation="fadeOutDownBig">
  • data-classic-layout : true/false : when true always fallbacks to classic layout, deactivates "Sliding Horizontal Layout" layout. Default value is false.
  • data-mobile-only-classic-layout : true/false : when true always fallbacks to classic layout on mobile devices. Default value is true. Make it false if you want to try "Sliding Horizontal Layout" on mobile.
  • data-inAnimation : Determines the animation type for ajax portfolio details page in animation; You can see a full list of supported animations live in animate.css.
  • data-outAnimation : Determines the animation type for ajax portfolio details page out animation; You can see a full list of supported animations live in animate.css.

NOTE : Make sure you select any "in" animation for data-inAnimation and "out" animation for data-outAnimation attributes.

This template has 3 predefined skins for quick customization. Skin files are located in css/skins folder.

  css/skins/
  ├── flat.css
  ├── overlay.css
  └── overlay-bold.css

If you don't include any skin you will get the minimal style.

Add the selected skin style file just before the close bracket of head tag.

<link rel="stylesheet" type="text/css" href="css/skins/flat.css">

While this template is designed for easily styling with predefined css skin files if you want to edit a specific section of the site, follow these steps;

First grab the element you want to style by inspecting element in your browser, right click the element and click Inspect Element. If you don't know how, check out this article, once you are familiar with this approach you will find it extremely easy to edit/override current styles of an element.

Let's say you want to make active filter link item bolder in portfolio filtering. Grab the element by right click on it and click "Inspect Element", on the right pane of developer tool window we can see to code to grab the elemnent with css : #filters .current a Then do the following;

#filters .current a { font-weight: bold; }

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 .

#portfolio #filters .current a { font-weight: bold ; }

And if your new style is not overriding, add !important at the end of style definition;

#filters .current a { font-weight: bold !important; }

NOTE : Add your custom css code after all style definitions in your head tag.

<style>
	#filters .current a { font-weight: bold !important; }
</style>

Here are some simple css code snippets to customize the essentials;

Change classic layout nav menu active item text color and background color;

/* Classic Layout Nav Active Item */
.classic-layout .vs-nav li a:hover,
.classic-layout .vs-nav li.current_page_item a {
    color: #fff; background: #345;
    }

Change cover h3 span (yellow) titles text color;

.cover h3 span { color: #FC0; }

Change link colors;

/* Links */
a { color: #096; }
a:hover { color: #5BCF80; }

Change text-selection color;

/* Text Selection */
::selection { text-shadow: none; color: #333; background: #FFFFCF; }
::-moz-selection { text-shadow: none; color: #333; background: #FFFFCF; }

Customizing colors

You will see "THEME" section at the end of the main.css file. You can easily customize primary/secondary color there.

/*  --------------------------------------------

	8. THEME - customize colors etc...
	
    -------------------------------------------- */
body {
 	color: #345;
	}
/* Links */
a {
 	color: #096;
	}
a:hover {
 	color: #5BCF80;
	}

/* Text Selection */
::selection {
 	text-shadow: none; color: #333; background: #FFFFCF;
	}
::-moz-selection {
 	text-shadow: none; color: #333; background: #FFFFCF;
	}

/* Service Icons */	
.color1 i { 
	background: #F8CB30; 
	}
.color2 i { 
	background: #74BADE; 
	}
.color3 i { 
	background: #5BCF80; 
	}
.color4 i { 
	background: #E25E5B; 
	}	
	
/* PRIMARY COLOR : #096
   ================================================== */
.navigation a:hover,
.pagination a:hover,
.entry-meta a:hover,
.single-page-layout .vs-nav li i:hover,
.media-box .mask:before,
.button.primary:hover,
a.more-link:hover,
.flex-control-paging li a.flex-active,
.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 	background: #096
	}
.entry-title a:hover,
.portfolio-nav a.button:hover,
.related-posts li a:hover,
.nav-single a:hover,
.comment-meta a:hover, 
.comment-meta .fn + a:hover, 
.comment-reply-link:hover {
 	color: #096
	}
.portfolio-nav a.button:hover,
.format-link .link-content > a:first-child:hover,
.flex-control-paging li a:hover,
.bypostauthor > article {
	border-color: #096
	}
	
/* SECONDARY COLOR : #5BCF80 - lighter than primary color
   ================================================== */	
.skill-unit .bar .progress,
.event .date,
.letter-info p i,
.media-cell-desc .date,
#nprogress .bar,
#fancybox-close,
.portfolio-nav a.button.back {
	background: #5BCF80;
	}
#nprogress .spinner-icon {
  border-top-color: #5BCF80; border-left-color: #5BCF80;
	}

Fonts by Google Webfonts

We included the fonts in this template from Google Webfonts which uses font-face technique for font embeeding.

Font declerations are at the head section;

<!-- FONTS -->
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>

Changing Fonts

To change fonts, just go to Google Webfonts site, search and select a new font, click "Quick use" link, then copy the stylesheet code from Add this code to your website: / Standart section and paste the code into head section. Then change the font family name in main.css starting from line:376. These font definitions in main.css are the only font definitions for the entire theme, once you have changed font-family in these lines, you are done!

/* BODY */
body,
input,
textarea,
select,
button {
 	font-family: Lato, Arial, serif
	}