Noha Documentation

HTML Template

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

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

Noha 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 & BODY -->
    <div id="hero-and-body">	
      
      <!-- HERO  -->
      <section id="hero">
      ...
      </section>
  
      <!-- PAGEBODY -->
      <section id="page-body">
      ...
      </section>
      
    </div>
  	
    <!-- 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 index-freelancer no hero is used). But if you do so, please use the structure like above with the correct 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, lightcase, ...)


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 using a bigger width (1680px)
  • .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)
  • .text-dark same as text-light but for light backgrounds with dark text (only if you use dark-style.css)

Customize CSS

If you want to customize some parts of the css, it's recommended to use a custom css file yourcustomfile.css where you put all your customizations. This will make it much more easier if you need to update the template some day. See index-agencycreative.html or index-app.html for examlpe

You will find a custom-sample.css which 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;">

Important In general, inline css is not the good way to go, and you should try to avoid it. (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.


Dark Style

By default the template has a light/white style but you can easily do a dark appearance by just including the dark-style.css. See index-freelancer.html
Note: the dark-style.css only has impact on the page-body and not on the header, footer and page-loader. These parts can be individually be chosen independently by the overall appearance. You could have a white header and a dark body for example.

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=Poppins:300,400,500" rel="stylesheet" type="text/css">

Depending on the demo, the template uses different fonts. Please check this on the head of the file.



Customize fonts

You can of course change/use other fonts. The custom-sample.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 font "Poppons". There are some predefined classes for "manipulating" the default headings.

  • title-alt will lower the color opacity
  • 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-1.12.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, video background, lightcase...)

Preloader

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

<body>

<!-- PAGELOADER -->
<div id="page-loader" class="text-dark show-logo">
	<span class="loader-icon bullets-jump"><span></span><span></span><span></span></span>
</div>
<!-- PAGELOADER -->

.text-dark Choose between text-dark and text-light for a light or dark loader screen.

.show-logo This is optional and will show the logo during the loading

.bullets-jump Choose between bullets-fade,bullets-jump or bullets-pulse for the animation


If you don't want a preloader effect just delete the whole preloader markup from your html file.

Header Options

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

.header-right

This will move the header to the right

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

Your header appearence will be dark with light text color.
You can of course change the background color with some custom css

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

All these options can of course be combined. For example if you want a right and a dark header.

<header id="header" class="header-right text-light">
  <div class="header-inner clearfix">
    ...
  </div>
</header>

Logo

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

...
<div id="logo" class="logo-left text-light hide-on-hero">
  <a href="index.html">
    <img id="dark-logo" src="files/uploads/mylogo.png" alt="My Dark Logo">
    <img id="light-logo" src="files/uploads/mylogo.png" alt="My Light Logo">
  </a>
</div>
...

logo-left Choose the postition of the logo with logo-left or logo-right

text-light Choose the start appearance with text-light or text-dark (include both logo versions)

hide-on-hero This is optional and will hide the logo when the hero area is visible. (example in index-photgraphy.html)

Note it is recommended to include both logo versions (Light and Dark)

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 Noha 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 Noha logo used has a height of 50px.

header #logo .text-logo { line-height: 50px; }
header #logo img { height: 50px; }
#menu-inner { height: calc(100% - 50px - 75px); margin-top: calc(40px + 10px + 50px); }
.spacer-big.hero-spacer { height: calc(40px + 10px + 50px); }
#hero:not(.hero-big):not(.hero-full) #page-title { padding-top: calc(100px + 50px); }
#hero:not(.hero-big):not(.hero-full) #page-title:not(.title-bottom) { padding-bottom: calc(100px + 50px); }

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



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 * 50px)
  • and the second with the doubled size (ex. 260px * 100px)

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.

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>

<!-- HERO & BODY -->
<div id="hero-and-body">			
  <section id="hero">
    <div class="page-title">
      ...
    </div>
  </section>


  <section id="page-body">
    ...
  </section>
  
