Photographer Documentation

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

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:

  Photographer/
  ├── css/
  ├── js/
  ├── 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.
page-default.dwt is a template used by page templates without sidebar.
page-fixed.dwt is used by pages that is width fixed to max 740px.
page-medium.dwt is used by pages that is width fixed to max 1060px.
page-fixed.dwt is used by full width pages.
page-with-sidebar.dwt is used by pages with sidebar.

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.

It all started with a Doctype.

Doctype

Uses plain HTML5 Doctype

<!DOCTYPE html>

Head tags contains meta tags, font / css and some script files, other script files are added just before the closing tag of the body.

Here are meta tags and title. You can edit them as you want except the viewport meta tag, it preserves responsive layout.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Photographer - Responsive HTML5 Template">
<meta name="keywords" content="blog, gallery, photography, html5, portfolio">
<meta name="author" content="Pixelwars">

<title>Photographer - Responsive HTML5 Template</title>

Here are favicon and apple touch icons;

<!-- FAV and TOUCH ICONS --> 
<link rel="shortcut icon" href="images/ico/favicon.ico"> 
<link rel="apple-touch-icon" href="images/ico/apple-touch-icon.png"/>

Here are font files. Fonts by Google Webfonts

<!-- FONTS -->
<link rel="stylesheet" type="text/css" href="css/fonts/montserrat/montserrat.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

Here are css files.

<!-- STYLES -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/fonts/fontello/css/fontello.css">
<link rel="stylesheet" type="text/css" href="js/jquery.uniform/uniform.default.css">
<link rel="stylesheet" type="text/css" href="js/jquery.fluidbox/fluidbox.css">
<link rel="stylesheet" type="text/css" href="js/owl-carousel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="js/photo-swipe/photoswipe.css">
<link rel="stylesheet" type="text/css" href="js/photo-swipe/default-skin/default-skin.css">
<link rel="stylesheet" type="text/css" href="js/jquery.magnific-popup/magnific-popup.css">
<link rel="stylesheet" type="text/css" href="js/slippry/slippry.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/768.css">
<link rel="stylesheet" type="text/css" href="css/992.css">

Initial script files in the head.

<!-- INITIAL SCRIPTS -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/modernizr.min.js"></script>

All other script files are located at the end of the body tag. These are the general script files used over all files.

<!-- SCRIPTS -->
<script src="js/fastclick.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.uniform/jquery.uniform.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/jquery.fluidbox/jquery.fluidbox.min.js"></script>
<script src="js/owl-carousel/owl.carousel.min.js"></script>
<script src="js/socialstream.jquery.js"></script>
<script src="js/jquery.collagePlus/jquery.collagePlus.min.js"></script>
<script src="js/photo-swipe/photoswipe.min.js"></script>
<script src="js/photo-swipe/photoswipe-ui-default.min.js"></script>
<script src="js/photo-swipe/photoswipe-run.js"></script>
<script src="js/jquery.gridrotator.js"></script>
<script src="js/slippry/slippry.min.js"></script>
<script src="js/jquery.magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/main.js"></script>

The HTML files are in well formatted and highly commented.

Layout Markup

Here is the markup for general layout;

<!-- page -->
<div id="page" class="hfeed site">
	
	<!-- header -->
	<header id="masthead" class="site-header" role="banner">
			
	</header>
	<!-- header -->
	
	
	<!-- site-main -->
	<div id="main" class="site-main">
	
		<!-- primary -->
		<div id="primary" class="content-area">
			
			<!-- site-content -->
			<div id="content" class="site-content" role="main">
			
			
				<!-- PAGE CONTENT HERE -->
			
			
			</div>
			<!-- site-content -->
			
		</div>
		<!-- primary --> 
		
	</div>
	<!-- site-main -->
	
	
	<!-- site-footer -->
	<footer id="colophon" class="site-footer" role="contentinfo">
		
	</footer>
	<!-- site-footer -->

</div>
<!-- page -->

Header Markup

Here is the markup for header.

