Agility HTML

Support Guide

Tip: Press CRTL+F to search this file

Introduction to Agility – Responsive HTML5/CSS3 Template

Template:	Agility HTML
Template by:	Chris Mavricos, SevenSpark
Website:	sevenspark.com
Created:	December 3, 2011
Guide Last Updated:	June 11, 2013

Welcome to Agility! Thank you for purchasing this template, I appreciate it!

This guide should answer all your questions about how to use this template. You can browse the document using the navigation sidebar on the left, or search the entire document by using CTRL+F in your browser.

Agility is based on a high quality responsive Grid Framework called Skeleton, which makes creating responsive layouts simple. You may want to start off by checking out the Full Skeleton Documentation →

The latest version of this support guide can always be found here: Agility Support Guide.

Getting Started

This guide assumes you have already purchased hosting and a domain name on a properly configured server running Apache and PHP5+. (Note that you do not actually need these to begin working on your site locally). Server configuration, DNS, and hosting issues are beyong the scope of this document. Your host should be able to help you with such questions :)

The first thing you'll want to do (and probably already have done) is unzip the file you downloaded from ThemeForest. The .zip contains two directories:

Documentation
agility-html

The documentation folder contains your own copy of this help file.

The agility-html folder contains the template itself - all the HTML templates, CSS, JS, images, contact form, etc. If you were to place this folder in a public directory on a web server, you would have a "website".

For newcomers

There's nothing too complicated going on here - your server works much like a file system in this case. When you access the public folder by visiting your domain name, the appropriate file is retrieved and rendered. For example, if you visit http://yoursite.com/about.html, the file about.html will be displayed if it exists in the public html folder (simple example).

TIP: Choose your browser wisely

Use a modern, high quality browser for developing and testing your site. I highly recommend Google Chrome. Firefox is also a good choice. You should avoid using Internet Explorer except for cross browser testing.

Working on a Local Computer without a Server

No PHP Warning

The downside to working with the site without a running webserver is that you won't be able to make use of PHP scripting, which is required for the contact form.

You don't necessarily need a server to start building your site. Just place your agility-html folder in any directory. Open it up, and open one of the files (normally it'll open up in your default browser, but if not, go to Open With > {Browser})

You'll see the site in front of you, all linked up and ready to go. Now you can just edit the HTML files to make your site look like you want (see below).

Internet Explorer Warning

Internet Explorer may complain about running javascripts on an HTML file when not using a server (for example, the slideshow might be blocked). You can either allow these scripts, use a different browser, or install a server to avoid this issue.

Working on a Local Server LAMP stack equivalent (for example, running XAMPP (Windows), MAMP (Mac), LAMP (Linux))

Running a local server is a great way to develop your site locally. There are a variety of LAMP-emulators out there that will help you get a local server running without too much hassle. Setting them up is beyond the scope of this guide, but you can click the links below for more info:

Once you have your server set up, create a new folder (yoursite) for your site in your server's HTML directory (location to be configured during installation), and then drop the contents of agility-html in it. If everything was installed correctly, you should be able to access your site at http://localhost/yoursite

Working on a Remote Server / Launching your site publicly

At some point you're going to want to put your site online, which generally means placing your files on a remote server (that is, the server on which you have hosting). The best way to do this is to FTP your files onto the remote server - your host will provide you with FTP details and credentials for connecting to the appropriate server.

You'll need an FTP client in order to upload your site. I recommend FileZilla (it's free!)

Once you connect to your server via FTP, using the credentials provided to you by your hosting company (e.g. GoDaddy, BlueHost, MediaTemple), all you need to do is place your files in the root folder for your domain (usually in a directory called public_html or www. The process varies by host, so each hosting provider has documentation on how to set a site up in their system, which you should refer to.

How to Edit Files

To edit your HTML files, you'll want a good text editor - not a word processor like Word or OpenOffice. You can use a simple editor like Notepad or gedit, a more advanced editor like Notepad++ (free), or a full-fledged IDE like Aptana (free), Coda (paid), or DreamWeaver (paid).

TIP: Mix and Match

Try copying and pasting different chunks of code into different files to create new layouts!

Of course, you should be familiar with editing HTML in order to modify your templates. If you want to adjust styles or scripting functionality, you'll need to be familiar with CSS and jQuery.

Creating new pages

To add a new page to your site, you'll want to copy the template you'd like to use for your new page and rename it (or you can just edit the template directly - but keep a backup!). Then edit the new file and link up your navigation using the new file name.

Newcomer tip

The index.html file is your home page. It will automatically be displayed for your primary domain/URL, when no path is given. If you want to use an alternative home page, you should rename that file to index.html.

Have fun! :)