</div> 
<!-- HERO & BODY -->
...

Please have a look at the different features Hero 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.

<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">
.side-left

This creates a Split Screen appearance and the hero has a width of 50% and is positioned to the left.

<section id="hero" class="side-left">
.side-left-small

This creates a Split Screen appearance and the hero has a width of 40% and is positioned to the left.

<section id="hero" class="side-left-small">
.side-right

This creates a Split Screen appearance and the hero has a width of 50% and is positioned to the right.

<section id="hero" class="side-right">
.side-right-small

This creates a Split Screen appearance and the hero has a width of 40% and is positioned to the right.

<section id="hero" class="side-right-small">


Page Title position

If you use hero-big, hero-full or any side arrangement you can position the pagetitle to the top or bottom. By default it will be centered positioned.
Use align-center or align-right to give the content 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">
  ...


Usually the page title is placed into the hero, but you could also place it to the content (page-body) as done in the blog-single-split1.html

Hero Slider

There are 2 different slider versions.

  • Owl Slider
  • Revolution Slider

Owl Slider

The Owl Slider is a sinple slider and is used in the blog magazine templates. You should use this slider if you just want to show some sinple slides with an optinal caption text. If you need more options you should use the Revolution Slider which ahs tons of options.
Please have a look here for all the options.


Revolution Slider

The great Revolution Slider is used for premium slider experience (see example in index.html). 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.

Javascript Initialiser / Caller

Find the script initialiser/caller in the script.js. You can of course adapt 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:"noha-nav",
        left:{ h_offset: 40 },
        right:{  h_offset: 40 } 
      },
      bullets:{ 
        enable:false, 
        style:"noha-bullets",
        h_align:"right",
        v_align:"bottom",
        h_offset:40,
        v_offset:40,
        space:7,  
      },
      touch:{
        touchenabled:"on",
        swipe_treshold : 75,
        swipe_min_touches : 1,
        drag_block_vertical:false,
        swipe_direction:"horizontal"
      }				
    },
    responsiveLevels:[1440,1160,700,500],
    gridwidth:[1000,640,500,280],
    gridheight:[700,550,550,450],
    lazyType: 'smart'
  });
}

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


Layer / Captions

If you want to use the title style from the template add the class noha-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 noha-caption title-alt" ...

Portfolio Setup

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


General Portfolio Markup

<div id="customgridid" class="isotope-grid portfolio-container style-column-3 fitrows clearfix text-light">
 
  <div class="isotope-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">
          <span class="caption-sub portfolio-category">Branding</span>
          <h2 class="caption-name portfolio-name"><strong>Stonefox</strong></h2>
        </div>
      </a>
    </div>
  </div>
				
  ...

.text-light Add text-light class to the grid if you want the logo to switch color. This is interesting if you use a fullwidth grid.

.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).

thumb-hover Adds a hover effect to the image. See here for more infos

Filter

As mentioned above, you can add a filter option in combination with the isotope script.
The filter action is placed into the header area (4 rectangular dots). To do so add the icon in the header-action part.

<div id="header-actions">
  ...
  <div class="header-filter"><div class="filter-icon action-filter open-action" data-action="filter-overlay"><span></span></div></div>
  ...
</div>

This Icon now opens the filter options in the header area which you need to include to the header-actions-overly part.

<div id="header-actions-overlay">
  <a href="" class="action-close header-close"></a>
  
  <div class="action-overlay filter-overlay">
    <h6 class="widget-title">Filter</h6>
    <ul id="grid-filter" class="category-list grid-filter" data-related-grid="customgridid"
      <li><a data-filter=".advertising" href="#">Advertising</a></li>
      <li><a data-filter=".branding" href="#">Branding</a></li>
      <li><a data-filter=".digital" href="#">Digital</a></li>
      <li><a data-filter="*" href="#">All</a></li>
    </ul>
  </div>

  ...
				
</div>

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.

