Dani Documentation

HTML Template

A how-to guide and helpful informations
about options and features of the template.

Purchase it here

Introduction

You bought an HTML / CSS template, so you need some basic knowledge for those 2 languages.
The best way is to play around with the different elements, but you'll find some helpfull tips and explanations how this template is build up and works.

Please compare all the examples from this documentation with the original files to have a better understanding.

Support

Please read and search this documentation file before seeking support. If you have any questions that are beyond the scope of this document you can still contact me and open a support ticket here.

Do not use the comment section on the themeforest item page.
This will slow down the support process.

Basic HTML structure

Dani follows a simple and basic coding structure.

<!doctype html>
<html class="no-js" lang="en-US">
<head>

 <!-- Including of Stylesheets, Fonts, Meta Tags & Title -->
 ...

</head>

<body>

  <!-- Main content wrapper -->
  <div id="page-content">
  
    <!-- Header -->
    <header id="header">
      ...
    </header>
  
    <!-- Hero Section -->	
    <section id="hero">
      ...
    </section>
  
    <!-- Page Body -->
    <section id="page-body">
      ...
    </section>
  
    <!-- Footer -->	
    <footer id="footer">
      ...
    </footer>
	
  </div>
 
  <!-- Including of Scripts (Javascript) -->
  ...
 
</body>
</html>

This is the default html structure you need to respect in all your pages. You're not forced to use all of the section of course. If you don't want a footer or hero for example, just delete this section (example: in the maintenace page only hero is used). But if you do so, please use the structure like above with the right id's.

CSS

These 4 css files must be included in all of your html files

<!-- CSS -->
<link rel="stylesheet" id="default-style-css"  href="files/css/style.css" type="text/css" media="all" />
<link rel="stylesheet" id="fontawesome-style-css" href="files/css/font-awesome.min.css" type="text/css" media="all" />
<link rel="stylesheet" id="ionic-icons-style-css" href="files/css/ionicons.css" type="text/css" media="all" />
...
<link rel="stylesheet" id="mqueries-style-css"  href="files/css/mqueries.css" type="text/css" media="all" />

All other css are only needed if you use the related script. (isotope, owlcarousel, ...)


General Css classes

