# "OmahPsd Template"

DOCUMENTATION BY "OMAHPSD" V1.0

## The - Joker

Created: 26/03/2014

By: omahpsd.com

Email: omahpsd@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

## Table of Contents

- Getting Started

- HTML/1200 Grid Structure - Basic HTML information, using the 1200.gs Grid System

- JavaScript/jQuery Plugins - Site plugin information

- Sources and Credits

### A) Getting Started - top

Since this is an HTML/CSS template, you can actually run it off your computer with little setup on the server. When you are ready to put the site on your server, upload all the files in the theme folder to your server.

### B) HTML/1170 Grid Structure - top

This theme is a fixed layout with up to 12 columns. All of the information within the main content area is nested within a div with an class of "wrapper".The general template structure is the same throughout the template as it uses the 12 column 1200.gs Bootstrap framework.

#### 1200.gs Bootstrap framework

The general concept behind the 12 column framework is that all the columns (labeled span'x') need to add up to 12 when using the 12 column version of their framework.

The Bootstrap site has a nice demo and you can also see it on the columns-all.html file included with this theme. The best way I would suggest to become familiar with this framework is to simply edit what I have already set up.

Bootstrap has a great overview of the Grid System framework you may want to check out.

### C) CSS Files and Alternate Colors - top

At first glance, the CSS may look confusing, let me explain each below:

- style.css - Our's custom css and custom Bootstrap CSS Framework, do not edit this file.

- bootstrap.css - The Bootstrap Grid and CSS Framework, do not edit this file.

#### Handy CSS Classes:

.clearfix - A quick way to clear floated HTML elements

.img-thumbnail - Add a soft border and padding image edge

.img-circle - Add a full rounded image edge with CSS3 rounded borders.

.img-rounded - Add a soft rounded image edge with CSS3 rounded borders.

.pull-left - Float item to left

.pull-right - Float item to right

.text-center - Center text

.text-left - Left text

.text-right - Right text

etc you can see all on bootstrap documentation

#### Change Color Theme

If you want to change the color theme, we just custom theme's color on 'bootstrp-theme1.min.css', just replace all the color code (#005a6d) with your own color and replace the nav background transparent with the RGBA Color from your own code.

### D) JavaScript/jQuery Plugins - top

    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.nav.js"></script>
    <script src="js/jquery.scrollTo.js"></script>
    <script src="js/jquery.flexslider.js"></script>
    <script src="js/jquery.quicksand.js"></script>
    <script src="js/jquery.shuffle.js"></script>
    <script src="js/ekko-lightbox.js"></script>

#### Bootstrap jquery plugin

See all bootstrap jquery plugin setup on bootstrap documentation

#### jquery nav/one page nav

The one page nav, powered by "jQuery-One-Page-Nav" is very easy to manage. Please see the code in script.js to copy and modify to fit your needs. Full option reference: https://github.com/davist11/jQuery-One-Page-Nav

jQuery-One-Page-Nav setup:

    $('#navPage').onePageNav({
        scrollOffset: 60,
        scrollThreshold: 0.65
    });

#### jquery Flexslider

The slide on the header text, powered by "jQuery-flexslider" is very easy to manage. Please see the code in script.js to copy and modify to fit your needs. Full option reference: http://flexslider.woothemes.com

jQuery-flexslider setup:

    $(window).load(function(){
    $('#flex-head').flexslider({
    animation: "slide",
    slideshow: true
    });
    });

    //html
    <div id="flex-head" class="flexslider">
    		<ul class="slides">
    			<li>
    				<h1>Hi,I'm Joker</h1>
    				<h2>I see & design through all perspective</h2>
    			</li>
    			<li>
    				<h1>Hi,I'm Joker</h1>
    				<h2>I see & design through all perspective</h2>
    			</li>
    			<li>
    				<h1>Hi,I'm Joker</h1>
    				<h2>I see & design through all perspective</h2>
    			</li>
    		</ul>
    	</div>

#### jquery filter(shuffle) and jquery bootstrap lightbox