Getting Support

First, please take a moment to search this file, as the answer to your question is likely already in here. You can press CTRL+F in your browser and then search this entire page for keywords. Or, browse the topics in the navigation on the left. It's the fastest way to get the answer you need!

Please be polite when requesting support, and I'll be sure to respond as soon as possible. I'll do my best to answer your questions, but unfortunately I generally can't offer customizations beyond a few lines of code - there just aren't enought hours in the day! Of course, I will always provide fixes for any bugs that crop up as soon as can be :)

When requesting support, please indicate which product you are referring to, explain what you've already tried and provide a link to your site so I may see the issue firsthand. It's really the only way to efficiently diagnose a problem. Thanks!

I can't find my answer in this guide. Get Support →

Templates

Here's a list of the templates included with Agility.

Home Templates
Home	index.html	Home page with slider, tagline, featured columns, blog list, feature list, latest Tweet
Home - Alternate	home-alternate.html	2/3rds width slider, 1/3rd tagline, featured columns, blog list, feature list, latest Tweet
Home - No Slider	home-no-slider.html	Header image, tagline, featured columns, blog list, feature list, latest Tweet
Home + Blog	home-blog.html	Slider, tagline, grid-style blog
Blog Templates
Standard Blog Layout	blog.html	The standard blog loop, in list format
Grid Blog Layout	blog-grid.html	The blog loop, in 3-column grid/mosaic format
Single Blog Post	blog-post.html	A single blog post with featured image, lightbox, About the Author, Related Posts, and Comments
Single Blog Post - Video	blog-post-video.html	A single blog post with featured video, video lightbox, About the Author, Related Posts, and Comments
Portfolio Templates
4 Column Grid Layout	portfolio-4col.html	Four column grid layout portfolio with image and video lightboxes.
3 Columns Grid Layout	portfolio-3col.html	Three column grid layout portfolio with image and video lightboxes.
2 Column Layout	portfolio-2col.html	Two column grid layout portfolio with image and video lightboxes.
1 Column Layout	portfolio-1col.html	One column grid layout portfolio with image and video lightboxes.
Single Portfolio Item	portfolio-single.html	A single portfolio item with image feature.
Single Portfolio Item + Video	portfolio-single-video.html	A single portfolio item with video feature.
Page Templates
About (typography / single page)	about.html	Template demonstrating all the typographical and HTML elements Agility has to offer, as well as a single page layout.
Responsive Grid / Full Width	grid.html	Template demonstrating the column options from the responsive grid in a full-width page.
Responsive Slider Samples	slider.html	Template showing various slider styles - images, captions, sizes.
Video Slider	slider-video.html	Template for video-specific slider.
Contact	contact.html	Includes the contact form, address, and Google Maps
404 (Page Not Found)	404.html	A sample template for your 404 page.

HTML Structure

Responsive Grid System

Responsive Grid Demo View the Full Skeleton Documentation →

The grid system makes it easy to create well-proportioned layouts. The Skeleton framework, based on the 960.gs framework, splits the grid into sixteen columns. Columns are created by adding simple, intuitive classes to your HTML elements.

For a full demonstration of the responsive grid, visit the Skeleton Grid Demo

The grid elements must be wrapped in a .container element, so you end up with something like this:

						
							Nine Columns
							Seven Columns

A full width page is 16 columns, while a page with a sidebar is split into 11 and 4 columns, with a 1 column offset

Columns on a Full Width Page (16 Columns)

1/2 Columns (8 cols)

						
							Half Width
							Half Width

1/4 Columns (4 cols)

						
							Quarter Width
							Quarter Width
							Quarter Width
							Quarter Width

3/4 Columns (12 & 4 cols)

						
							Quarter Width
							3/4 Width

1/3 & 2/3 Columns

Thirds use a special syntax for full-width

						
							1/3 Width
							2/3 Width

Nested Columns

If you nest columns (use columns within columns), you'll need to use the .alpha and .omega classes on your first and last columns, respectively, to account for the margins.

						
							
								First
								Last

Offsets

