Prepare for Launch

Under Construction Page

• Created: 01/27/2011
• latest Update: 02/27/2012
• By: Xaver Birsak
• rxa.li/prepare
• Email: support@revaxarts.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 start a discussion at my support forum. Thanks so much!

Quickstart

It's very simple to get the template running. All required files are in every version so you can delete unused. Here are the required steps:

1. select your desired version
2. open the 'config.php' file within the folder for server side options
3. enter the domain where everyone can reach your site
4. enter your email address
5. open the 'config.js' file within the 'js' folder for client side options
6. set the 'targetDate' to a date in the future (format is dd/mm/yyyy hh:mm:ss GMT)
7. set the 'currentState' option to your specific amount (percentage)
8. for further infos on the config.js go here
9. upload your files

Saving emails within a CSV

1. open the 'config.php' file
2. set 'safecsv' to 'true'
3. choose a unique name for the css file

Useing Mailchimp or CampaignMonitor

Please follow the instructions at 'How to Setup Mailchimp/CampaignMonitor'

Change Logo and Text

Changing the Logo

To change the Logo just replace the 'logo.png' within the 'img' folder with yours. Make sure it's not bigger than 180x150 pixels

Change the Text

All static texts can be modified within the 'index.html'.

Some dynamic texts can be edited in the config.js file

How to Setup Mailchimp/CampaignMonitor

How to get subscribers in a Mailchimp list

The template is prepared for Mailchimp lists. All you have to do is to set some login information:

1. Login or create a Mailchimp account
2. get an API key
3. copy and paste the key into the config.php file
4. now go back to Mailchimp and choose or create a list where the subscribers should get listed
5. Go to 'settings' › 'list settings and unique id'
6. Grab the 'unique id' at the bottom of the page
7. paste it into the 'config.php'
8. activate Mailchimp

How to get subscribers in a CampaignMonitor list

The template is prepared for CampaignMonitor lists. All you have to do is to set some login information:

1. Login or create a Campaingmonitor account
2. Got 'Account Settings' and grab your API key at the bottom
3. paste the key into the config.php file
4. now go back to CampaignMonitor and got to 'Clients' and select your first client in the List (you)
5. Go to 'Lists & Subscribers' and create or edit a list
6. Go to 'change name/type' and copy the 'API Subscriber List ID' at the bottom
7. paste it into the 'config.php'
8. activate CampaignMonitor

Version Overview

Here you see all versions, which are included in this template

version 1	version 9
version 2	version 10
version 3	version 11
version 4	version 12
version 5	version 13
version 6	version 14
version 7	version 15
version 8	version 16

HTML Structure

This template is a fixed layout with one column. All of the information is nested within a div with an id of "wrap". The content is within a div with an id of 'content'. The Logo is within an 'a' tag.

Here is the general structure (shortened):

<div id="content">
	<h1>we are under construction</h1>
	<div id="home" class="slide">
		<h2>...</h2>

		<!-- countdown start -->
		<section id="countdown">
		...
		</section>
		<!-- countdown end -->

		<!-- progress bar start -->
		<section id="progess">
		...
		</section>
		<!-- progress bar end -->

		<!-- email subscription start -->
		<h4 id="emailstatus">...</h4>
		<form id="emailform">
		...	
		</form>
		<!-- email subscription end -->

		</div><!-- end div #home -->

	<div id="about" class="slide">

		<!-- about start -->
		...
		<!-- about end -->

	</div><!-- end div #about -->


	<div id="contact" class="slide">

		<!-- contact start -->
		...
		<!-- contact end -->

	</div><!-- end div #contact -->

</div>

There are four section:

• Countdown
• Progress Bar
• Email Subscription
• About
• Contactform

CSS Files and Structure

JavaScript

This theme imports five Javascript files.

1. jQuery
2. Cufon Font Replacement
3. Champagne & Limousines as font
4. the config.js
5. My custom scripts

1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
2. Cufon Font Replacements is a way to implement font for all major browsers. All the replaced fonts stay readable for search engines
3. The config.js:
   • the params object where all settings are defined:

     
     var params = {
         
         //Progressbar
         //set the current stat in % (0-100)
         currentState: 77,
         //set the Date to a GMT/UTC
         //format: mm/dd/yyyy hh:mm:ss GMT
         startDate: '01/01/2011 00:00:00 GMT',
         //startDate: false,
         //format: mm/dd/yyyy hh:mm:ss GMT
         targetDate: '12/31/2011 23:59:59 GMT',
         
         //redirect when targetDate is reached (a url like http://www.google.com)
         redirectto: '',
         
         //increase for slower progressbar animation
         steps: 150,
         
         //Some dynamic text can be modified here
         texts: {
             emailstatus: 'enter your email to subscribe',
             emailinvalid: 'oops, it seems your email address is not valid!',
             emailok: 'ok, your email looks fine, click submit!',
             emailwait: 'please wait...',
             emailadded: "thanks, we got you! we will email you on launch",
             emailaddfail: "oops, it seems there is something wrong! please try again later!",
             contactforminvalid: 'please provide all fields!',
             contactformwait: 'please wait...',
             contactformadded: "thanks for your interest! we will contact you soon!",
             contactformaddfail: "oops, it seems there is something wrong! please try again later!",
             days:'days',
             day:'day',
             hours:'hours',
             hour:'hour',
             minutes:'minutes',
             minute:'minute',
             seconds:'seconds',
             second:'second'
         }
     };
     
     

     (In the demo are some random values which should get deleted!)
   • The custom scripts contain all the Javascript action of the page:
     • Countdown
     • Progress Bar
     • Email Subscription
     • Contact
     each section is enclosed with something like this:

     
      /* COUNTDOWN SECTION START
       *
       * This part for the Countdown */ 
     
     some code
     
      /* COUNTDOWN SECTION END */ 
     

PSD/PNG Files

I've included several psds and pngs with this template (png_psd.zip). All pngs are made with fireworks

For each version you get:

1. screendesign##.psd
2. screendesign##.png

The screendesign##.psd and screendesign##.png are layered designs of the template (where '##' stands vor the version number)

PHP Code Explanation

Some server side action is required for the email subscription and the contact form.

The server side part is quite small. There are only three files:

• config.php stores some configuration settings
• register.php handles the subscription progress
• contact.php handles the contactform progress

The config.php is well documented and intuitive to modify

You don't have to edit the 'register.php' or the 'contact.php'

Sources and Credits

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

• Champagne & Limousines dafont.com

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. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Xaver Birsak – revaxarts.com