The gallery filter, powered by "jQuery-Shuffle" is very easy to manage. Please see the code in script.js to copy and modify to fit your needs.

Full option reference query jQuery-Shuffle: http://vestride.github.io/Shuffle/

for jquery bootstrap lightbox Full option reference: http://ashleydw.github.io/lightbox/

And the setup is like the following code:

    $(window).load(function(){
    //call function
    lightboxPhoto();

    $('#filterOptions a').click(function (e) {
        e.preventDefault();

        // set active class
        $('#filterOptions a').removeClass('cur');
        $(this).addClass('cur');

        // get group name from clicked item
        var groupName = $(this).attr('data-group');

        // reshuffle grid
        $grid.shuffle('shuffle', groupName );
    	});
        /* initialize shuffle plugin */
        var $grid = $('#grid'),
    	$sizer = $grid.find('.shuffle__sizer');

        $grid.shuffle({
            itemSelector: '.box', // the selector for the items in the grid
    		sizer: $sizer
        });
    })();

    function lightboxPhoto() {
        $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
        event.preventDefault();
        $(this).ekkoLightbox();
        });
    }

you can see the HTML Code For lightbox and filter setting, you can change the title of the lightbox and the caption to, you can find on HTML file like the following code HTML

    <ul id="filterOptions" class="clearfix">
                        <li class="cur"><a class="btn btn-link linear" href="#" data-group="all">All</a></li>
                        <li><span>/</span></li>
                        <li><a class="btn btn-link linear" href="#" data-group="mobile">Mobile</a></li>
    					<li><span>/</span></li>
                        <li><a class="btn btn-link linear" href="#" data-group="ilustrator">Ilustrator</a></li>

     </ul>

    <div class="container_folio clearfix gallery" id="grid">
    			<div class="col-xs-12 col-sm-4 col-md-4 box" data-groups='["all", "ilustrator"]'>
    			<div class="folio-img">
    				<div class="portfolio-item ">
    					<div class="thumbnail">
    					   <div class="thumb-img">

    					  <div class="link-attr">
    						    <a href="img/portfolio/p01-large.jpg" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Image Title Here" class="link-search animated linear"><i class="fa fa-search"></i></a>
    						   <a href="#" class="link-chain animated linear"><i class="fa  fa-chain"></i></a>
    					   </div>
    						<img class="linear img-portfolio img-responsive" src="img/portfolio/p01-large.jpg" alt="This Is Image">

    					   <div class="folio-caption">
    					   <i class="fa fa-caret-up"></i>
    					       <p>This is Folio Caption</p>

    					   </div>
    					   </div>
    					</div>

    				</div>
    			</div>
    			</div>
    			<div class="col-xs-12 col-sm-4 col-md-4 box" data-groups='["all", "mobile"]'>
    				<div class="folio-img">
    					<div class="portfolio-item">
    						<div class="thumbnail">
    						<div class="thumb-img">
    						 <div class="link-attr">
    						    <a href="img/portfolio/p02-large.jpg" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Image Title Here" class="link-search animated linear"><i class="fa fa-search"></i></a>
    						   <a href="#" class="link-chain animated linear"><i class="fa  fa-chain"></i></a>
    					   </div>
    						<img class="linear img-portfolio img-responsive" src="img/portfolio/p02-large.jpg" alt="This Is Image">
    						 <div class="link"><a href="#">This Is Folio Link2</a></div>
    						<div class="folio-caption">
    						<i class="fa fa-caret-up"></i>
    					       <p>This is Folio Caption</p>
    					   </div>
    						</div>
    					    </div>
    					</div>
    				</div>
    			</div>
    			<div class="col-xs-12 col-sm-4 col-md-4 box" data-groups='["all", "mobile", "ilustrator"]'>
    				<div class="folio-img">
    					<div class="portfolio-item">
    						<div class="thumbnail">
    						<div class="thumb-img">
    						<div class="link-attr">
    						    <a href="img/portfolio/p03-large.jpg" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Image Title Here" class="link-search animated linear"><i class="fa fa-search"></i></a>
    						   <a href="#" class="link-chain animated linear"><i class="fa  fa-chain"></i></a>
    					   </div>
    						 <img class="linear img-portfolio img-responsive" src="img/portfolio/p03-large.jpg" alt="This Is Image">
    						   <div class="link"><a href="#">This Is Folio Link3</a></div>
    						   <div class="folio-caption">
    						   <i class="fa fa-caret-up"></i>
    					       <p>This is Folio Caption</p>
    					       </div>
    					       </div>
    						</div>

    					</div>
    				</div>
    			</div>
    			<div class="col-xs-12 col-sm-4 col-md-4 box" data-groups='["all", "mobile", "ilustrator"]'>
    				<div class="folio-img">
    					<div class="portfolio-item">
    						<div class="thumbnail">
    						<div class="thumb-img">
    						<div class="link-attr">
    						    <a href="img/portfolio/p04-large.jpg" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Image Title Here" class="link-search animated linear"><i class="fa fa-search"></i></a>
    						   <a href="#" class="link-chain animated linear"><i class="fa  fa-chain"></i></a>
    					   </div>
    						<img class="linear img-portfolio img-responsive" src="img/portfolio/p04-large.jpg" alt="This Is Image">
    						  <div class="link"><a href="#">This Is Folio Link4</a></div>
    						  <div class="folio-caption">
    						  <i class="fa fa-caret-up"></i>
    					       <p>This is Folio Caption</p>
    					       </div>
    					     </div>
    						</div>

    					</div>
    				</div>
    			</div>
    			<div class="col-xs-12 col-sm-4 col-md-4 box" data-groups='["all", "mobile", "ilustrator"]'>
    				<div class="folio-img">
    					<div class="portfolio-item">
    						<div class="thumbnail">
    						<div class="thumb-img">
    						<div class="link-attr">
    						    <a href="img/portfolio/p05-large.jpg" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Image Title Here" class="link-search animated linear"><i class="fa fa-search"></i></a>
    						   <a href="#" class="link-chain animated linear"><i class="fa  fa-chain"></i></a>
    					   </div>
    						<img class="linear img-portfolio img-responsive" src="img/portfolio/p05-large.jpg" alt="This Is Image">
    						<div class="link"><a href="#">This Is Folio Link5</a></div>
    						<div class="folio-caption">
    						<i class="fa fa-caret-up"></i>
    					       <p>This is Folio Caption</p>
    					       </div>
    						</div>
    						</div>

    					</div>
    				</div>
    			</div>
    			<div class="col-xs-12 col-sm-4 col-md-4 box" data-groups='["all", "ilustrator"]'>
    				<div class="folio-img">
    					<div class="portfolio-item">
    						<div class="thumbnail">
    						<div class="thumb-img">
    						<div class="link-attr">
    						    <a href="img/portfolio/p06-large.jpg" data-gallery="global-gallery" data-parent="" data-toggle="lightbox" data-title="Image Title Here" class="link-search animated linear"><i class="fa fa-search"></i></a>
    						   <a href="#" class="link-chain animated linear"><i class="fa  fa-chain"></i></a>
    					   </div>
    						<img class="linear img-portfolio img-responsive" src="img/portfolio/p06-large.jpg" alt="This Is Image">
    						<div class="link"><a href="#">This Is Folio Link6</a></div>
    						<div class="folio-caption">
    						<i class="fa fa-caret-up"></i>
    					       <p>This is Folio Caption</p>
    					       </div>
    						</div>
    						</div>

    					</div>
    				</div>
    			</div>

    		   </div>