To leave a column gap between columns, use the .offset-by-X class. Valid values for X are 'one' through 'fifteen'

To Clear Rows

Add the .clear-grid class to the first item in each row
OR wrap each row in a .row div
OR add a <br class="clear" /> after the last item in each row

Navigation Demo

The navigation is built with nested unordered lists and links. The full size menu is CSS-driven.

Current Menu Item: Add the .current class to the list item (LI)

Responsive: The mobile button is displayed when the viewport is less than 480px wide, to save screen real estate on mobile devices.

Flyout menus: Nested unordered lists automatically create flyout menus.

						
							
							
							+ Menu
							
								
									Home
									
										Home – Alternate
										Home – No Slider
										Home + Blog
									
								
								....

Home page featured columns

Featured Columns Demo

The home page featured columns are a combination of the column mosaic layout and featured images. The key pieces are to wrap your columns in a .mosaic div, and each column has the class .feature-column. You could easily change the number of columns by using the Skeleton grid classes.

						
							
							
																		
								
									
																		
								Fully Responsive					
								Agility adapts to any screen size to optimize the user's experience.
							
							
							
							
							
								
									
								
								
									
										
																				
										

									

								
								Back to Basics					
								Built from the ground up on a responsive grid system.
							
							
							
							
							
								
									
								
								Beautiful Design					
								Elegantly minimal.  Beautifully simple.

Blog Layouts

Standard Blog Layout

Standard Blog Layout Demo

The standard blog layout wraps the articles in the .blog-layout class. The latest post is larger to make it stand out, but that as not required - it is just an alternative style.

						
		
							The Blog
								
							
							
								
									Latest
													
							
								
								
										
									Post Title				
											
									
									
										
											Category
										
										
											by Author name on
											Month day, year
										
									
																		
										
																					
										
									
								
								
								
								
										
									
									
										Excerpt content here.
										Continue Reading →							
									
									
										
																													
										novel, Ellis Bell, Catherine, Heathcliff, English
														5 Comments 
										Permalink
									
								
								
								
								
							
							
					
							
							
							
								
														
									
										
									
									
									
											
										Post Title				
													
										
										
											
												Category
											
											
												by Author name on
												Month day, year
											
										
																			
											
									
								
								
								
								
										
									
									
										Excerpt content here..
										Continue Reading →
									
									
										
									
										wizard, Oz, Dorothy, Toto, Aunt Em, witch, flying monkeys
															5 Comments 
										Permalink
									
								
								
								
								
							
							
						
							....
								
							
							
								← Older Posts

Grid Layout

Grid Blog Layout Demo

The grid layout is built by wrapping the articles in a .mosaic div with a .col-X class, where X is the number of posts per row.

Each article is given the appropriate Skeleton grid class.

								
				
						
						
							
							
								
								
								Post Title
															
								
								
									
										Category
									
									
										by Author name on
										Month day, year
									
								
								
								
							
								
							
							
								Excerpt content here.
								Continue Reading →							
							
							
						
						
						
				
						
						
							
								
								
								Post Title
															
								
								
									
										Category
									
									
										by Author name on
										Month day, year
									
								
								
								
							
							
							
							
								Excerpt content here.
								Continue Reading →							
							
							
						
						
						
				
						
						
																	
								
								
									
										
																				
										

									

									
								
								The Count of Monte Cristo
															
								
								
									
										Historical
									
									
										by Alexandre Dumas on
										Sep 7, 2011
									
								
								
								
							
								
							
							
								At the same moment, and in the midst of the terrifying silence which usual...
								Continue Reading →							
							
							
						
						
						
						....

Portfolios

Portfolio Demo

Portfolios can be created with any number of columns using this structure. Adding [folio] to the data-rel attribute will make all the items appear as a gallery in the lightbox.

								
						
								
							
							
								
								
								

								
									Super Troopers!
													
																			
								by JD Hancock

							
							
					
							
							
								
								
									
									
										
																				
										

									
							
								
											
															
								
									Career-Limiting Move																	
													
																			
								by JD Hancock
													
							
							
					
							
							
								
								
										
															
								
									Facing the Storm																	
													
																			
								by JD Hancock
													
							
							
					
							
							
								
								
								
						
								
									Darth Jawa
													
																			
								by JD Hancock

Horizontal Rules

Horizontal Rule Demo

Agility includes several types of horizontal rules.

Blockquotes

Blockquote Demo