<!-- header -->
<header id="masthead" class="site-header" role="banner">
		
		
		<!-- site-logo -->
		<div class="site-logo">
			
			
			<!-- logo : image -->
			<h1 class="site-title">
				<a href="index.html" rel="home">
					<img src="images/site/logo.png" alt="logo">
				</a>
			</h1>
			<!-- logo : image -->
			
			
			<!-- logo : text -->
			<!--<h1 class="site-title">
				<a href="../index.html" rel="home">
					Photographer
				</a>
			</h1>
			<p class="site-description">a photography theme.</p> -->
			<!-- logo : text -->
			
			
		</div>
		<!-- site-logo -->
				 
		
		
		<!-- site-navigation -->
		<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
			
			<a class="menu-toggle"><span class="lines"></span></a>
			
			<!-- nav-menu -->
			<div class="nav-menu">
				<ul>
					...
				</ul>
			</div>
			<!-- nav-menu -->
		  
		</nav>
		<!-- site-navigation -->

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

Footer Markup

Here is the markup for footer.

<!-- site-footer -->
<footer id="colophon" class="site-footer" role="contentinfo">
	
	<!-- layout-medium -->
	<div class="layout-medium">
		
		<!-- footer-social -->
		<div class="footer-social">
			
			<ul class="social">
				<li><a class="facebook" href="#"></a></li>
				<li><a class="twitter" href="#"></a></li>
				<li><a class="instagram" href="#"></a></li>
				<li><a class="fivehundredpx" href="#"></a></li>
				<li><a class="vine" href="#"></a></li>
				<li><a class="vimeo" href="#"></a></li>
			</ul>
			
		</div>
		<!-- footer-social -->
		
		<!-- .site-info -->
		<div class="site-info">
			<p>Copyright © 2015 Bob Smith</p>
		</div>
		<!-- .site-info -->

	</div>
	<!-- layout-medium -->
		
</footer>
<!-- site-footer -->

Here is the markup for pages with sidebar;

<!-- page -->
<div id="page" class="hfeed site">

	<!-- header -->
	<header id="masthead" class="site-header" role="banner">
			
	</header>
	<!-- header -->
	
	
	<!-- site-main -->
	<div id="main" class="site-main">
	
	   <!-- layout-medium -->
	   <div class="layout-medium"> 
	
			<!-- primary -->
			<div id="primary" class="content-area with-sidebar">
			
				<!-- site-content -->
				<div id="content" class="site-content" role="main">
				
				
					<!-- PAGE CONTENT -->
				
				
				</div>
				<!-- site-content -->
			
			</div>
			<!-- primary -->    
		
		
			<!-- #secondary -->
			<div id="secondary" class="widget-area sidebar" role="complementary">
				
				
				<!-- SIDEBAR CONTENT -->
				
				
			  </div>
			  <!-- #secondary -->
	
		</div>
		<!-- layout-medium -->
		
	</div>
	<!-- site-main -->
	
	
	<!-- site-footer -->
	<footer id="colophon" class="site-footer" role="contentinfo">
		
	</footer>
	<!-- site-footer -->

</div>
<!-- page -->

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 a custom icon set compiled from Fontello . They are all font icons(vector) and can be styled easily with css and also easy to drop in anywhere as you will see in some part of this template.

All Available Icons

Fontello Icons

You can also extend the current icon set at Fontello by simply importing the config file located at css/fonts/fontello/config.json

Usage of the icons

you can use the icons anywhere like this;

<i class="pw-icon-search"></i>

Photowall is an animated image grid used on Homeage and Homepage Landing pages.

<!--grid-->
<div class="ri-grid" data-animation="random" data-interval="1600" data-max-step="3">
	<ul>
		<li><a href="#"><img src="images/home-grid/1.jpg"/></a></li>
		<li><a href="#"><img src="images/home-grid/2.jpg"/></a></li>
		<li><a href="#"><img src="images/home-grid/3.jpg"/></a></li>
		...
	</ul>
</div>
<!--grid-->

Photowall needs at least 40 images to work as animated.

