"OmahPsd Template"

DOCUMENTATION BY "OMAHPSD" V1.0

ARJUNA

Created: 30/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

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/1200 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


D) JavaScript/jQuery Plugins - top

<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jqBootstrapValidation-1.3.7.min.js"></script>
<script src="js/script.js"></script>

Bootstrap jquery plugin

See all bootstrap jquery plugin setup on bootstrap documentation

jquery flexslider

The portfolio gallery, 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


On this template main content is full slide contnet using flexslider and for the caption on content slide we move the caption value to tag h3 on the container slide-thumb, you can see on script.js file the setup of jquery code is like the following code:

 $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,

    asNavFor: '#slider',
    itemWidth: 120,
    itemMargin: 10,
       minItems: 2,
    maxItems: 8,
      start: function(){
         $('#carousel .slides img').show(); 
    }
  });
   
  $('#slider').flexslider({
   animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel",
      start: function(slider){
           $('#slider').resize();   
        var capText = $('#slider .slides .flex-active-slide .caption').text();
          $('.slide-thumb h3').text(capText);
      },
      before: function(slider){
        $('#slider').resize();   
      },
      after: function(slider){
           $('#slider').resize();   
       var capText = $('#slider .slides .flex-active-slide .caption').text();
        $('.slide-thumb h3').text(capText);   
      }
     
  });

for the thumb navigation slider we make it os toogle slide using jquery code like the following code:

	
$('.main-carousel').hide(10);
  $('.btn-toggle a.btn').click(function(){
     
    $('.main-carousel').slideToggle();
    
    return false;
});

and if you want to change the slide image slide, just open the file's 'index.html', and replace teh image slide on folder img/portfolio/ and replace to the portfolio thumbnail on folder img/portfolio/thumb/ for images size of the thumbnail slide is 300px x 192px for images slide 1280px x 800px

and we make the main content height is full width and full height for height of the content we setup using jquery code, see like the following code:

	
(function() {
boxHeight();
})();


$(window).resize(function() {
    boxHeight();
});             
function boxHeight(){
 //==================================== height header============================

var wHeight = $(window).height();
$('#boxWrapp').css('min-height', wHeight); 
}

for image slider on resize is powered by jquery-resize-image-to-parent see full documentation on https://github.com/levymetal/jquery-resize-image-to-parent

the setup is like the following code:

	
$('.ri').resizeToParent();

About Us

On this template we call the content About from another file 'about.html' the content about is showing on modal dialog, for content about we give the modal dialog id is '#myModal2', and the code for calling the contact form from contact.html file is like the following code:

(function(){
 var wrapp = $('#myModal3 .modal-dialog .modal-body');
    $('a.load-about').on('click', function(e){
        var href = $(this).attr('rel');
        wrapp.load(href + ' .main-about');
        e.preventDefault();
    });

you can see the HTML Code For contact form on HTML file on 'about.html'

The progreesbar on content about for skill bar must be call on the modal shown, you can see the setup is like the following code:

$(window).load(function() {
$('#myModal2').on('shown.bs.modal', function (e) {
  barSkill();
  });
});

function barSkill(){
     setTimeout(function(){

    $('.progress-bar').each(function() {
        var me = $(this);
        var pe =  $(this).children('.precent-value');
        var perc = me.attr("aria-valuenow");

        var current_perc = 0;

        var progress = setInterval(function() {
            if (current_perc>=perc) {
                clearInterval(progress);
            } else {
                current_perc +=1;
                me.css('width', (current_perc)+'%');
            }

            pe.text((current_perc)+'%');

        },90);
    });
}, 300);
 }

Contact Form and validation

On this template we call the Contact Form we call from another file 'contact.html' the contact form is showing on modal dialog, for contact form we give the modal dialog id is '#myModal', and the code for calling the contact form from contact.html file is like the following code:

(function(){
 var wrapp = $('#myModal .modal-dialog .modal-body');
    $('a.load-contact').on('click', function(e){
        var href = $(this).attr('rel');
        wrapp.load(href + ' .contactForm');
        e.preventDefault();
    });

you can see the HTML Code For contact form on HTML file on 'contact.html'

for form validation we use the jQUery jqBootstrapValidation, you can see de documenttaion on https://github.com/ReactiveRaven/jqBootstrapValidation, for our template the setup of the jqBootstrapValidation is just like felxslider's setup becaue we showing the contact form to the modal windoe, you cann see the setup like the following code

$(window).load(function() {
valid();
  $('#myModal').on('shown.bs.modal', function (e) {
  valid();
  });
});

function valid(){
 $("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
}

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:

<div class="build cp-right">
    <p>&copy; 2014 <a href="#">OmahPSD</a>. All Rights Reserved. </p>
</div><!-- end build -->
           
<div class="build">
			<ul class="list-inline">
			<li><a href="#" class="socIcon" class="fa fa-facebook fa-2x fb"></i></a></li>
			<li><a href="#" class="socIcon" class="fa fa-twitter fa-2x tw"></i></a></li>
			<li><a href="#" class="socIcon" class="fa fa-dribbble fa-2x dr"></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: 'Oxygen';
	src: url('Oxygen-Regular.eot'); /* IE9 Compat Modes */
	src: url('Oxygen-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	   
	     url('Oxygen-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('VOxygen-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
	font-family: 'Lato';
	src: url('Lato-Bold.eot'); /* IE9 Compat Modes */
	src: url('Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	   
	     url('Lato-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('Lato-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
	font-family: 'Lato-black';
	src: url('Lato-Black.eot'); /* IE9 Compat Modes */
	src: url('Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	   
	     url('Lato-Black.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('Lato-Black.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 */
}	             

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 Plugin: prettyPhoto - http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
  • 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
  • 'Lato-Bold.ttf'-google fonts
  • 'Lato-Black.ttf'-google fonts
  • 'Oxygen-Regular.ttf'-google fonts