Blockquotes are normally full width. Use the cite element to provide attribution.

						This is a normal block quote.  After silence, that 
							which comes nearest to expressing the inexpressible is music.
							Aldous Huxley

Pullquote Demo

To use a pullquote in a paragraph, use the .pullquote class before the start of a paragraph:

						Yes, it is a dull beginning. I say, 
							let us pretend that it is the end.
							Peter Pan, by J.M Barrie
						
						Paragraph text...

Taglines

Tagline Demo

Taglines can be used for extreme emphasis, generally on your home page.

						
							This is a tagline, you can use it for extreme emphasis.

Lists

List Demo

Agility offers several lists styles that employ different bullet types. Just add the appropriate class.

						
						
						
							Peter Pan
							The Adventures of Huckleberry Finn
							Wuthering Heights
							The Odyssey
							Alice's Adventures in Wonderland
						
						
						
						
							Peter Pan
							The Adventures of Huckleberry Finn
							Wuthering Heights
							The Odyssey
							Alice's Adventures in Wonderland
						
						
						
						
							Peter Pan
							The Adventures of Huckleberry Finn
							Wuthering Heights
							The Odyssey
							Alice's Adventures in Wonderland							
						
							
						
						
							Peter Pan
							The Adventures of Huckleberry Finn
							Wuthering Heights
							The Odyssey
							Alice's Adventures in Wonderland							
							
						
						
						
							UberMenu – WordPress Mega Menu
							Menu Management Enhancer for WordPress
							Scroll Checkpoint – Animated Content Panels Plugin

UI Elements

Buttons

Button Demo

It's easy to insert buttons. You can style anchors, button elements, or submit buttons as buttons.

						
						Click me!

To change the color, just add the appropriate class:

						
						Click me!

To make the text light instead of dark, add the .button-lighttext class.

						
						Click me!

To make the button full-width with centered text, add the .full-width class.

						
						Click me!

To create larger buttons, add the .button-large class.

						
						Click me!

Color Options

button (light grey default)
button-green
button-blue
button-red
button-grey
button-purple
button-yellow

Tabs

Tab Demo Skeleton Tabs Documentation →

Tabs are created by creating two adjacent unordered lists. The first contains the navigational tabs, and the second contains the content. The list items are linked together by href → id

						
						
  							
  							Simple
  							Lightweight
  							Mobile
						

						
						
  							
  							The tabs are clean and simple unordered-list markup and basic CSS.
  							The tabs are cross-browser, but don't need a ton of hacky CSS or markup.
  							The tabs work like a charm even on mobile devices.

Alert Boxes

Alert Box Demo

Agility comes with 3 styles of alert boxes: notification (green), warning (yellow), and error (red).

						
						
							This is a notificaiton alert.
							Congratulations on your wonderful decision to purchase Agility! 
						
						
						
						
							This is a warning alert.  
							Caution!  Do not push the red button!
						
						
						
						
							This is an error alert.
							You just had to push that button, didn't you?  Well, that's it, it's all over...

Media

Responsive Images

To make an image automatically scale as the grid responds, add the class .scale-with-grid to the img tag. This will ensure that the image is never larger than the width of its container - though it will not automatically expand if it is narrower than the container.

Responsive Video Embedding

Responsive Video Demo

Embedding from YouTube and Vimeo

You can embed Vimeo and YouTube videos just by copying the latest iFrame embed code from those sites. Set the size (width/height) you'd like the video to appear at on mobile devices. For devices > 480px wide, videos wrapped in the responsive containers will automatically scale to the size of their container.

Responsive Video

To make your embedded videos responsive, wrap them in this code:

This will make the video automatically size to its parent container. However, this resizing is not active for mobile sizes; otherwise it interferes with the built-in browser player on devices like the iPhone. Therefore, the recommended width to set in your embed code is about 400px - which ensures the best sizing for landscape oriented mobile phones when not resized.

It is important to note that vendors are still working on mobile device compatibility. For example, Vimeo videos are not compatible with Android devices at the time of this writing; rotating the screen orientation while loading a Vimeo video on the iPhone tends to crash mobile Safari. These are issues to be aware of which are awaiting solutions by the vendors. You may wish to include a link to allow users to view videos in native apps rather than in-browser.

Lightbox Demo

Images

