Solid v2 | Documentation v1.0 - 6 December 2013
Table of Contents
How the documentation is organized
The documentation is written in a step by step format. First it covers the template's folder structure and then it goes into how the layouts are created and how to edit pages. Where needed there are references to the scripts section where it lists all the scripts and plugins this template has, what they do and how you can use them.
Note: I wanted to make the documentation as beginner friendly as possible and for that reason you'll find that it also goes in details on things that are obvious to an advanced user. So if you are advanced just skim read the sections you are not interested in.
Before we get started
Before we proceed I want to make sure everyone knows about:
1. Applying multiple classes to a html element
The template uses the technique of applying multiple classes on a single element in the creation of the layouts
One of the lesser known tricks with CSS is the fact that you don't have to limit your elements to just one class. If you need to set multiple classes on an element, you add them simply by separating them with a space in your attribute. For example:
<p class="pullquote btmmargin left">...</p>This sets the following three classes on that paragraph tag:
- pullquote
- btmmargin
- left
You would assign these as generic classes in your CSS:
.pullquote { ... } .btmmargin { ... } p.left { ... }If you set the class to a specific element, you can still use it as part of a list of classes, but be aware that it will only affect those elements that are specified in the CSS.
Source - http://webdesign.about.com/od/css/qt/tipcssmulticlas.htm
2. Css Image Sprites
The template uses image sprites to reduce the total number of images that have to be loaded, improving general website load time.
An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.
Image Sprites - Simple Example
Instead of using three separate images, we use this single image ("img_navsprites.gif"):
With CSS, we can show just the part of the image we need. In the following example the CSS specifies which part of the "img_navsprites.gif" image to show:
img.home { width:46px; height:44px; background:url(img_navsprites.gif) 0 0; }Example explained:
- <img class="home" src="img_trans.gif" /> - Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS
- width:46px;height:44px; - Defines the portion of the image we want to use
- background:url(img_navsprites.gif) 0 0; - Defines the background image and its position (left 0px, top 0px)
Source - http://www.w3schools.com/css/css_image_sprites.asp
3. Css Media Querys
We can have different blocks of CSS code for different screen and device sizes. With media queries rather than looking at what device it is, we will look at what capabilities the device has. More specifically, we will look at the following:
- height and width of the device
- height and width of the browser
- screen resolution
- orientation of the device (for mobile phones and tablets; portrait or landscape)
The simplest way to use media queries is to have a block of CSS code in the same stylesheet file. So all the CSS that is specific to mobile phones, would be defined in the following block:
@media only screen and (max-device-width: 480px) {
/* define mobile specific styles come here */
}
Usually we would define this at the end of the file in order to leverage the cascading property of CSS. The background color, the borders and other common attributes would typically be defined above and wont be changed here. The following properties are the ones that we would replace most often:
- width
- height
- float
- margins
For example, let's say the logo of the company is 600 pixel wide on the desktop version of the website. Now on a device with a width of 480 pixels, the scroller will appear and that is not desirable. So we should have a smaller version of the logo and the CSS file would look like this:
#logo { background: url(images/logo.png); width: 600px; border: 1px #ccc solid; }
@media only screen and (max-device-width: 480px) {
#logo { background: url(images/logo_mobile.png); width: 440px; }
}
If you notice, we have not over-written the border property for the logo, so the border will continue to show on mobile devices. Simple isn't it?
Source - http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html
Overview of folder structure / coding style / layout / main css file
Folder Structure
The content is separated from the layout.
The folder /_layout contains the css stylesheets + javascript scripts and plugins + php scripts.
The subfolder /images contains all the images that are used in the css stylesheets or in the html pages for layout purposes.
The folder /js contains javascript scripts and plugins ( jQuery javascript framework is used + jQuery plugins + custom js scripts)
style.css just imports the stylesheets from the /_layout folder
The /_content folder holds the content that goes on the pages.
I recommend making a subfolder for each new html pages and adding all assets ( pictures / documents / video / audio etc) in it.
Coding Style
Each html page included in the template is built starting from the below source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[if lt IE 7 ]> <html class="ie6" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>:: Solid Business Solution :: </title>
<meta name="description" content=" add description ... " />
<meta name="keywords" content=" add keywords ... " />
<!-- /// Favicon //////// -->
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />
<!-- /// CSS Stylesheets //////// -->
<link type="text/css" href="style.css" rel="stylesheet" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css' />
<!-- /// jQuery //////// -->
<script type="text/javascript" src="_layout/js/jquery-1.10.2.min.js" ></script>
<!-- /// SelectNav //////// -->
<script type="text/javascript" src="_layout/js/selectnav/selectnav.min.js"></script>
<!-- /// Imagebox //////// -->
<link rel="stylesheet" type="text/css" href="_layout/js/imagebox/imagebox.css" />
<script type="text/javascript" src="_layout/js/imagebox/jquery.imagebox.min.js"></script>
<!-- /// FlexSlider //////// -->
<link rel="stylesheet" type="text/css" href="_layout/js/flexslider/flexslider.css" />
<script type="text/javascript" src="_layout/js/flexslider/jquery.flexslider.min.js"></script>
<!-- /// Carousel //////// -->
<link rel="stylesheet" type="text/css" href="_layout/js/carousel/carousel.css" />
<script type="text/javascript" src="_layout/js/carousel/jquery.carousel.min.js"></script>
<!-- /// Tabs and Accordion //////// -->
<script type="text/javascript" src="_layout/js/accordion/jquery.accordion.min.js"></script>
<script type="text/javascript" src="_layout/js/tabify/jquery.tabify.min.js"></script>
<!-- /// Validity //////// -->
<link rel="stylesheet" type="text/css" href="_layout/js/validity/css.validity.css" />
<script type="text/javascript" src="_layout/js/validity/jquery.validity.js"></script>
<!-- /// gMap //////// -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="_layout/js/gmap/jquery.gmap.min.js"></script>
<!-- /// FontAwesome //////// -->
<link rel="stylesheet" href="_layout/js/fontawesome/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="_layout/js/fontawesome/font-awesome-ie7.min.css" />
<![endif]-->
<!-- /// Custom JS //////// -->
<script type="text/javascript" src="_layout/js/scripts.js"></script>
<script type="text/javascript" src="_layout/js/plugins.js"></script>
</head>
<body>
<div id="wrap">
<div id="header" class="ie-dropdown-fix">
<!-- /// HEADER //////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
</div><!-- end #header -->
<div id="content">
<!-- /// CONTENT /////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
</div><!-- end #content -->
<div id="footer">
<!-- /// FOOTER ///////////////////////////////////////////////////////////////////////////////////////////////////////// -->
<!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
</div><!-- end #footer -->
</div><!-- end #wrap -->
</body>
</html>
I'll break the code down into smaller section's and make comments where necessary:
1. Metadate + Favicon
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>:: Solid Business Solution :: </title>
<meta name="description" content=" add description ... " />
<meta name="keywords" content=" add keywords ... " />
<!-- /// Favicon //////// -->
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />
You have to change the title, description and keywords for each page for SEO purposes.
The charset used by the pages is utf-8.
You can generate a new favicon over at http://tools.dynamicdrive.com/favicon/.
And then just overwrite the current one in the folder, there is no need to change the href...
Overwrite the apple touch favicon as well.
2. Css StyleSheets + How to target specific browsers for bug fixes.
The template uses 3 main Css stylesheets:
The stylesheets are:
- base.css - main css stylesheet, default styling for elements
- grid.css - responsive 12 column grid, content clearing classes
- layout.css - the layout of the website
All of these are imported in style.css, which is situated a level higher than these 3 css stylesheets, next to the html files. The purpose of this is to provide a quick conversion to Wordpress and also using includes helps you quickly change color schemes and layout.
The content of style.css
@import url('_layout/base.css');
@import url('_layout/grid.css');
@import url('_layout/layout.css');
Font replacement is provided through the GOOGLE FONTS service and also through @font-face
The fonts used are OPEN SANS through google fonts and MUSEO SANS 500 through @font-face. You can look it up on the google fonts website using search and then click "Quick-Use" to learn detailed info about how to use it.
Quick usage tips
- in the html add the link provided to the font
- in the css just add the font name to your the the font or font-family css proprety of the element you want font replacement to be applied to.
( in html ...)
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css' />
( in base.css ...)
@font-face {
font-family: 'museo_sans_500';
src: url('font/MuseoSans_500.eot');
src: url('font/MuseoSans_500.eot?#iefix') format('embedded-opentype'), url('font/MuseoSans_500.woff') format('woff'), url('font/MuseoSans_500.ttf') format('truetype'), url('font/MuseoSans_500.svg') format('svg');
font-weight: normal;
font-style: normal;
}
font-family:"museo_sans_500", 'Open Sans', Arial, sans-serif;
One problem that always appears is that sometimes you need to write specific Css for Internet Explorer browsers to make them "play nice". The way this problm is tackled is that using Conditional Comments a class is applyed to the <html> element, according to the version of Internet Explorer the page is opened in:
<!DOCTYPE html> <!--[if lt IE 7 ]> <html class="ie6" xmlns="http://www.w3.org/1999/xhtml"> <![endif]--> <!--[if IE 7 ]> <html class="ie7" xmlns="http://www.w3.org/1999/xhtml"> <![endif]--> <!--[if IE 8 ]> <html class="ie8" xmlns="http://www.w3.org/1999/xhtml"> <![endif]--> <!--[if IE 9 ]> <html class="ie9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]--> <head>
So it you open the page with a version of Internet Explorer smaller or equal to 6 for example the <html> element will have have the class .ie6 applyed. Now when you want to write some css targeting IE7 you just start the Css Selector with .ie7 :
( from base.css ... )
.ie7 ul.unstyled{ list-style-position:outside; }
If you need to target Internet Explorer 6 then you start the css selector with .ie6, .ie8 for Internet Explorer 8 and .ie9 for Internet Explorer 9.
3. Javascript Script and Plugins
The template uses the jQuery javascript framework + jQuery plugins to add functionality to the website.
First jQuery + the js and css files for the Plugins are added:
<!-- /// jQuery //////// -->
<script type="text/javascript" src="_layout/js/jquery-1.10.2.min.js" ></script>
<!-- /// SelectNav //////// -->
<script type="text/javascript" src="_layout/js/selectnav/selectnav.min.js"></script>
<!-- /// Imagebox //////// -->
<link rel="stylesheet" type="text/css" href="_layout/js/imagebox/imagebox.css" />
<script type="text/javascript" src="_layout/js/imagebox/jquery.imagebox.min.js"></script>
<!-- /// FlexSlider //////// -->
<link rel="stylesheet" type="text/css" href="_layout/js/flexslider/flexslider.css" />
<script type="text/javascript" src="_layout/js/flexslider/jquery.flexslider.min.js"></script>
<!-- /// Carousel //////// -->
<link rel="stylesheet" type="text/css" href="_layout/js/carousel/carousel.css" />
<script type="text/javascript" src="_layout/js/carousel/jquery.carousel.min.js"></script>
<!-- /// Tabs and Accordion //////// -->
<script type="text/javascript" src="_layout/js/accordion/jquery.accordion.min.js"></script>
<script type="text/javascript" src="_layout/js/tabify/jquery.tabify.min.js"></script>
<!-- /// Validity //////// -->
<link rel="stylesheet" type="text/css" href="_layout/js/validity/css.validity.css" />
<script type="text/javascript" src="_layout/js/validity/jquery.validity.js"></script>
<!-- /// gMap //////// -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="_layout/js/gmap/jquery.gmap.min.js"></script>
<!-- /// FontAwesome //////// -->
<link rel="stylesheet" href="_layout/js/fontawesome/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="_layout/js/fontawesome/font-awesome-ie7.min.css" />
<![endif]-->
<!-- /// Custom JS //////// -->
<script type="text/javascript" src="_layout/js/scripts.js"></script>
<script type="text/javascript" src="_layout/js/plugins.js"></script>
Then two custom Js files are loaded:
- plugins.js - calls the plugins. All calls to plugins should be made in this file.
- scripts.js - contains custom scripts. All new custom scripts should be added in this file.
Layout Overview
A page is formed from 3 main <div>'s: #header, #content and #footer. These three div's inside another div named #wrap.
<div id="wrap"> <div id="header" class="ie-dropdown-fix"> <!-- /// HEADER //////////////////////////////////////////////////////////////////////////////////////////////////////////// --> <!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// --> </div><!-- end #header --> <div id="content"> <!-- /// CONTENT /////////////////////////////////////////////////////////////////////////////////////////////////////////// --> <!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// --> </div><!-- end #content --> <div id="footer"> <!-- /// FOOTER ///////////////////////////////////////////////////////////////////////////////////////////////////////// --> <!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// --> </div><!-- end #footer --> </div><!-- end #wrap -->
Typography
The styling for the typography of the website is defined in base.css
All comonnly used html elements are styled: headers, paragraphs, lists, tables, blockquotes etc. Also there are a lot of helper clases created to help you create pages faster.
Responsive Grid System
The layout is defined in grid.css
The layout of the website is built on a simple 12 column grid, with a margin between the columns.
The template uses 4 main media queries to adjust the layout of your website to match the size of your screen. The media queries in the template only target at max and min widths rather than device sizes or orientations, which means that any new mobile or browsers that don't match the exact dimensions will still benefit from the styling.
The main media queries are...
| Screen resolution | Column width | Gutter width | |
|---|---|---|---|
| Base | 960px and up | 60px | 20px |
| #Tablet (Portrait) | 768px and above | 45px | 15px |
| #Mobile (Portrait) | 767px and below | columns stack vertically, each one has 280px width | |
| #Mobile (Landscape) | between 480px and 767px | columns stack vertically, each one has 420px width | |
/* Default styling */
...
/* #Smaller then 1024px wide screen resolution */
@media only screen and (max-width: 1024px) {
...
}
/* #Tablet (Portrait) - designed for 705px width grid */
@media only screen and (min-width: 768px) and (max-width: 959px) {
...
}
/* #Mobile (Portrait) - designed for 280px width */
@media only screen and (max-width: 767px) {
...
}
/* #Mobile (Landscape) - designed for 420px width */
@media only screen and (min-width: 480px) and (max-width: 767px) {
...
}
Grid usage examples
For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
<div class="row"> <div class="span3"> sidebar </div> <div class="span9"> main content </div> </div>
Given this example, we have .span3 and .span9, making for 12 total columns and a complete row.
To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.
<div class="row">
<div class="span3">
sidebar
</div>
<div class="span9">
main content level 1
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
Responsive Images and Embeds
Seeing how you website will be responsive there will be times when you will need your images to be responsive to and with this in mind I've made a nice little style to make any image 100% responsive, all you need to do is add this little class to your image: class="responsive-img".
(in grid.css)
.responsive-img{
max-width:100%;
height:auto;
}
( in html)
<img src="#" alt=" alternative description" class="responsive-img" />
Note 1: The max-width:100%; hack for responsive images has been already added directly to the slider, portfolio, services and page header classes so you don't have to add the .responsive-img classes/ids to the images inside them.
Note 2: For more info on max-width:100%; and responsive images read http://unstoppablerobotninja.com/entry/fluid-images
To have all your videos and other embeds ( like google maps for e.g ) be responsive as well all you will need to do is wrap your embeds with a div that has a class called class="responsive-embed".
(in grid.css)
.responsive-embed{
position:relative;
padding:0px;
padding-bottom:56.25%; /* 16/9 ratio */
height:0;
overflow:hidden;
margin-bottom:20px;
}
.responsive-embed iframe,
.responsive-embed object,
.responsive-embed embed{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
( in html)
<div class="responsive-embed">
<iframe src="http://www.youtube.com/embed/G_G8SdXktHg"></iframe>
</div>
Clearing content
There are 2 classes for clearing content:
.fixed - implements a clearfix hack and should be applied to elements ( eg. div's) that have floated elements in them. The .row class used in the layout already has the clearfix applyed so you don't need to add the .fixed class to element that already have the .row class applyed
(in grid.css)
/* Clear Fix Hack - add class="fixed" to div's that have floated elements in them */
.fixed:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
.fixed{display:block;}
/* \*/
.fixed{min-height:1%;}
* html .fixed{height:1%;}
( in html )
<div class="fixed">
<img src="_content/services/245x265-1.png" class="responsive-img img-align-left bordered" style="margin-bottom:20px;" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In estibulum gravida iaculis. Maecenas consectetur
ultricies tellus, sed sollicitudin nisl adipiscing ut. Fusce tellus sem, bibendum non condimentum in, tempor
sed risus. Quisque lobortis viverra nisi, ut rutrum augue pulvinar at. Morbi lesuada eros id massa consectetur
vel sagittis turpis gravida.</p>
</div>
.clear - clear:both.
(in grid.css) /* Clear
*/ .clear{ clear:both; display:block; overflow:hidden; visibility:hidden; width: 0; height: 0; } ( in html) <br class="clear" />
JS Scripts / JS Plugins / PHP Scripts
Imagebox - Responsive Lightbox (jQuery plugin)
Read the full imageBox documentation.
How to use it to open a image in the lightbox:
<a href="path_to_large_image" title="Image Caption" rel="imagebox">
<img src="path_to_thumbnail_image" alt="Some Image" />
</a>
The key is the rel="imagebox" attribute. This is what lets Imagebox know that you want this thumbnail to open in Imagebox.
How to create a gallery:
To create a gallery put the name of gallery in brackets after rel="imagebox" like this: rel="imagebox[gallery_name]"
<!-- /// Imagebox //////// --> <script type="text/javascript" src="_layout/js/imagebox/jquery.imagebox.min.js"></script> <link rel="stylesheet" type="text/css" href="_layout/js/imagebox/imagebox.css" /> ( plugins.js) // ------------------------------------------------------------------------------------------------------- // Imagebox - Responsive Lightbox | // ------------------------------------------------------------------------------------------------------- imagebox.build();
SelectNav.js - Responsive drop-down menu for mobiles and small screen devices.
SelectNav.js is a JavaScript plugin that lets you convert your website navigation into a select drop-down menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices. Learn more about SelectNav Usage.
<!-- /// SelectNav //////// -->
<script type="text/javascript" src="_layout/js/selectnav/selectnav.min.js"></script>
( plugins.js)
// -------------------------------------------------------------------------------------------------------
// Select Nav - converts your website navigation into a select drop-down menu |
// -------------------------------------------------------------------------------------------------------
selectnav('dropdown-menu', {
label: 'Menu',
nested: true,
indent: '-'
});
FlexSlider - responsive slider (jQuery plugin)
FlexSlider is an awesome, fully responsive jQuery slider plugin.
Here is the complete guide to getting started with Flexslider: http://www.woothemes.com/flexslider/
The styling of the slider is in _layout/js/flexslider/flexslider.css
<div class="flexslider">
<ul class="slides">
<li>
<img src="_content/index/slider/940x350-1.jpg" alt="" />
<div class="slidetext">
<h2>Proin porttitor<br class="hide-tablet hide-phone" /> pulvinar risus nec</h2>
<p class="last">Sed interdum eleifend mollis. Proin quis lectus libero. Integer eu lectus erat, id aliquet risus.
Vivamus vitae mollis purus. Fusce id diam at purus sodales mollis. <a href="#">more</a></p>
</div><!-- end .slidetext -->
</li><!-- end slide 1 -->
<li>
<img src="_content/index/slider/940x350-2.jpg" alt="" />
<div class="slidetext">
<h2>Curabitur<br class="hide-tablet hide-phone" /> sed sollicitudin orci.</h2>
<p class="last">Nunc eu tellus sed felis vestibulum pulvinar sed ac enim. Quisque tincidunt urna id arcu egestas
a rhoncus purus molestie erat eget nunc varius. <a href="#">more</a></p>
</div><!-- end .slidetext -->
</li><!-- end slide 2 -->
<li>
<img src="_content/index/slider/940x350-3.jpg" alt="" />
<div class="slidetext">
<h2>Suspendisse vest<br class="hide-tablet hide-phone" /> pretium laoreet</h2>
<p class="last">Aliquam erat volutpat. Maecenas tincidunt porta hendrerit. Sed quis tristique nulla. Fusce volutpat
lobortis tellus sed tincidunt consequat egestas a elementum dolor. <a href="#">more</a></p>
</div><!-- end .slidetext -->
</li><!-- end slide 3 -->
</ul><!-- end .slides -->
</div><!-- end .flexslider -->
( plugins.js)
// -------------------------------------------------------------------------------------------------------
// FlexSlider - responsive slider |
// -------------------------------------------------------------------------------------------------------
$('.flexslider').flexslider({
animation: "fade", //String: Select your animation type, "fade" or "slide"
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
initDelay: 0, //Integer: Set an initialization delay, in milliseconds
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: true, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
video: false, //Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
// Primary Controls
controlNav: true, //Boolean: Create navigation for paging control of each clide?
directionNav: false, //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next" //String: Set the text for the "next" directionNav item
});
Contact Form (Custom JS)
<!-- /// Validity //////// -->
<script type="text/javascript" src="_layout/js/validity/jquery.validity.js"></script>
<link rel="stylesheet" type="text/css" href="_layout/js/validity/css.validity.css" />
<form id="contact-form" class="fixed" action="javascript:void(0);">
<fieldset>
<p id="formstatus"></p>
<p>
<label for="name">Your name: <span class="required">*</span></label>
<input class="text" type="text" id="name" name="name" value="" />
</p>
<p>
<label for="email">Your Email Adress: <span class="required">*</span></label>
<input class="text" type="text" id="email" name="email" value="" />
</p>
<p>
<label for="subject">Subject: <span class="required">*</span></label>
<input class="text" type="text" id="subject" name="subject" value="" />
</p>
<p>
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" rows="3" cols="25"></textarea>
</p>
<p class="last">
<input type="submit" name="submit" class="btn" value="Send!" />
</p>
</fieldset>
</form><!-- end #contact-form -->
( from scripts.js...)
// -------------------------------------------------------------------------------------------------------
// Form Validation script - used by the Contact Form script
// -------------------------------------------------------------------------------------------------------
function validateMyAjaxInputs() {
$.validity.start();
// Validator methods go here:
$("#name").require();
$("#email").require().match("email");
$("#subject").require();
$("#message").require();
// End the validation session:
var result = $.validity.end();
return result.valid;
}
// -------------------------------------------------------------------------------------------------------
// ClearForm
// -------------------------------------------------------------------------------------------------------
$.fn.clearForm = function() {
return this.each(function() {
var type = this.type, tag = this.tagName.toLowerCase();
if (tag == 'form')
return $(':input',this).clearForm();
if (type == 'text' || type == 'password' || tag == 'textarea')
this.value = '';
else if (type == 'checkbox' || type == 'radio')
this.checked = false;
else if (tag == 'select')
this.selectedIndex = -1;
});
};
// -------------------------------------------------------------------------------------------------------
// Contact Form
// -------------------------------------------------------------------------------------------------------
$("#contact-form").submit(function () {
if (validateMyAjaxInputs()) { // procced only if form has been validated ok with validity
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "_layout/php/send.php",
data: str,
success: function (msg) {
$(document).ajaxComplete(function (event, request, settings) {
if (msg == 'OK') { // Message Sent? Show the 'Thank You' message
result = 'Your message has been sent. Thank you!';
$('#contact-form').clearForm();
} else {
result = msg;
}
$("#formstatus").html(result);
});
}
});
return false;
}
});
...
( from send.php...)
/////////// Add your own email below ////////////////
define("WEBMASTER_EMAIL", 'bitpublimedia@gmail.com');
To make the contact script work you just have to go in the send.php file located in _layout/php/ and change in the line below the email adress with your own.
The way the email works is that the contact.html file calls through ajax the send.php file ( if the inputs are properly filled out) it is processed and the result is returned to the contact.html page and placed in <p id="formstatus"></p>. So you must have it loaded on a server with php enabled to get it to work otherwise it will return the php code.
If the mail is succesfully sent then the contact form is cleared. If you do not want the form to be cleared delete the following highlited line only:
( from scripts.js...)
...
$(document).ajaxComplete(function (event, request, settings) {
if (msg == 'OK') { // Message Sent? Show the 'Thank You' message
result = 'Your message has been sent. Thank you!';
$('#contact-form').clearForm();
...
Validity contact form validation (jQuery plugin) is used to validate the inputs. The validateMyAjaxInputs() function contains the rules the info filled in the inputs must follow in order to be validated. If you add new inputs and want new rules you have to add them in this function. Read the Validity documentation for more info.
gMap 2 - Google Maps API V3
gMap is a jQuery plugin that helps you embed Google Maps into your website. With less than 2 KB (minified and gzipped) in size it is very flexible and highly customizable. Read the full gMap 2 documentation.
<!-- /// gMap //////// -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="_layout/js/gmap/jquery.gmap.min.js"></script>
( from html )
<div id="google-map" class="map"></div>
( from layout.css )
.map{ width:100%; height:300px; }
( from plugins.js )
// -------------------------------------------------------------------------------------------------------
// gMap
// -------------------------------------------------------------------------------------------------------
$('#google-map').gMap({
maptype: 'ROADMAP',
scrollwheel: false,
zoom: 18,
markers: [{
address: 'New York Avenue Northwest, Washington, DC, United States',
html: '',
popup: false
}
]
});