“Appena” Documentation by “Nathan Brown” v1.0

Appena Coming Soon Page - shared on weidea.net

Created: 4/15/2013
By: Nathan Brown
Email: nathan@room122.com

Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email me.

Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. Sources and Credits

A) HTML Structure - top

This one page "Coming Soon" template is easy to edit. Below I'll break down the main HTML elements.

- Two Versions

The download includes two versions. One is a plain HTML file, and the other contains a working PHP contact form. PHP must be enabled on your server in order for this version to work. Most hosting plans include PHP.

- Full Screen Background Slideshow

The slide show images can be edited by changing the source attribute of the image tag to the location of the image you would like to use for the slide. For best results use an image that is of good quality resolution and size.

- Site Logo

The site logo for the demo is a font, but you can easily add an image logo byremoving the "Appena" text and adding an image tag in the same location.

- Social Media Links

The social media links are easy to update. Simply add the link to your social profile in place of the "#" in the href tag for each link.

- Countdown

To edit the date that the counter is counting down to, open custom.js from the JS directory. Uncomment line 19, and edit the date. Then comment out or remove line 20. That line is providing the date for the demo.

- Page Content

The demo includes three pages in addition to the home page content. The pages are broken into columns of content.

In order for the navigation to work you must match the ID in the content section to the anchor in the navigation link.

- Contact Form

The contact form in the PHP version is easily edited to send to any email you choose, by editing the PHP code at the top of the page.

 

B) CSS Files and Structure - top

The CSS files included in the download are:

Styles.css is probably the file you are most likely to edit if you are changing the look of the page. The file is commented and broken into section. For example:

 

C) JavaScript - top

This template imports eight javascript files.

  1. custom.js - This file includes custom JS and calls to plugins.
  2. jquery.ba-hashchange.js - Enables hashtag navigation in the browser address bar.
  3. jquery.countdown.js - This file provides the "countdown to launch" at the top of the page.
  4. jquery.cycle.all.js - This file is used in the MaxImage plugin slide show.
  5. jquery.easing.min.js - jQuery easing plugin for animations
  6. jquery.fullscreen.js - Sets or gets the fullscreen state.
  7. jquery.maximage.js - Fullscreen Slideshow for use with jQuery Cycle Plugin
  8. modernizr.js - jQuery Modernizr plugin

 

D) Sources and Credits - top

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

The images used in the online demo are from Flickr:

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme.

Best!
Nathan Brown

Go To Table of Contents