To create an image lightbox, wrap your image in an anchor which links to the image, and set the data-rel attribute to prettyPhoto and the class to img-link. Add the scale-with-grid class to the img tag in make the whole thing responsive. The lightbox will automatically be initiated.

You can create a lightbox gallery by adding the gallery name to the data-rel attribute for each of the images that should appear in the gallery:

Videos

To create a video lightbox, use the same lightbox structure, with two adjustments:

Add a responsive video wrapped in an .inline-video-lightbox-content div with an ID after the lightbox link.
Set the href of the lightbox link to the ID of the inline video.

Maps

Map Demo

You can easily add Google Maps just by setting location data in the markup. Just add the class .map_canvas to a div and set the following data:

data-lat	The latitude of the coordinates to show on the map. This will load immediately.	40.4166909
data-lng	The longitude of the coordinates to show on the map. This will load immediately.	-3.7003454
data-address	This address is optional and will be geocoded and displayed - it sends an extra request to do this, so if the geocache fails the original lat and long coordinates will be displayed.	5 Calle de Sevilla, Madrid, Spain
data-zoom	The level to which the map should be zoomed to begin with.	15
data-mapTitle	The text to display when hovering over the map marker.	Agility, Inc

Plugins

Responsive Slider

Responsive Slider Demo

FlexSlider is used as the basis for the Agility slider. View the Full FlexSlider Documentation →

The slider is automatically initialized in agility.js. Just place the HTML markup anywhere in the site and it'll be activated.

Here's some sample markup for the slider:

					
						
							
								
									
									
								
								
									
									
								
								
									
									
									
						    			Caption text.
						    		
								
								
									
									
									
						    			Caption text.

You can add the class .flex-caption-top to move the caption div to the top of the image (by default it is at the bottom).

And here is a list of all options, which can be set in the agility.js file:

						animation: "fade",              //String: Select your animation type, "fade" or "slide"
						slideDirection: "horizontal",   //String: Select the sliding direction, "horizontal" or "vertical"
						slideshow: true,                //Boolean: Animate slider automatically
						slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
						animationDuration: 600,         //Integer: Set the speed of animations, in milliseconds
						directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
						controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
						keyboardNav: true,              //Boolean: Allow slider navigating via keyboard left/right keys
						mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
						prevText: "Previous",           //String: Set the text for the "previous" directionNav item
						nextText: "Next",               //String: Set the text for the "next" directionNav item
						pausePlay: false,               //Boolean: Create pause/play dynamic element
						pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item
						playText: 'Play',               //String: Set the text for the "play" pausePlay item
						randomize: false,               //Boolean: Randomize slide order
						slideToStart: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
						animationLoop: true,            //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
						pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
						pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
						controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
						manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
						start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
						before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
						after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
						end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)

Contact Form

Contact Form Demo

The contact form requires a server running PHP5 and a properly configured mail server.

Agility includes a copy of the excellent AJAX Contact Form from Jigowatt.

Setup & Configuration

The contact form code is already included in your package, so all you need to do is configure some values and add the PHP file to your server.

Open ajaxcontact/contact.php, and find the CONFIGURATION section near the top
Edit the $address value to your own email address.
Configuring the rest of the variables is optional, including:
- Invalid Name Error
- Empty Email Error
- Invalid Email Error
- Invalid Subject Error
- Invalid Message Error
- Email Subject
- Success Header
- Success Message
- Mailing Error Message
You can configure the rest of the file as well, but you should be comfortable with PHP and understand what you're doing if you want to edit anything beyond the configuration section.
Sections of code for a phone number and human verification system are commented out; uncomment them if you wish to use them on your site.
Add the contact form code to your page. The javascript is already included in the template. The IDs and classes should remain intact.

						
						
						
						
							
							
							
								Name 
								Email 
								Subject 
								Message

Pretty Photo

See Media Lightbox

PrettyPhoto Documentation →

Advanced Lightbox Functionality

You can adjust the prettyPhoto lightbox options in the agility.js javascript file. You can see a list of all the options in the prettyPhoto documentation.

Twitter JS

Twitter API 1.0 is now deprecated, please see Twitter API v1.1

The "Latest Tweet" functionality is controlled through javascript - this allows the page to continue loading, even if Twitter isn't responding. To use the Twitter plugin, add this code in your HTML:

						From the Twittersphere
						Loading Tweets...

You can change the heading to anything you like, it won't affect functionality.

