DOCUMENTATION BY "OMAHPSD" V1.0
Created: 22/12/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!
HTML/1200 Grid Structure - Basic HTML information, using the 1200.gs Grid System
Bootstrap LESS - Style Using Bootstrap LESS
JavaScript/jQuery Plugins - Site plugin information
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.
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.
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.
At first glance, the CSS may look confusing, because CSS is create using LESS 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.
if you want to custom style you can custom file style.less on folder with name less, if you confiuse how to custem the LESS file you can see the how to use LESS on http://lesscss.org
.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
If you want to change the color theme, we just custom theme's color on 'variable.less' in less folder, just replace value on variable @colPrimwith your own color code and you can change the other variable to
<script src="js/jquery-1.10.2.js"></script> <script src="js/bootstrap.js"></script> <script src="components/jquery.inview/jquery.inview.min.js"></script> <script src="components/jqBootstrapValidation-1.3.7/jqBootstrapValidation-1.3.7.min.js"></script> <script src="js/app.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
See all bootstrap jquery plugin setup on bootstrap documentation
you 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: 'Montserrat'; src: url('Montserrat/Montserrat-Regular.ttf') format('truetype');/* Legacy iOS */ } @font-face { font-family: 'Lora'; src: url('Lora/Lora-Regular.ttf') format('truetype');/* 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 and the css file
@font-face { font-family: 'Montserrat'; src: url('Montserrat/Montserrat-Regular.ttf') format('truetype');/* Legacy iOS */ } @font-face { font-family: 'Lora'; src: url('Lora/Lora-Regular.ttf') format('truetype');/* Legacy iOS */ } }
for the background image on the header you can also find and change on the style.less file, just find the following css code:
/* =============================== header ===================================== */ .header { background: url(../img/bghead.jpg) no-repeat top center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; position:relative; }
replace the bghead.jpg on the folder img/bghead.jpg and done, on this theme the image size we use is 1541px x 652px
The Navigation we made its on side so we create the button toogle for show and hide, you can see the jquery code for make it happen on script.js
see like the following code
$("#menu-close").click(function(e) { e.preventDefault(); $("#sidebar-wrapper").toggleClass("active"); }); $("#menu-toggle").click(function(e) { e.preventDefault(); $("#sidebar-wrapper").toggleClass("active"); });
And for make scroll page when click the navigation menu, you can see te setup code like the following code:
$('a[href*=#]:not([href=#])').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; } } });
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(){ boxHeight(); })(); $(window).resize(function(){ boxHeight(); }); function boxHeight(){ var wHeight = $(window).height(); $('.header').css('min-height', wHeight); }
for the map on the contact section d powered by google maps v3, for use the google maps we must include the google map apis like the following code:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(-7.790732, 110.387209); var mapOptions = { zoom: 4, center: myLatlng } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var image = 'img/We-Are-Here.png'; var marker = new google.maps.Marker({ position: myLatlng, map: map, icon: image }); } google.maps.event.addDomListener(window, 'load', initialize); </script>
for change map marker you can change image path 'img/We-Are-Here.png' lie the above code
for change the map coordinate change this code 'new google.maps.LatLng(-7.790732, 110.387209);'
and then we create the contact form is can send the message to the our email, using Ajax and PHP, so firts you will needed a html sructure for contact form, and give your <form>
element the ID myForm, set the method attribute to post, and the action attribute to mailer.php. like the following code:
<div class="build my-form"> <div id="form-messages"></div> <form class="form-horizontal" role="form" id="ajax-contact" method="post" action="mailer.php"> <div class="row"> <div class="col-sm-6 field"> <div class="form-group"> <div class="control"> <input type="text" class="form-control" id="name" name="name" placeholder="Your Name" minlength="2" required> <div class="help-block"></div> </div> </div> </div> <div class="col-sm-6 field"> <div class="form-group"> <div class="control"> <input type="email" class="form-control" id="email" name="email" placeholder="Your Email" required> <div class="help-block"></div> </div> </div> </div> </div> <div class="form-group"> <div class="col-sm-12 field"> <div class="control"> <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required> <div class="help-block"></div> </div> </div> </div> <div class="form-group"> <div class="col-sm-12 field"> <div class="control"> <textarea class="form-control" rows="7" id="message" name="message" placeholder="Textarea" required></textarea> </div> </div> </div> <div class="form-group"> <div class="col-sm-12"> <button type="submit" class="btn btn-primary btn-block">SEND</button> </div> </div> </form> </div><!-- end build -->
Here you've set up a simple form that has fields to collect the user's name, email address, and message. Notice that each of the form fields has a required attribute. In browsers that support HTML5 form validation, this will prevent the form from being submitted until all the fields have been completed.
Next you need to create a <div> element that will be used to display success and error messages to the user. Create this element above the <form> in your HTML markup and give it the ID form-messages.
<div id="form-messages"></div>
And then for the sumbitting data form and handle success and error, we create all form the AJAX, we create the AJAX code in app.js file, you can see the following code:
// Get the form. var form = $('#ajax-contact'); // Get the messages div. var formMessages = $('#form-messages'); // Set up an event listener for the contact form. $(form).submit(function(e) { // Stop the browser from submitting the form. e.preventDefault(); // Serialize the form data. var formData = $(form).serialize(); // Submit the form using AJAX. $.ajax({ type: 'POST', url: $(form).attr('action'), data: formData }) .done(function(response) { // Make sure that the formMessages div has the 'success' class. $(formMessages).removeClass('error'); $(formMessages).addClass('success'); // Set the message text. $(formMessages).text(response); // Clear the form. $('#name').val(''); $('#email').val(''); $('#subject').val(''); $('#message').val(''); }) .fail(function(data) { // Make sure that the formMessages div has the 'error' class. $(formMessages).removeClass('success'); $(formMessages).addClass('error'); // Set the message text. if (data.responseText !== '') { $(formMessages).text(data.responseText); } else { $(formMessages).text('Oops! An error occured and your message could not be sent.'); } }); });
Now we need to write the php mailer script that will process the from data, this script is responsible for checking that the form data is valid and then sending out the email.
create a new file called mailer.php and copy into it the following code
<?php // My modifications to mailer script from: // http://blog.teamtreehouse.com/create-ajax-contact-form // Added input sanitizing to prevent injection // Only process POST reqeusts. if ($_SERVER["REQUEST_METHOD"] == "POST") { // Get the form fields and remove whitespace. $name = strip_tags(trim($_POST["inputName"])); $name = str_replace(array("\r","\n"),array(" "," "),$name); $subjects = strip_tags(trim($_POST["inputName"])); $subjects = str_replace(array("\r","\n"),array(" "," "),$subjects); $email = filter_var(trim($_POST["inputEmail"]), FILTER_SANITIZE_EMAIL); $message = trim($_POST["message"]); // Check that data was sent to the mailer. if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) { // Set a 400 (bad request) response code and exit. http_response_code(400); echo "Oops! There was a problem with your submission. Please complete the form and try again."; exit; } // Set the recipient email address. // FIXME: Update this to your desired email address. $recipient = "youraccount@gmail.com"; // Set the email subject. $subject = "New contact from $name"; // Build the email content. $email_content = "Name: $name\n"; $email_content .= "Email: $email\n\n"; $email_content .= "Subject: $subjects\n\n"; $email_content .= "Message:\n$message\n"; // Build the email headers. $email_headers = "From: $name <$email>"; // Send the email. if (mail($recipient, $subject, $subjects, $email_content, $email_headers)) { // Set a 200 (okay) response code. //http_response_code(200); echo "Thank You! Your message has been sent."; } else { // Set a 500 (internal server error) response code. //http_response_code(500); echo "Oops! Something went wrong and we couldn't send your message."; } } else { // Not a POST request, set a 403 (forbidden) response code. //http_response_code(403); echo "There was a problem with your submission, please try again."; } ?>
I've used the following images, icons or other files as listed.