Xenon Countdown — Fullscreen “Coming Soon” Page

Name: Xenon Countdown
Version: 1.0
Created: February 2013
By: IronTemplates
[email protected]

Thank you for purchasing our template. If you need support or have any questions, you can contact us via our ThemeForest profile page.

Intro

Here's a modern and interactive coming soon template that you can easily and rapidly customize. While your site or product is underway, use the included newsletter form to collect prospective customers and visitors. The template is ready-to-go and has features cool jQuery animations, full screen photo or video of your choice. You can easily embed a YouTube video and you're all set. If you're looking for something different and trendy, that's your top choice.

HTML Structure

Presets

You can choose between the photo or video preset scheme by including the appropriate CSS file within the index.html file
Look for photo.css. You can switch between photo.css, video.css, custom.css
The css takes care of the colors and the background image.

You can use the custom.css and modify it to your needs.

Note 1:
If you choose the video preset, make sure to add the Youtube video ID into the index.html file.
Look for data-videoid="" and insert the ID between the quotation marks.

A Youtube Video ID has 11 characters and looks similar to this: JF8BRvqGCNs
You can find the Youtube Video ID at the end of a Youtube URL:
ex: http://www.youtube.com/watch?v=JF8BRvqGCNs

Video Options:
data-start="2" Here you can set the starting position in seconds
data-mute="true" You can Mute or Unmute [true/false]
data-repeat="true" Repeat Mode [true/false]
data-volume="60" Volume Between 1 - 100. Increment by 10.

Note 2:
You can set your logo accordingly between logo_light.png and logo_dark.png within the index.html file.
Look for Set your logo

Note 3:
The video will not work on iPhones or iPads. The background image set in the CSS file will be loaded instead.

Show / Hide Header

If you would like to hide the top header, all you need to do is add the no-header class to the body tag.

Find this: <body class="">
Add the "no-header" class within the quotes: <body class="no-header">

Show / Hide Countdown

If you would like to hide the countdown, all you need to do is add the no-countdown class to the body tag.

Find this: <body class="">
Add the "no-countdown" class within the quotes: <body class="no-countdown">

Widgets

Countdown

By default, the countdown launch date is set to 15 days ahead from now.
You will need to edit the index.html file. Search for id="countdown" and enter a date-time / and date-timezone value for your launch date.
Ex: <div id="countdown" data-time="2013/12/25 23:59:59" data-timezone=""></div>
The date-time value should always have the format above. YYYY/MM/DD h:m:s

You can also set the time zone offset from GMT either as hours or minutes.
Ex: To target a time in Americas / Los Angeles, you would set it in date-timezone="-8"

Newsletter

The newsletter subscription form requires MySQL and PHP with PDO support. You will need the /scripts/subscription.php file.

You can configure the script’s access to your MySQL database on line 7 of the /scripts/subscription.php file.
To view stored subscribers, you can use a database administration application like phpMyAdmin.

If you have a MailChimp account, you can easily integrate this service using the /scripts/mailchimp/subscription.php file. Don’t forget to add your account info on lines 7 and 11 and then move the 2 files from /scripts/mailchimp/ to /scripts/. This will replace the regular subscription.php file.

Twitter Feed

Make sure to edit the file index.html Find data-tweetuser="" and insert the username value to your twitter account.

The new Twitter API version requires an API key for authentication. You will need to create a twitter app to obtain these keys.
Follow this link and create your app. https://dev.twitter.com/apps

Once you have created your app, you will need to edit the /js/twitter/index.php file.
Enter the required keys at the top of the file.

Also make sure that the js/twitter/cache/ folder has read-write permissions

Write Us

The Write Us form requires PHP support. You will need the /scripts/writeus.php file.

You have to set your admin e-mail address on line 6 in /scripts/writeus.php.

Google Analytics

We have inserted the google analytics code within the index.html file.

All you have to do is to search for google_analytics_id and set your own ID.

Design and Graphics

This template was created using Adobe Photoshop CS5. The PSD file is located in the /PSD folder.

The fonts used is Open Sans and Oswald from Google Web Fonts. and Ostrich Sans Medium from fonts2u.com

Credits

Thank you again for purchasing our template. Feel free to contact us if you have any questions or concerns.

IronTemplates.com