data-max-step determines to how many images will be animated at the same time (1 to 3).

data-interval how frequently will the images change (in ms.)

You can set animation type for photowall, here are the available values for data-animation attribute;

showHide || fadeInOut || slideLeft || 
slideRight || slideTop || slideBottom || 
rotateLeft || rotateRight || rotateTop || 
rotateBottom || scale || rotate3d || 
rotateLeftScale || rotateRightScale || 
rotateTopScale || rotateBottomScale || random

Rotate words module is used on homepages.

<span class="rotate-words" data-interval="3000">
    <span>life.</span>
    <span>moments.</span>
    <span>happiness.</span>
    <span>emotions.</span>
    <span>action.</span>
    <span>impression.</span>
    <span>beauty.</span>
</span>

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

data-interval="3000" means the words will be rotated in every 3 seconds.

owl-carousel is a slider and it is used on homepage and blog posts format gallery.

<!-- .owl-carousel --> 
<div class="owl-carousel owl-loading" data-items="4" data-loop="true" data-center="true" data-mouse-drag="true" data-nav="true" data-dots="false" data-autoplay="true" data-autoplay-speed="500" data-autoplay-timeout="3000" data-nav-text-prev="prev" data-nav-text-next="next">
	
	<!-- slide --> 
	<div>
		<img src="images/home/h03.jpg" alt="slide">
	</div>
	<!-- slide --> 
	
	<!-- slide --> 
	<div>
		<img src="images/home/h02.jpg" alt="slide">
	</div>
	<!-- slide --> 
	
	<!-- slide --> 
	<div>
		<img src="images/home/h04.jpg" alt="slide">
	</div>
	<!-- slide --> 

</div>
<!-- .owl-carousel -->

You can customize owl-carousel with self-explanatory data attributes, you can check out plugin doc for more.

Ken slider is used on home alternate page.

<!-- ken-slider -->
<ul class="ken-slider" data-speed="5000" data-animation="kenburns">
	
	<!-- slide -->
	<li>
		<img src="images/home/01.jpg" alt="image">
	</li>
	<!-- slide -->
	
	<!-- slide -->
	<li>
		<img src="images/home/02.jpg" alt="image">
	</li>
	<!-- slide -->
	
	<!-- slide -->
	<li>
		<img src="images/home/03.jpg" alt="image">
	</li>
	<!-- slide -->
	
</ul>
<!-- ken-slider -->

data-speed how frequently will the slides change (in ms.)

You can set animation type for ken-slider, here are the available values for data-animation attribute;

fade, horizontal, kenburns, false

For more you can check out plugin site.

This template has 3 gallery types; Magnigic Popup / PhotoSwipe / Fluidbox.

PhotoSwipe Galleries

This gallery has zoomable images and option to share images, you can check out plugin site for more. Here is the markup;

<!-- .pw-gallery -->
<div class="pw-gallery pw-collage pw-collage-loading" data-gallery-style="minimal" data-share="true" data-fullscreen="true" data-bg-opacity="0.95" data-row-height="360" data-effect="effect-4">
        
	<a href="images/gallery/01.jpg" data-size="2000x2000" data-med="images/gallery/medium/01.jpg" data-med-size="960x960">
	  <img src="images/gallery/small/01.jpg" alt="image" width="500" height="500" />
	  <figure>Portrait of a young man, studio shooting.</figure>
	</a>
                                    
	<a href="images/gallery/02.jpg" data-size="3000x2000" data-med="images/gallery/medium/02.jpg" data-med-size="1200x800">
	  <img src="images/gallery/small/02.jpg" alt="image" width="500" height="333" />
	</a>
	
	<a href="images/gallery/03.jpg" data-size="3000x2000" data-med="images/gallery/medium/03.jpg" data-med-size="1200x800">
	  <img src="images/gallery/small/03.jpg" alt="image" width="500" height="333" />
	</a>
                                    
</div>
<!-- .pw-gallery -->