Make sure the div's ID is set to tweet. Change the content of the div to whatever you want to be displayed while the Tweets are loading. This text will be replaced once the data is retrieved from Twitter.

Setting the Twitter Account

To set the account from which to pull the latest Tweet:

Open up javascripts/agility.js
Find the section labeled //Twitter
Change the id value to your Twitter handle, for example:
id: 'mycoolhandle',
Save the file.

You can also edit the other values in the getTwitters function if you wish.

count - number of tweets to retrieve.
enableLinks - display tweeted links as clickable links, including @replies and #hashtags.
ignoreReplies - skip tweets starting with @. Note that if your latest 2 tweets are replies, nothing will be shown.
clearContents - removes the "Loading Tweets..." content from the div once the Tweets are loaded.
template - the pattern used by the plugin to display the data

For full details on customization options, see twitter.js by Remy Sharp

Twitter API v1.1

As of June, 2013, Twitter has discontinued version 1 of its API, replacing it with version 1.1. Twitter API 1.1 makes it much more complicated to retrieve the latest tweet, so there is a more significant setup process of creating OAuth tokens.

Moreover, since Twitter now requires authentication to access the API, accessing the API can't be done via javascript as it was previously. Instead, you'll need to use PHP. That means that:

Your server must be running PHP
Any file showing the twitter feed must be a .php file

In the next version of Agility, these files will be included. For now, download this zip and extract it into your root folder. You will then have the structure agility-html/twitter/twitter_feed.php. Agility Twitter Files

How to set up your OAuth tokens

In order to access the API, you'll need to set up a very simple "Twitter App" and generate access keys. These keys authenticate your site to Twitter during the twitter feed request.

Visit the Twitter App Center
Click "Create a new Application"
1. Name - the name of your website is a good one
2. Description - "{Your website} Twitter Feed OAuth"
3. Website - URL of your website
4. Callback URL - leave blank
5. Click "Create Twitter Application" button
Copy Consumer & Secret Keys under OAuth settings (see below)
Click "Create my access token" under "Your Access Token"
Copy Access & Access Secret Tokens (see below)
Adjust the settings on your /twitter folder to make it writeable by the server so the tweets can be cached

Set OAuth tokens in Agility Twitter PHP

Open twitter/twitter_feed.php

At the top of the file, you'll see

//Change this to your timezone - http://www.php.net/manual/en/timezones.php
date_default_timezone_set( 'America/New_York' );
$twitter_gmt_offset				= '+5';

//YOUR TWITTER SCREENNAME
$twitter_handle					= 'your-twitter-username';

//YOUR APP'S UNIQUE KEYS
$twitter_consumer_key 			= 'your-consumer-key';
$twitter_consumer_key_secret	= 'your-consumer-key-secret';
$twitter_access_token 			= 'your-access-token';
$twitter_access_token_secret 	= 'your-access-token-secret';

Change the timezone to your Timezone
Set the GMT Offset for your timezone
Set your twitter handle (username) from which the tweets will be pulled
Set your unique keys created in the previous set of instructions

Add the new feed to your templates

Previously, the twitter feed was generated by this markup in your HTML files

Loading Tweets...

We'll now replace this with the new PHP Twitter function

First, rename your file from index.html to index.php. You must use a PHP file in order for the PHP script to be executed.
Replace the old tweet div with this:
```
							
						
```

You can remove this code from agility.js if you like

//Twitter
	if($('#tweet').size() > 0){
		getTwitters('tweet', { 
			id: 'sevenspark', 
			count: 1, 
			enableLinks: true, 
			ignoreReplies: true, 
			clearContents: true,
			template: '%text% %time%'+
						''
		});
	}

That's it!

Skins

Background

Changing the background skin is as easy as adding a class to the body tag.

bkg-fiber
bkg-smoky

Leave blank (no class) to default to the white background.

						<body class="bkg-fiber">

Highlight Color

Changing the highlight skin is also as easy as adding a class to the body tag.

skin-red
skin-blue
skin-green
skin-purple

Leave blank (no class) to default to the charcoal scheme.

						<body class="skin-red">

Alternatively, just copy the styles from your desired skin to the Default style selectors and do not use a class. The style can be edited in layout.css by navigating to the #Skins section.