These are general classes, which you will find frequently in almost all html files, and whhich you can use for in any page or part of your site.

  • .wrapper it wrapps the element to a the main content width (1200px)
  • .wrapper-small same use than .wrapper but with smaller size (780px)
  • .wrapper-big same use than .wrapper but with fullwidth and some padding on the left & right
  • .left-float use this classname for any element you want to float to the left
  • .right-float use this classname for any element you want to float to the right
  • .clearfix for all elements which contains any floating element
  • .clear add a clear element after the last floating element (use this if the parent container doesn't have .clearfix)
  • .align-center use this class if you want to center align the text for a whole section or just an element
  • .align-right use this class if you want to right align the text for a whole section or just an element
  • .text-light this class is needed if you use a darker background for a section (for example a dark parallax section)

Customize CSS

If you want to customize some parts of the css, it's recommended to use a custom css file custom.css where you put all your customizations. This will make it much more easier if you need to update the template some day.

The custom.css already includes all font selectors & rules. So if you want to change the font, just replace the font name with yours.


Inline CSS

Sometimes you will see some inline css for some html elements (mostly for hero or fullwidth section).

<div class="fullwidth-section" style="background:url(image.jpg) center center;background-size:cover;">

In general, inline css is not the best way to go, and you should try to skip it if possible. (use classes and add to custom css)

But I decided to use it for some elements because it's just a minor change (usually background or color) which would be much more complicated for your understanding to add a custom classes to each element which need these changes.

Fonts

All fonts (except icon fonts) which are used by this template are comming from the Google font library. 

<!-- FONTS -->
<link href="http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Hind:300,400,500" rel="stylesheet" type="text/css">

The template uses 2 different fonts:

  • Playfair Display for main titles, menu items and some misc elements
  • Hind as main text font and all other elements


Customize fonts

You can of course change/use other fonts. The custom.css file has a full list with all elements using which font.


Headings / Titles

By default the headings (h1,h2,h3,h4,h5,h6) uses the main heading font "Playfair Display". There are some predefined classes for "manipulating" the default headings.

  • title-alt will take the alternative font which is Hind
  • uppercase will transform the letters to uppercases and add some more letter spacing
<h2 class="title-alt">Hello World</h2>

<h2 class="uppercase">Hello World</h2>
   
<h2 class="title-alt uppercase">Hello World</h2>


Icon fonts

The template also includes icon fonts which are mandatory for all your pages. So make sure to have these icon fonts inlcuded in all of your html files.

<!-- CSS -->
...
<link rel="stylesheet" id="fontawesome-style-css" href="files/css/font-awesome.min.css" type="text/css" media="all"/>
<link rel="stylesheet" id="ionic-icons-style-css" href="files/css/ionicons.css" type="text/css" media="all"/>
...

Javascript

All js scripts are inlcuded at the bottom of the html file just before the body closes. Make sure to include these 3 js files in all of your html files

<!-- SCRIPTS -->                
<script src="files/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="files/js/plugins.js"></script>
...
<script type="text/javascript" src="files/js/script.js"></script>
<!-- SCRIPTS -->

All other js are only needed if you use the related script. (isotope, owlcarousel, ...)

Preloader

Every page has a preloader effect which displays a loading animation while the content it is loading.
Here's the markup you will find in all html files.
The code is and should be placed directly after the body opening. 

<body>

<!-- PAGELOADER -->
<div id="page-loader" class="pulsing">
  <div class="loader-name"><img src="files/uploads/logo-dani-dark.png" srcset="files/uploads/logo-dani-dark.png 1x, files/uploads/logo-dani-dark@2x.png 2x" alt="Loader Logo"></div>
  <div class="loader-circle">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 253.4 253.4" style="enable-background:new 0 0 253.4 253.4;" xml:space="preserve"><circle cx="126.7" cy="126.7" r="124.2"/></svg>
  </div>
</div>
<!-- PAGELOADER -->

This is of course not an obligation to use the pageloader.
If you don't want a preloader effect just delete the whole preloader markup from your html file.

Header Options

You can choose between different Header appearence options while creating your Pages. Simply add the css class to the Header Element and your header will apply the given rule.

NoteSince version 1.2 the option header-left & header-right needed to be disabled.

default

By default the header has a white background.

<header id="header">
  ...
</header>
.text-light

Your header appearence will be dark with light text color.

<header id="header" class="text-light">
  ...
</header>
.transparent

Use this class if you want a transparent overlay effect for the header. Depending on your background add text-light to switch the text color to light.

<header id="header" class="transparent">
  ...
</header>
.wrapper

Add the wrapper class to wrap the header content (logo & menu) to the main content width

<header id="header" class="wrapper">
    ...
</header>
.not-sticky

The header is sticky by default (on scroll it sticks to the top). You can disable this by adding this class.

<header id="header" class="not-sticky">
  ...
</header>
.menu-open

Add this class and the menu will be opened on pageload (not in responsive mode)

<header id="header" class="menu-open">
  ...
</header>
.menu-full-center

The menu will take the full screen size and the items have a center aligment

<header id="header" class="menu-full-center">
  ...
</header>
.menu-full-columns

The menu will take the full screen size and will be splitted into 2 columns. The menu items in the first columns and the second columns is for widgets.

<header id="header" class="menu-full-columns">
  ...
</header>

All these options can of course be combined.

<header id="header" class="wrapper transparent text-light not-sticky menu-full-center">
    ...
</header>

Logo

You'll find the logo container in the header element #header. 

...
<div id="logo">
  <a href="index.html">
    <img id="dark-logo" src="files/uploads/mylogo.png" alt="My Logo">
    <img id="light-logo" src="files/uploads/mylogo-light.png" alt="My Light Logo">
  </a>
</div>
...

Important You must adapt some css elements with the height of your logo.
Please have a look at "Adapt / Change the CSS" below, if your logo have a different height than the original Dani logo.



Adapt / Change the Css

Note Depending on your logo height you need to adapt the style.css. Open the style.css and scroll to the bottom. Adapt the values depending on your logo height.

The original Dani logo used has a height of 30px.

header #logo { height: 30px; }
header.menu-open nav#main-nav ul > li > a { height: 30px; line-height: 30px; }
header .menu-toggle { height: calc(50px + 30px); }
header.wrapper:not(.small-header) .menu-toggle { height: calc(100px + 30px); }
header:not(.transparent) + #hero, header:not(.transparent) + #page-body { margin-top: calc(50px + 30px); }
header.wrapper:not(.transparent) + #hero, header.wrapper:not(.transparent) + #page-body { margin-top: calc(100px + 30px); }
header:not(.transparent) + #hero.hero-full { min-height: calc(100vh - 50px - 30px); }
header:not(.transparent) + #hero.hero-big { min-height: calc(75vh - 50px - 30px); }
header.wrapper:not(.transparent) + #hero.hero-full { min-height: calc(100vh - 100px - 30px); }
header.wrapper:not(.transparent) + #hero.hero-big { min-height: calc(75vh - 100px - 30px); }
header.menu-open nav#main-nav > ul > li > ul.sub-menu { top: calc(50px + 30px); }
header.transparent + #hero.hero-auto #page-title,
header.transparent + #hero #page-title.title-top { padding-top: calc(125px + 30px); }
header.wrapper.transparent + #hero.hero-auto #page-title,
header.wrapper.transparent + #hero #page-title.title-top { padding-top: calc(150px + 30px); }

So if you have a logo height of 50px for example, you would need to replace 30px by 50px.



Dark & Light Logo

For every page you create/use, you need to decide whether you need only one logo version (dark or light) or both (dark + light).
Both logos are usually needed if you have a transparent header with a sticky option.

If you need both logos always use the following markup and add the right id's dark-logo & light-logo.

...
    <img id="dark-logo" src="files/uploads/mylogo.png" alt="My Logo">
    <img id="light-logo" src="files/uploads/mylogo-light.png" alt="My Light Logo">
...

The dark logo must be the first of them. It's important that both logos has the exact same sizes/dimensions.



Making the logo retina ready

To make your logo (or any kind of image) ready for retina devices you just need to have 2 image files for each logo (image).

  • One with the normal size (ex. 130px * 30px)
  • and the second with the doubled size (ex. 260px * 60px)

Now you just need to tell the html that it should include the doubled size for retina devices by using the srcset attribute.

<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x">

Please have also a look on the web for more information about the srcset attribute.



Centering Logo option

.logo-centered

Add this class to the #logo element if you want your logo to be centered.

<div id="logo" class="logo-centered">
  ...
</div>

In this case, it is recommended to also add a header-widget before the header-inner element closes to place a socialmedia widget or simple text widget on the left.

...
    </div> <!-- END #menu -->
    
    <div id="menu-widget">
      <div class="widget widget_social">
        <ul class="socialmedia-widget">
          <li class="facebook"><a href="#"></a></li>
          <li class="twitter"><a href="#"></a></li>
          <li class="behance"><a href="#"></a></li>
          <li class="pinterest"><a href="#"></a></li>
        </ul>
      </div>
    </div>
    
  </div> <!-- END .header-inner -->
</header>

NoteThe header widget will be hidden on mobile view (responsive mode).

Hero / Pagetitle

The hero section is the first content of your page after the header in the html markup. It usually contains the page title of the page, but can also hold a slider or some other content 

...
</header>
	
<section id="hero">
 <div class="page-title">
 	...
 </div>
</section>


<section id="page-body">
...

Please have a look at the different features Revolution Slider, Video Background, Parallax Background to know how to use them.

The page-title section can contain any type of content but usually there is one or multiple "headings" and some other small elements like buttons or separators included

<section id="hero" class="hero-auto">
 <div id="page-title" class="wrapper align-center">
  <h1><strong>Main Title</strong></h1>
  <h5 class="title-alt">A small subtitle</h5>
 </div>
</section>


Hero options

.hero-auto

The height of the hero section is set on aut and depends on the content.
NoteIf you use a slider you MUST use hero-auto.

<section id="hero" class="hero-auto">
.hero-big

The height of the hero will take 75% of your viewport/window height.
If the content needs more height, it will adapt.

<section id="hero" class="hero-big">
.hero-full

It takes the full height of your viewport/window height.
If the content needs more height, it will adapt.

<section id="hero" class="hero-full">


Page Title position

If you use hero-big or hero-full you can position the pagetitle to the top or bottom. By default it will be centered positioned.
Use align-center or align-rught to give the contente a centered/right alignment

<section id="hero" class="hero-full">
  <div id="page-title" class="wrapper align-center title-top">
  ...
<section id="hero" class="hero-full">
  <div id="page-title" class="wrapper align-center title-bottom">
  ...


Hero Animation

Add the hero-animation if you would like a slide in effect when the page is loaded. Optionally you can also add text-animation to the page titles to add some more action.

<section id="hero" class="hero-full hero-animation">
  <div id="page-title" class="wrapper">
    <h5 class="title-alt text-animation">Sub title</h5>
    <h1 class="text-animation"><strong>Main title</strong></h1>
  </div>
</section>

See the index-photography.html for example.

Hero Slider

The great Revolution Slider is used for the hero slider. You can find the Revolution Slider related Documentation (online) here.
If you're new to the revolution slider you should definately have a look at the docs.


Template related slider options

There are some slider options which are related to this template.

Javascript Initialiser / Caller

Find the script initialiser/caller in the script.js. You can of course change the different options to your needs.

/*---------------------------------------------- 
R E V O L U T I O N   S L I D E R
------------------------------------------------*/
if(jQuery().revolution) {
  jQuery("#hero .revolution-slider").revolution({
    sliderType:"standard",
    sliderLayout:"fullscreen",
    fullScreenOffsetContainer:"#pseudo-header",
    delay:9000,
    disableProgressBar:'on',
    navigation: {
      arrows:{ 
        enable:true, 
        style:"dani-nav",
        left:{ h_offset: 25 },
        right:{  h_offset: 25 } 
      },
      bullets:{ 
        enable:false, 
        style:"dani-bullets",
        h_align:"center",
        v_align:"bottom",
        h_offset:0,
        v_offset:25,
        space:7,  
      },
      touch:{
        touchenabled:"on",
        swipe_treshold : 75,
        swipe_min_touches : 1,
        drag_block_vertical:false,
        swipe_direction:"horizontal"
      }				
    },
    responsiveLevels:[2048,1360,1100,780],			
    gridwidth:[1100,880,680,400],
    gridheight:[700,550,550,450],
    lazyType: 'smart'
  });
}

For the arrows and bullets appearance, use the style dani-nav / dani-bullets to use the dani styling.


Layer / Captions

If you want to use the title style from the template add the class dani-caption to the layer/caption. Now it will have the exact styling as your headings (h1...h6) and you can optionally use the same options (title-alt,uppercase).

<div class="tp-caption dani-caption title-alt" ...

Scroll Down Arrow

To put a scroll down arrow in the hero section, use this markup. (Have also a look at the index.html)

...
<a href="#" id="scrolldown" class="center scroll-light"></a>
        
</section>
<!-- HERO -->

Position

Use the class center, left or right to choose the position of the arrow.


Color / Appearance

Use scroll-dark or scroll-light depending on the color you need.

Language Switcher

To put a slanguage in the menu section, use this markup. (Have also a look at the index.html)

<div class="menu-actions clearfix">
  <div class="menu-language">
    <a href="#" class="show-language">en</a>            
    <div class="menu-language-content">
      <ul class="lang-select">
        <li><a href="#">de</a></li>
        <li><a href="#">fr</a></li>
      </ul>
    </div>
  </div>
           		
  <div class="menu-toggle"><span class="hamburger"></span><span class="cross"></span></div>
</div> <!-- END .menu-actions -->

Portfolio Setup

There are 2 different portfolio options you have with this template:

  • Smart Scroll which uses the smartscroll script
  • Masonry / Grid uses the isotope script with filter option

Smart Scroll

The smart scroll script will create a column grid for your portfolio items, and the special thing is, that the columns have different scroll speeds.
Have a look at Smart Scroll.


Masonry / Grid

The masonry / grid option uses the isotope script which also have a filter option inlcuded.
Please have a look at the isotope documentation.


General Portfolio Markup

Independently the portfolio type you've choosed, this is the general markup for the single portfolio items.

  <div class="TYPE-item portfolio-item branding">
    
    <div class="portfolio-item-inner item-inner">
      <a href="portfolio-single-classic.html" class="thumb-hover">
        <img src="files/uploads/portfolio-thumb-smart-6.jpg" alt="SEO">
        <div class="overlay-caption bottom align-left">
          <span class="caption-sub portfolio-category text-animation">Branding</span>
          <h2 class="caption-name portfolio-name text-animation"><strong>Belyse</strong></h2>
        </div>
      </a>
    </div>
    
  </div>

.branding This is the name for the filter attribute. Thanks to this the script knows which item should be hidden or displayed when clicking on the filter (only for isotope needed).

TYPE Name of the portfolio type you choosed (smartscroll or isotope).

Filter

As mentioned above, you can add a filter option if you use a masonry / grid layout.
Place the filter wherever you want. Thanks to the data-related-grid option the filter knows which grid it shall address to. Usually it is displayed right before the grid container.

<ul id="portfolio-filter" class="filter" data-related-grid="portfolio-grid">
  <li class="active" ><a href="#" data-filter="*">Show All</a></li>
  <li><a data-filter=".branding" data-slug="branding" href="#" title="Branding">Branding</a></li>
  <li><a data-filter=".web" data-slug="web" href="#" title="Print">Web Design</a></li>
  <li><a data-filter=".photography" data-slug="photography" href="#" title="Print">Photography</a></li>
</ul>

All filter anchors needs a data-filter attribute with the correct filter name (example: .branding).

Important It's important that the value of data-related-grid has the same name than the id of the grid.

New The data-slug is new since 1.4 and is needed if you want to add the hashtag of the active filter to the url. Thank to this you can use the hashtag in the url and the portfolio grid will be filtered on pageload. (Example: portfolio.html#branding)

Portfolio Animation

As most of the portfolio example files, it's possible to add an animation effect to the items. As soon as the items will be visible it will be slided in from the left. To activate this effect you just need to add the class portfolio-animation to your portfolio-container element.

<div id="smartscroll" class="smartscroll-grid portfolio-container portfolio-animation" data-columns="2">

To increase the animation action, you can also add an effect to the text like portfolio name + category. For this just add the class text-animation to the text elements.

<div class="smartscroll-item portfolio-item portfolio-smart-item">
  <div class="portfolio-item-inner item-inner">
    <a href="portfolio-single-classic.html" class="thumb-hover text-light">
      <img src="files/uploads/1100x750-dark.jpg" alt="SEO">
      <div class="overlay-caption bottom align-left">
        <span class="caption-sub portfolio-category text-animation">Branding</span>
        <h2 class="caption-name portfolio-name text-animation"><strong>Urban Oasis</strong></h2>
      </div>
    </a>
  </div>
</div>

This of course make only sense if your caption is visible from start and not hidden and showing on mousehover.

Infinite Scroll & Load More

Show and laod unlimited numbers of portfolio items.

To do so, just add this code below your grid.

  </div> <!-- END .isotope-grid -->

  <div class="spacer-medium"></div>
  <div class="load-isotope align-center">
    <a href="portfolio-load-2.html" class="sr-button" data-related-grid="portfolio-grid" data-method="infiniteload">Load More</a>
    <span class="load-message">No more items to show</span>
  </div>

data-method Choose betyween "infiniteload" and "loadonclick". "infiniteload" will automatically load the next set of items as soon as the users gets to the end. "loadonclick" will create a button which needs to be clicked to load the next set.

Important Make sure you create a page with name portfolio-load-2.html & place the next Set of Portfolio Items in it. Then the next set will have the name portfolio-load-3.html and so on..

Note This load more feature probably won't work when testing it locally on chrome browser. (Chrome doesn't accept ajax locally). As soon as you upload it to your server it will work fine.

Blog Masonry

Like the portfolio, the masonry blog layout uses the isotope script to create the masonry effect.
Please have a look at the isotope documentation for more information about how it works.


Masonry Item Markup

  
<div id="blog-grid" class="isotope-grid blog-container style-column-3 isotope-spaced-big">               
                
  <div class="blog-item">
    <div class="blog-item-inner item-inner">
      <div class="blog-media">
        <a href="blog-single-classic.html" class="thumb-hover">
          <img src="files/uploads/600x400-light.jpg" alt="SEO">
        </a>
      </div>
      <div class="blog-info">
        <div class="post-meta">
          <span class="post-date">June 6, 2016</span>
          <span class="post-cat">in Travel</span>
        </div>
        <h3 class="post-name"><a href="blog-single-classic.html">Waterfalls of Iceland</a></h3>
        <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas,...</p>
      </div>
    </div>
  </div>
  
  ..
  
 </div>

Blog Classic

See here the markup for the classic blog layout. If you don't use a layout with sidebar it is recommended to wrap it into a wrapper-small element.

The item itself uses the same markup as the masonry grid but is just not using the isotope script.

  
<div id="blog-grid" class="classic-blog blog-container">                
                
  <div class="blog-item">
    <div class="blog-item-inner item-inner">
      <div class="blog-media">
        <a href="blog-single-classic.html" class="thumb-hover">
          <img src="files/uploads/1100x750-light.jpg" alt="SEO">
        </a>
      </div>
      <div class="blog-info">
        <div class="post-meta">
          <span class="post-date">June 6, 2016</span>
          <span class="post-cat">in Travel</span>
        </div>
        <h3 class="post-name"><a href="blog-single-classic.html">Waterfalls of Iceland</a></h3>
        <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas,...</p>
      </div>
    </div>
  </div>
  
  ..
  
 </div>

Blog Minimal Grid

The minimal Grid layout uses again the isotope script with a different markup. The item images will be visible on hover, and because of that they are included as background images.

<div id="blog-grid" class="isotope-grid minimal-grid-blog blog-container style-column-3 fitrows"> 
                
  <div class="isotope-item blog-item">
    <a class="full-link" href="blog-single-classic.html"></a>
    <div class="blog-bg" style="background:url(files/uploads/600x400-light.jpg);"></div>
    <div class="blog-item-inner item-inner">
      <div class="blog-info">
        <div class="post-meta">
          <span class="post-date">June 6, 2016</span>
        </div>
        <h3 class="post-name">Waterfalls of Iceland</h3>
        <a class="read-more sr-button-with-arrow" href="blog-single-classic.html"><strong>Read More</strong></a>
      </div>
    </div>
  </div>
  
  ..
  
 </div>

Blog Minimal List

The minimal List layout only shows the post title and the post meta without any image and other informations.

<div id="blog-grid" class="minimal-list-blog blog-container">
                
  <div class="blog-item">
    <div class="post-meta"><span class="post-date">June 6, 2016</span></div>
    <h3 class="post-name"><a href="blog-single-classic.html">Waterfalls of Iceland</a></h3>
  </div>
  
  ..
  
 </div>

Shop

Note This is a html template, which means that the shop system does not work. It only provides the html/css layout. To make it work you would need to use a database with php for example.

Please have a look at the shop html files on how to use the different markups.

Make sure to include the shop.css in all files you want to use any part of the shop layout and add the woocommerce class to the page-body div

<section id="page-body" class="woocommerce"

Fullwidth section

A fullwidth-section is a fullwidth section which have some sort of background (color,image,video,etc.) to seperate some specific content from default content.

Important A fullwidth section CAN NOT be placed into a wrapper element in order to take the full width!

<div class="fullwidth-section">
  <div class="fullwidth-content wrapper">
  ...
  </div>
</div>

Section Options

By default the fullwidth-section (actually the fullwidth-content) has a top & a bottom padding and will adapt to the content height.

.notoppadding

Add this class if you don't want any top padding.

<div class="fullwidth-section" class="notoppadding">
.nobottompadding

Add this class if you don't want any bottom padding.

<div class="fullwidth-section" class="nobottompadding">

Isotope / Masonry

The isotope script is used for all grid layouts (masonry, equal grid) for the Portfolio, Blog and Gallery. All of them uses the isotope script to create the grid.
ImportantMake sure to inlcude the jquery.isotope.min.js AND jquery.imagesloaded.min.js script.


General Markup

<div id="YOUR-GRID-ID" class="isotope-grid TYPE-container">
  
  <div class="isotope-item TYPE-item">
    <!-- ITEM CONTENT --> ...
  </div>
  
  <div class="isotope-item TYPE-item">
    <!-- ITEM CONTENT --> ...
  </div>
  
  ... 
  
</div>

#YOUR-GRID-ID I really recommend to use any custom id for each grid. It is very important if you use a filter.
For example the portfolio, I used the id #portfolio-grid, for the blog I used #blog-grid, and so on.

.TYPE-container Change "TYPE" with the type of your content (portfolio,blog or gallery)
For example the portfolio, I used the class .portfolio-container, for the blog I used .blog-container, and so on.

.TYPE-item Change "TYPE" with the type of your content (portfolio,blog or gallery)


Column Option

You can choose between 2,3,4 or 5 columns. Add the wanted class to the grid container element.

<div id="portfolio-grid" class="isotope-grid portfolio-container style-column-2">
Or
<div id="portfolio-grid" class="isotope-grid portfolio-container style-column-3">
Or
<div id="portfolio-grid" class="isotope-grid portfolio-container style-column-4">
Or
<div id="portfolio-grid" class="isotope-grid portfolio-container style-column-5">
Masonry

To create a masonry effect you just need to use different image sizes. By using images (or the overall content of each item) with different image heights you can achieve a masonry effect as done in the masonry html example files.

Equal Grid

If you want to have an equal grid, just add the class fitrows to the grid container element. This will force the different rows to always be aligned horizontally.

<div id="portfolio-grid" class="isotope-grid portfolio-container style-column-4 fitrows">


Spaced

You can easily add spacings (for both layout modes) by adding the class isotope-spaced to the container.

<div id="portfolio-grid" class="isotope-grid portfolio-container isotope-spaced">

This will add 25px of spacing.

If you want a bigger spacing, add isotope-spaced-big to add 50px of spacing between the tiles.



Filter Grid

You can easily filter your different grids with some filter anchors. In the original demo pages, the filter option is only used for the portfolio items but you could also use it for the other types (blog,gallery,...).
To begin with add the filter class names to your isotope-items

<div id="portfolio-grid" class="isotope-grid portfolio-container">

  <div class="isotope-item portfolio-item branding"> 
  ...
  <div> 

  <div class="isotope-item portfolio-item photography"> 
  ...
  <div>

...


Now, place the filter list somewhere. Usually it is place just before the grid but you can place the filter wherever you want. Thanks to the data-related-grid option the filter knows which grid it shall address to.
Use this code

<ul id="portfolio-filter" class="filter" data-related-grid="portfolio-grid">
  <li class="active" ><a href="#" data-filter="*">Show All</a></li>
  <li><a data-filter=".branding" href="#" title="Branding">Branding</a></li>
  <li><a data-filter=".web" href="#" title="Print">Web Design</a></li>
  <li><a data-filter=".photography" href="#" title="Print">Photography</a>
</ul>

All filter anchors needs a data-filter attribute with the correct filter name you also added to the yout items (example: .branding).

Important It's important that the value of data-related-grid has the same name than the id of the grid/container element.

Smart Scroll

The smart scroll script will create a column grid for your portfolio items, and the special thing is, that the columns have different scroll speeds.
Have a look at the Smart Scroll documentation for more information.

Make sure to inlcude the jquery.smartscroll.min.js AND tweenMax.js script.


Spaced Option

Add easily a spacing between the columns and items by adding the class

  • smartscroll-spaced or
  • smartscroll-spaced-big

See the portfolio-smartscroll-sapced.html

Slider

All content sliders are done with the owl carousel script, so make sure t have this js and css file included in your html.

Markup for a default media (image,video) slider.

<div class="owl-slider nav-light" data-nav="true">
  <div><img src="files/uploads/blog-single-3.jpg" alt="SEO Name"/></div>
  <div><img src="files/uploads/blog-single-4.jpg" alt="SEO Name"/></div>
</div>

Markup for a content/text slider.

<div class="owl-slider content-slider">
  <div> ... CONTENT ... </div>
  <div> ... CONTENT ... </div>
</div>


Slider Options

data-nav

Enable/Disable the arrows with true or false.
Default = true

<div class="owl-carousel ..." data-nav="false">
  ...
</div>
data-dots

Enable/Disabled the bullets/dots with true or false.
Default = true

<div class="owl-carousel ..." data-dots="false">
  ...
</div>
data-loop

Enable/Disabled the looping with true or false.
Default = false

<div class="owl-carousel ..." data-loop="true">
  ...
</div>
data-autoplay

Enable/Disabled the autoplay with true or false.
Default = false

<div class="owl-carousel ..." data-autoplay="true">
  ...
</div>
nav-light

By default the navigation dots have a dark appearance. If your carousel is on a dark background you might change this with the nav-light class.

<div class="owl-carousel nav-light ..." >
  ...
</div>

Background Parallax

You can add a parallax image to every element but usually it's used for the Hero Section or an Fullwidth Section.

Add the class parallax-section" (and optionally 'text-light' if you use a dark background), and the data-parallax-image.

<div class="fullwidth-section text-light parallax-section" data-parallax-image="files/uploads/parallaxbg.jpg">

Make sure to inlcude the jquery.backgroundparallax.min.js AND tweenMax.js script. The tweenmax is not mandatory but will make it smoother especially for google chrome.

Video

You have 5 possibilities to integrate videos to your pages. See also media-video.html

  1. Classic integration by iframe code
  2. Selfhosted with mediaelement script
  3. Inline video with image placeholder
  4. Lightbox video open with an anchor tag
  5. Background videos for hero section, fullwidth sections or columns

Classic integration

Just go to your video site (youtube, vimeo or others) and search for the embedding iframe code and just put it on your page where you want.

Example for a youtube video. 

<iframe width="560" height="315" src="https://www.youtube.com/embed/9dgSa4wmMzk" frameborder="0" allowfullscreen>

Important For responsive reasons, make sure to include the javascript jquery.fitvids.min.js. This will automatically adapt the video (iframe) to its parent container.


Selfhosted Video

Include the mediaelement-and-player.min.js and css for the template controls.

<video width="640" height="360" id="player1" poster="files/uploads/poster.jpg" controls preload="none">
  <source type="video/mp4" src="files/uploads/videofile.mp4" />
  <source type="video/webm" src="files/uploads/videofile.webm" />
  <source type="video/ogv" src="files/uploads/videofile.ogv" />
</video>

Inline Video

An inline video will first show a placeholder image with a play button, and when this button is clicked it will load and play the video.

Inline videos are only possible for youtube + vimeo videos. The video will automatically adapt to the size of the inline-element so you might have black border on the top/bottom or left/right

Add a new div element with class inline-video and add the different data options.

<div class="inline-video" data-type="youtube" data-videoid="9dgSa4wmMzk">
  <img src="files/uploads/img-placeholder.jpg" alt="SEO NAME">
</div>

data-type enter youtube or vimeo

data-videoid add the id of the youtube or vimeo video


Lightbox Video

If using a lighbox video make sure to inlcude the javascript jquery.lightcase.min.js script and related css.

Add an anchor tag with the data-rel attribute lightcase

<a href="http://www.youtube.com/embed/9dgSa4wmMzk" data-rel="lightcase">Youtube Video</a>
<a href="http://player.vimeo.com/video/110894499" data-rel="lightcase">Vimeo Video</a>
<a href="files/uploads/video.mp4" data-rel="lightcase">Slefhosted Video</a>

For youtube + vimeo videos you MUST use the embed link.
Youtube: http://www.youtube.com/embed/YOUTUBE-ID
Vimeo: http://player.vimeo.com/video/VIMEO-ID


Background Video

In fact you can add a background video to every kind of element but I probably mostly used for a Hero Section or Fullwidth Section.

Video backgrounds uses the Phat Video script so make sure the file is correctly inlcuded.
The script allows to use selhosted, youtube or vimeo files.

To do so, just add the class videobg-section to the element and add the different options

<section id="hero" class="hero-full videobg-section"
  data-videotype="youtube" 
  data-videoyoutubeid="9dgSa4wmMzk"
  data-videoratio="21/9"
  data-videoloop="true"
  data-videomute="true"
  data-videoposter="files/uploads/image.jpg"
  data-videooverlaycolor="#000000"
  data-videooverlayopacity="0.4"
  >
Background video options
  • data-phattype Choose type: youtube, vimeo, html5
  • data-phatid Enter youtube/vimeo id (only needed if phattype is youtube or vimeo)
  • data-phatmp4 url to mp4 file (only needed if phattype is html5)
  • data-phatwebm url to webm file (only needed if phattype is html5)
  • data-phatogv url to ogv file (only needed if phattype is html5)
  • data-phatratio Aspect ratio of the video 4/3, 16/9 or 21/9
  • data-phatloop Enable loop true or false (default is true)
  • data-phatmute Mute the video true or false (default is true)
  • data-phatposter Poster image for mobile devices
  • data-phatoverlaycolor Overlay color (Enter the color code, #000 for example)
  • data-phatoverlayopacity Overlay opacity (Enter value between 0 + 1)
  • data-phatplayonhover Video plays on hover only true or false (default is false)

Background videos are not supported by mobile devices (tablets,smartphones). In this case the poster image will show instead. That's why it's important to declare a poster image.

Audio

Includes audio clasically via embed/ifram code from your audio service (soudncloud,mixcloud,...) or use a selhosted audio file.

Classic integration (embed/iframe)

Just go to your audio site (soudncloud, mixcloud or others) and search for the embedding iframe code and just put it on your page where you want.


Selfhosted Audio

Include the mediaelement-and-player.min.js and css for the template controls.

<audio id="player2" poster="files/uploads/poster-image.jpg" controls>
  <source type="audio/mp3" src="files/uploads/audiofile.mp3"/>
</audio>

Lazy Load

The template has a lazy load feature included which you could use for all <img>.
The example html files only make use of it in the portfolio single files for big images. Thanks to this the images are only loaded if they get visible on the viewport which increases the loading speed on first pageload.

Just add the class lazy to the <img tag, use the data-src instead of src and add the exact width + height values.

<img class="lazy" data-src="files/uploads/1200x800-light.jpg" width="1200" height="800" alt="Image Desc">

Language Switcher

Put the language Switcher markup in the menu-actions alement

<div class="menu-actions clearfix">
  <div class="menu-language">
    <a href="#" class="show-language">en</a>            
    <div class="menu-language-content">
      <ul class="lang-select">
        <li><a href="#">de</a></li>
        <li><a href="#">fr</a></li>
      </ul>
    </div>
  </div>
           		
  <div class="menu-toggle"><span class="hamburger"></span><span class="cross"></span></div>
</div>

Dribbble Feed

Before you can use the dribbble widget you must register an app via dribbble to get a valid access token. Register a Dribbble Application

After you did this and get a Access Token, copy this token and paste in files/js/script.js at line +- 558

jQuery.jribbble.setToken('YOUR CLIENT ACCESS TOKEN');

Now you can easily add your dribble shots using this markup.

<div class="dribbble-widget col-4" data-user="YOUR DRIBBBLE NAME" data-count="8"></div>

data-user Enter your dribbble username.

data-count Number of images you want to show.

Note Make sure to include the javascript jribbble.min.js in the html you want to include dribbble feed.

Columns / Grid

The template usesa custom but easy to use grid / column. Choose up to 6 columns. See also elements-columns.html

  • one-full
  • one-half
  • one-third two-third
  • one-fourth two-fourth three-fourth
  • one-fifth two-fifth three-fifth four-fifth
  • one-sixth two-sixth three-sixth four-sixth five-sixth

Follow this markup

<div class="column-section clearfix">
  <div class="column one-half">
    ..
  </div>
  <div class="column one-half last-col">
    ..
  </div>
</div> <!-- END .column-section -->



<div class="wrapper">
  <div class="column-section clearfix">
    <div class="column one-third">
      ..
    </div>
    <div class="column two-third last-col">
      ..
    </div>
  </div> <!-- END .column-section -->
</div> <!-- END .wrapper -->

.last-col The last column of the row always needs the class last-col



Column / Grid Options

The columns has some options to change it appearance.

.col-sticky

this will stick the columns to each other

<div class="column-section col-sticky clearfix">
  ...
</div>
.empty-content

Add this class to the columns which have no content and only serves as 'pusher' for the columns which has content.

See portfolio-single-architecture.html for example

<div class="column one-half empty-content">
  ...
</div>

Contact Form

You can setup Contact Forms anywhere on on any of your pages.


Change Recepient Email Adress

Before getting to the html markup, go to php/contact-send.php and change your email adress and name. To this email, the form is sended.

$recipientemail = "youremail@host.com"; // Your Email Address
$recipientname = "Your Name"; // Your Name

Default html markup

<form id="contact-form" class="checkform sendemail" action="php/contact-send.php" method="post">
  <div class="form-row">
    <label for="name">Name <abbr title="required" class="required">*</abbr></label>
    <input type="text" name="name" id="name" class="name req" value="" />
  </div>

  <div class="form-row">
    <label for="email">Email <abbr title="required" class="required">*</abbr></label>
    <input type="text" name="email" id="email" class="email req" value="" />
  </div>
    
  <div class="form-row">
    <label for="message">Message <abbr title="required" class="required">*</abbr></label>
    <textarea name="message" id="message" class="message req" rows="15" cols="50"></textarea>
  </div>

  <div class="form-row form-note">
    <div class="alert-error"><p>Please check your entries!</p></div>
  </div>
  
  <div class="form-row hidden">
    <input type="text" id="form-check" name="form-check" value="" class="form-check" />
  </div> 

  <div class="form-row">
    <input type="submit" name="submit" class="submit" value="Send Message"/>
  </div>

  <input type="hidden" name="subject" value="Contact Subject Dani html"/>
  <input type="hidden" name="fields" value="name,email,message"/>
</form>

ImportantYour contact form needs at least the above 3 fields for name,email and message. Do not change the for,name,id or class attribute of these fields.


Adding custom fields

You can easily add custom field by adding new fields and adding the name of these fields to the input ... name="field"

<form id="contact-form" class="checkform sendemail" action="php/contact-send.php" method="post">
  
  ...
  
  <div class="form-row">
    <label for="website">Website <abbr title="required" class="required">*</abbr></label>
    <input type="text" name="website" id="website" class="website req" value="" />
  </div>
  
  ...
  
  <input type="hidden" name="fields" value="name,email,message,website"/>                
</form>

req Add the req class to the field wich are required and can not be left empty. If not needed, also drop the <abbr> tag.


Problem receiving Emails

Check your Spam folder. The Message might be marked as Spam.

If you're still not receiving Emails, it's possible that your Server doesn't support PHP mail() function. But you can use SMTP Authentication.
Go to php/contact-send.php and find the following line of code

$mail = new PHPMailer();

Add this code after the above line and adapt your settings

$mail->IsSMTP();
$mail->Host = "mail.yourdomain.com";
$mail->SMTPDebug = 2;
$mail->SMTPAuth = true;
$mail->Host = "mail.yourdomain.com";
$mail->Port = 26;
$mail->Username = "youremail@host.com";
$mail->Password = "yourpassword";

Animations

In general you can animate every element. Just add the class do-anim to your element. This element will be hidden on start and as soon as it gets visible it displays.

<div class="column one-third do-anim">

Optionally, add a delay

<div class="column one-third do-anim" data-delay="200">

Note On small/mobile devices animations won't work and the element is already visible from start.

Ressources / Credits

Javascipt / jQuery

CSS / Fonts

PHP / Misc

Changelog

Version 2.0

  • New Dark Appearence
  • New Shop Layout
  • New Language Switcher
  • UPDATE PHP Mailer
Files changed
  • all html files (menu part -> the menu toggle icon is no wrapped into a menu-action div)
  • files/js/ (all js files)
  • files/js/ (all js files)
  • php/phpmailer/ (all php files)

Version 1.5

  • New Architecture demo
  • New Underline hover option for main menu
  • New Portfolio filter by url
  • New Pagination with images for single portfolio
  • New Wrapper big option
  • New double width option for isotope-gallery (see architecture single portfolio)
  • New list option for socialmedia widget (see footer in architecture demo)
  • Optimize Bind lightcase links if same href
  • Fix pointer event auto for menu-inner
  • Fix single pagination vertical center fix
  • Fix Minor bugfixes
Files changed
  • files/css/style.css
  • files/css/mqueries.css
  • files/js/script.js
New Files
  • index-architecture.html
  • about-architecture.html
  • portfolio-architecture.html
  • contact-architecture.html
  • portfolio-single-architecture.html
  • files/css/custom-architecture.css

Version 1.3

  • New Scroll to top option
  • Update Fontawesome library updated
  • Fix Horizontal scroll on mobile
  • Fix Minor bugfixes
Files changed
  • files/css/style.css
  • files/css/mqueries.css
  • files/js/script.js
  • files/css/font-awesome.min.css
  • files/fonts
  • page-about.html (hero added)

Version 1.2

New
  • Unfortuantely we had to drop the left & right menu option
Files changed
  • all html and css files has been changed

Version 1.1

New
  • Load More & Infinite load for portfolio
  • Header Right option
  • Spaced option for SmartScroll
Optimized
  • Pointer hover on header-top + transparent
Files changed
  • files/css/style.css
  • files/css/mqueries.css
  • files/css/isotope.css
  • files/js/script.js
New Files
  • portfolio-load-more.html
  • portfolio-load-infinite.html
  • portfolio-load-2.html
  • portfolio-load-3.html
  • portfolio-smartscroll-spaced.html

Version 1.0

Initial release