for image of the portfolio content, the image size is 600px x 400px

for the link of the copy right and the social media you can change on the footer divison, just find HTML CODE like the following Code:

    <p>&copy; 2014 <a href="http://omahpsd.com" class="color-primary linear">OmahPSD</a>. All Rights Reserved. </p>

    <ul class="list-inline">
    			<li><a href="#" class="socIcon color-primary linear"><i class="fa fa-facebook fa-2x"></i></a></li>
    			<li><a href="#" class="socIcon color-primary linear"><i class="fa fa-twitter fa-2x"></i></a></li>
    			<li><a href="#" class="socIcon color-primary linear"><i class="fa fa-dribbble fa-2x"></i></a></li>
    			</ul>

    			</div>

for the social icon you can change the class for example class 'fa-facebook' change with the another class social media, you can fide the class on fontawesome documentation http://fontawesome.io/icons

you also can change tha font family on the css file you can fan on the folder css/style.css just open the style.css and find the css code like the following css code:

     @font-face {
    	font-family: 'VerelaRound';
    	src: url('VarelaRound-Regular.eot'); /* IE9 Compat Modes */
    	src: url('VarelaRound-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

    	     url('VarelaRound-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
    	     url('VarelaRound-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

and replace the font file on the css folder css/VarelaRound-Regular.ttf, replace with the your own font, and then change the name of font-family ond the css file

     @font-face {
    	font-family: 'YourOwnFont';
    	src: url('YourOwnFont.eot'); /* IE9 Compat Modes */
    	src: url('YourOwnFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

    	     url('YourOwnFont.ttf')  format('truetype'), /* Safari, Android, iOS */
    	     url('YourOwnFont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

for the background image on the header you can also find and change on the style.css file, just find the following css code:

    /* =============================== header ===================================== */
    .header {
    background: url(../img/bghead.jpg) no-repeat top center fixed;
    }

replace the bghead.jpg on the folder img/bghead.jpg and done, on this theme the image size we use is 1280px x 800px

#### jquery Custom For Scroll Top

The Button for Scroll top, is very easy to manage. Please see the code in script.js to copy and modify to fit your needs.

see like the following code

    $(' .navbar-brand, .top-scroll a').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    	|| location.hostname == this.hostname) {

    	var target = $(this.hash);
    	target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    	if (target.length) {
    	  $('html,body').animate({
    		scrollTop: target.offset().top
    	  }, 1000);
    	  return false;
    	}
      }
    });

#### jquery Custom For Scroll Bottom to About Page

The Button for Scroll Bottom to About Page, is very easy to manage. Please see the code in script.js to copy and modify to fit your needs.

we setup the button when on click the navbar is gived offset like the height of navbar, for that case we saving navbar height on variable, you can see te setup code like the following code:

    var navbarHeight = $('.navbar').height();

    $('a.btnAbout').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    	|| location.hostname == this.hostname) {

    	var target = $(this.hash);
    	target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    	if (target.length) {
    	  $('html,body').animate({
    		scrollTop: target.offset().top - navbarHeight
    	  }, 2000);
    	  return false;
    	}
      }
    });

and then the navbar show when window oon scroll we muas setup on css first for position on top an hide you can se the setup on css file on cless 'main-nav' you can see the setup jquery code like the following code:

    function navScroll(){

    var top = $(window).scrollTop();

    if (top > 3) {
    $('.main-nav').fadeIn();

    }else {

    $('.main-nav').fadeOut();
    }

    }

we include on the same fucntion navbar with the fucntion name is navScroll()

#### Header height

for support the btnAbout in order to follow the window when the window on resize or on small screen, we setup the header height in order to follow the window height, because the btnAbout is on the header container, you can see the setup like the following code:

    (function(){
    winHeight();
    })();
    $(window).resize(function(){
    winHeight();
    });
    function winHeight(){
     //==================================== height header============================
    var wHeight = $(window).height();
    $('.header').height(wHeight);
    }

### E) Sources, Credits and Font - top

I've used the following images, icons or other files as listed.

- Icon Font/fontawesome-http://fontawesome.io/
- jQuery bootsrap Lightbox - http://ashleydw.github.io/lightbox/
- jQuery Shuffle - http://vestride.github.io/Shuffle//
- Bootstrap CSS Framework - http://getbootstrap.com/
- jQuery - www.jquery.com
- IE9.js - Project Hosting on Google Code: http://html5shiv.googlecode.com/svn/trunk/html5.js
- 'VarelaRound-Regular.ttf'-google fonts
- 'Lato-Bold.ttf'-google fonts