Blog

Like the portfolio, the 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.


Item Markup

  
<div id="blog-grid" class="isotope-grid blog-container style-column-3 isotope-spaced">               
                
  <div class="blog-item">
    <div class="blog-item-inner item-inner do-anim">
      <div class="blog-media">
        <a href="blog-single-classic.html" class="thumb-hover scale">
          <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, 2017</span>
          <span class="post-cat"><a href="#"<Travel</a></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 Comments

Note that this is a pure html template, this means that the comments does not work of course. To make them work you would need to use a database/php or any other comment system which can not be achieved with only html.

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>

Options

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

.nopadding

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

<div class="fullwidth-section" class="nopadding">
.text-light

Add this class if you plan to use a dark background and wants that the logo and the content text should be displayed white.

<div class="fullwidth-section" class="text-light">
.text-dark

Add this class if you plan to use a light background and wants that the logo and the content text should be displayed dark.

<div class="fullwidth-section" class="text-dark">

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


Metro Effect

The metro effect give you the possibility to increase some tiles by respecting a given ratio. To make use of this you need to provide the data-ratio option to the grid element. (see index-photography.html for example)

<div id="portfolio-grid" class="isotope-grid portfolio-container" data-ratio="2:3">

Now you can additionally add the class double-width or double-height to some items to increase the width, height or both.

<div class="isotope-item portfolio-item double-width">


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

isotope-spaced will add a spacing.

If you want a bigger spacing, add isotope-spaced-big to add a bigger 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.

Slider

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>


Include Slider to Hero

When including the slider to hero you just need add your image as a background like this (see blog-magazine-full.html for example)

<div class="owl-slider hero-slider" data-autoplay="true" data-loop="true" data-dots="false">
 
  <div class="slider-item text-light">
    <div class="bg-img" style="background-image:url(files/uploads/1680x1100-dark.jpg);"></div>
    <a href="blog-single-split1.html" class="sr-button style-3 button-small read-more">Read More</a>
    <div class="owl-slider-caption">
      <h5 class="title-alt">Fashion</h5>
      <div class="spacer-small"></div>
      <h2><strong>Winter Campaign by David Oliver</strong></h2>
    </div>
  </div>
  
  ...
  
</div>

You can optionally add a caption and link.



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

Google map

To make the google map work, you need to create a google API Key here:
https://developers.google.com/maps/documentation/javascript/get-api-key

Once you created your API key just go to the contact.html and add it here

<script type="text/javascript" src="//maps.google.com/maps/api/js?key=YOURAPIKEY"></script>

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

By default the columns has a spacing of 25 px but can be changed with these options.

.spaced-big

Uses a bigger spacing of 80px.

<div class="column-section spaced-big clearfix">
  ...
</div>
.spaced-none

Does not have any spacings.

<div class="column-section spaced-none clearfix">
  ...
</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 Noha 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.


Slide In effect

You can add this animation effect to any element you want.

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

Modern animation

The modern effect is used for images, but do not add the class to the img tag, but to a parent container.

<div class="do-anim-modern"> <img ...> </div>

Hover Effects

If you want to add a hover effect to any image wrap the image with an anchor tag and add the class thumb-hover to it.

<a href="..." class="thumb-hover">

Now you need to choose which hover effect

  • scale
  • overlay-color to add a color effect
  • text-light or text-dark to choose the color of the caption if used

Spacer

To create and manage your white space you can use the spacer element which you will see in almost all of the original tempalte files. There are 4 different sizes.

<div class="spacer-mini"></div>

<div class="spacer-small"></div>    

<div class="spacer-medium"></div> 

<div class="spacer-big"></div>

Additionally you can add the class hidden-768 or hidden-1024 to hide the spacers for a smaller devices.

<div class="spacer-big hidden-768"></div>

Ressources / Credits

Javascipt / jQuery

CSS / Fonts

PHP / Misc

Changelog

Version 1.0

Initial release