For example, copy the red skin:

						/* Red */
						.skin-red #sub-title,
						.skin-red #main p a,
						.skin-red nav#main-nav > ul > li.current > a,
						.skin-red a.excerpt-link,
						.skin-red .post-meta a.post-category,
						.skin-red #tweet a{
							color:#d83f28;
						}
						.skin-red .contact-form label{
							border-bottom-color: #d83f28;
						}
						
						.skin-red #colophon .footer-upper{
							border-top-color: #d83f28;
						}

To the default style:

						/* Default - copy your values here */
						#sub-title,
						#main p a,
						nav#main-nav > ul > li.current > a,
						a.excerpt-link,
						.post-meta a.post-category,
						#tweet a{
							color:#d83f28;
						}
						.contact-form label{
							border-bottom-color: #d83f28; 
						}
						#colophon .footer-upper{
							border-top-color: #d83f28; 
						}

CSS Files and Structure

base.css

Do Not Edit this file

This is a Skeleton Core file. Keep all your customizations in other files so that if there is a future Skeleton release you can just overwrite this file easily.

This file contains the basic styles for skeleton.

skeleton.css

Do Not Edit this file

This is a Skeleton Core file. Keep all your customizations in other files so that if there is a future Skeleton release you can just overwrite this file easily.

This file contains the skeleton grid.

layout.css

This file contains all the styles for the site. Here are the contents of the file. It is easy to search as each section has a # in front of the section header.

						/*
						 * TABLE OF CONTENTS
						 * =========================================================
						 * 
						 * 		#General Site Styles
						 * 		#Fonts & Typography
						 * 		#Dropdown Panel Container
						 * 
						 * 		#Site Header
						 *		#Navigation
						 *
						 * 		#Slider
						 * 		#Lightbox
						 * 		#Videos 
						 * 
						 * 		#Page Headings
						 * 		#Post Content
						 * 			- Mosiac - Grid Layout
						 * 			- Blog Layout - Standard Layout
						 * 			- Bloglist - Widget Style
						 * 		#Portfolio
						 * 		#Single Posts
						 * 		#Comments
						 *
						 * 		#Sidebar
						 * 
						 * 		#HTML Elements
						 * 			#Blockquotes
						 * 			#Lists
						 * 			#Forms
						 * 			#Buttons
						 * 			#Tabs
						 * 			#Tables
						 * 			#Alert Boxes
						 * 			#Icons
						 * 			#Tooltips
						 * 
						 * 		#Contact Form
						 *  
						 * 		#Footer 
						 * 		#Miscellaneous Headers
						 * 
						 * 		#Twitter Plugin
						 * 
						 * 		#Utility Classes 		
						 * 		#Skins
						 * 		#Transitions
						 * 		#IE Stupidity
						 * 		#Font-Face (sample code)
						 * 
						 * 		#Media Queries
						 * 
						 */

ie7.css

Please note that IE7 is not officially supported. This file is provided as a courtesy.

A simple file with some basic IE7 CSS fixes. IE7 is not officially supported, but this will make the site more usable for IE7 users anyway. It is only loaded for IE7 users.

JavaScript

agility.js

This is the main jQuery functionality for the site. It handles:

Loading the Flex Slider
Controlling the Drop Panel
Initiates PrettyPhoto
Sets up the Mobile Menu
Handles image sizing in IE
Preloads images
Loads Google Maps
Loads recent Tweets

It also contains the imgSize script and a preloader script.

jquery.min.js

jQuery 1.6.2 javascript library. Loaded from Google CDN.

tabs.js

Do Not Edit

Contains code for activating tabs.

prettyPhoto.js

Do Not Edit

A flexible jQuery lightbox.

jquery.flexslider.js

Do Not Edit

Fully responsive jQuery slider.

AJAX Contact Form - jquery.jigowatt.js

Do Not Edit unless you are proficient with javascript and understand AJAX.

AJAX Contact Form script loaded from ajaxcontact/js/jquery.jigowatt.js

fix-ie.js

Helps make Internet Explorer act like a modern browser. (Loaded remotely)

Google Maps API

Embed Google Maps in your own web pages. (Loaded remotely)

Twitter JS

Loads latest Tweets. (Loaded remotely)

Frequently Asked Questions

The FAQ section will be expanded online as common requests come in.

My site can't pinch and zoom on mobile devices. How can I allow that?

Part of the purpose of the responsive site is to not have to zoom. In order to best display the capabilities of the template, zooming is disabled by default. To enable it, just change the maximum-scale value of the viewport meta in the site header.