You can customize gallery with self-explanatory data attributes. data-effect is the animation loading effect(1 to 6) on page load for gallery images, you can check out the plugin page for demonstration.

data-med attribute hold the medium size (something like 1400px width would be fine) of the image and it is only served to mobile devices (width < 768px).

Magnific Popup Galleries

This gallery has non zoomable images with fade transition effect, you can check out plugin site for more. Here is the markup;

<!-- .pw-gallery -->
<div class="mfp-gallery pw-collage pw-collage-loading" data-row-height="360" data-effect="effect-4">

	<a href="images/gallery/01.jpg" title="Portrait of a young man, studio shooting.">
	  <img src="images/gallery/small/01.jpg" alt="image" />
	</a>
	
	<a href="images/gallery/02.jpg">
	  <img src="images/gallery/small/02.jpg" alt="image" />
	</a>
	
	<a href="images/gallery/03.jpg">
	  <img src="images/gallery/small/03.jpg" alt="image" />
	</a>
	
</div>
<!-- .pw-gallery -->

Fluidbox Galleries

This is a simple zoom-in zoom-out gallery with masonry layout applied, you can check out plugin site for more. Here is the markup;

<!-- .gallery -->	
<div class="gallery gallery-columns-3 gallery-size-thumbnail">
	
	<figure class="gallery-item">
		<div class="gallery-icon landscape">
			<a href="images/gallery/medium/02.jpg">
				<img width="150" height="150" src="images/gallery/small/02.jpg" alt="image">
			</a>
		</div>
   </figure>
	   
   <figure class="gallery-item">
		<div class="gallery-icon landscape">
			<a href="images/gallery/medium/05.jpg">
				<img width="150" height="150" src="images/gallery/small/05.jpg" alt="image">
			</a>
		</div>
   </figure>
	   
</div>
<!-- .gallery -->

You can customize gallery columns by setting gallery-columns-3 class from 1 to 9

Load Gallery Images One By One (added in v1.2)

Normally galleries wait for all images to be loaded before showing the images. This can be frustrating if your gallery has huge amount of images, in this scenario you can activate gallery images to load one by one. Loaded images will be shown immediately and will not wait for all images to be loaded. In order to activate this, you just need to add load-one-by-one class to the gallery wrapper;

<div class="pw-gallery pw-collage pw-collage-loading load-one-by-one" ...

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 Photographer!">

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

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

// site owner
$site_name = 'Photography HTML5 Template';
$sender_domain = 'server@your-domain.com';
$to = 'info@johndoe.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.

You can embed videos like this;

<iframe src="http://player.vimeo.com/video/85667492?title=0&byline=0&portrait=0&color=fff" width="500" height="213" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

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

bootstrap.min.css : Bootstrap is a powerful front-end framework and we only used the responsive grid system for our layout.
fontello.css : includes styles for Fontello font icons.
uniform.default.css : style file of the Uniform script used for cross browser styled form elements.
owl.carousel.css : style file of Owl Carousel 2 responsive slider script, used for post format gallery slider in blog and home alternate 2 page.
fluidbox.css : style file of Fluidbox is a simple lightbox plugin used on regular gallery pages.
photoswipe.css / default-skin.css : style files of PhotoSwipe is a gallery plugin with zoomable images used on gallery pages.
magnific-popup.css : style file of Magnific Popup is a responsive lightbox plugin used on gallery pages.
slippry.css : style file of Slippry is a slider plugin with ken burns effect used on home alternate page.
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.
768.css : is the extension style file of main style file, includes styles for devices with width higher than 768px.
992.css : is the extension style file of main style file, includes styles for desktops.

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/fontello : a custom set of icons from Fontello.com. Check out Icons section for more.

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

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

jquery-1.11.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 : 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.
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.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.
imagesloaded.pkgd.min.js : imagesloaded is a jQuery plugin that triggers a callback after all images have been loaded.
jquery.fluidbox.min.js : Fluidbox is a simple lightbox plugin used on regular gallery pages.
owl.carousel.min.js : Owl Carousel 2 responsive slider script, used for post format gallery slider in blog and home alternate 2 page.
socialstream.jquery.js : Social Photo Stream is a jQuery plugin that displays latest images from 8 social networks like dribbble, deviantart, piacsa, pinterest and more.
jquery.collagePlus.min.js : CollagePlus is a jQuery plugin to create an image gallery like Google+ Albums or Flickr profile pages.
photoswipe.min.js / photoswipe-ui-default.min.js / photoswipe-run.js : PhotoSwipe is a gallery plugin with zoomable images used on gallery pages.
jquery.gridrotator.js : Animated Responsive Image Grid is a jQuery plugin for creating a responsive image grid that will switch images using different animations and timings, used on the default homepage to create photowall.
slippry.min.js : Slippry is a slider plugin with ken burns effect used on home alternate page.
jquery.magnific-popup.min.js : Magnific Popup is a responsive lightbox plugin used on gallery pages.
masonry.pkgd.min.js : Masonry is a masonry is a JavaScript grid layout library used on regular galleries to create masonry 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.

You will see "THEME" section at the end of the main.css file. You can easily customize body text color and link color there.

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

	6. THEME - customize colors etc...
	
    -------------------------------------------- */
body {
 	color: #333; background: #fff; 
	}
/* Links */
a {
 	color: #AB977A;
	}
a:hover {
 	color: #C9B69B;
	}

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

In order to write some custom css code you can 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 menu links bolder. 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 : .nav-menu ul li a Then do the following;

.nav-menu ul li 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 .

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

.nav-menu ul li a { font-weight: bold !important; }

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

<style>
	.nav-menu ul li a { font-weight: bold !important; }
</style>

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

Change menu link hover text color

.nav-menu ul li a:hover,
.nav-menu ul li a.selected {
	color: #C9B69B; 
	}

Change work(porfolio) page thumb image opacity;

.gallery-grid figure img {
	opacity: 0.5;
	}

Change link colors;

/* Links */
a { color: #AB977A; }
a:hover { color: #C9B69B; }

Change text-selection color;

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

We included the one local font "Montserrat" for headings and another "Robot" for body text from Google Webfonts which uses font-face technique for font embeeding.

Font declerations are at the head section;

<!-- FONTS -->
<link rel="stylesheet" type="text/css" href="css/fonts/montserrat/montserrat.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' 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:60. 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!

/* ----- 1.2 FONTS ----- */ 
/* BODY */
body,
input,
textarea,
select,
button {
 	font-family: 'Roboto', sans-serif;
	}
/* HEADINGS */
h1, h2, h3, h4, h5, h6, 
.nav-menu, 
.entry-meta, 
.entry-title, 
.navigation, 
.post-pagination, 
tr th, 
dl dt,
input[type=submit],
input[type=button],
button,
.button,
label,
.comment .reply,
.comment-meta,
.yarpp-thumbnail-title,
.tab-titles,
.owl-theme .owl-nav [class*='owl-'],
.tptn_title,
.widget_categories ul li.cat-item,
.widget_recent_entries ul li,
.pswp__counter,
.mfp-counter {
	font-family: 'Montserrat', sans-serif;
	}

Introductiona quick introduction

created : 22.04.2015

Support Forums

Follow us

Rate Theme

Getting Startedthings to know before get started

File structure

HTMLhtml structure and layout

Doctype

Head

Layout

Layout Markup

Header Markup

Footer Markup

Page with sidebar

GridResponsive Grid System

Iconsover 170 icons ready to use

All Available Icons

Usage of the icons

Photowall

Rotate Words

Owl Carousel

Ken Slider

Galleries

PhotoSwipe Galleries

Magnific Popup Galleries

Fluidbox Galleries

Load Gallery Images One By One (added in v1.2)

Contact Form

Setting up Contact Form

Videos

CSSstyle files used

Included Fonts (Font icons)

Javascriptscript files used

Customizationhow to customize the template to your needs.

Text & Link Color

Custom CSS

Fonts

Changing Fonts

Creditsthanks to the creators of this great files