“Chronos Under Construction Template” Documentation by “Wojtek Zeglin” v1.0


“Chronos”

Created: 06/01/2011
By: Wojtek Zeglin
Email: wojtek@zeglin.co.uk

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. PHP Code Explanation
  5. XML File
  6. PSD File
  7. Wordpress Theme
  8. Sources and Credits

A) HTML Structure - top

First of all - a few words of introduction on how the template structure looks like. It is divided into four main parts:

The above can be visualised by the following image:

block structure

Pic.1. - Visualisation of HTML structure

Let me carefully go through all the files included in your ZIP archive and explain what each of them does. Also, i will tell you should you have any interest in modifying their content.

This is how the main template file, index.php looks like. Each line is numbered to make it easier for you to find the code we will be discussing. Please scroll down to read the explanation.

index.php file content

Let us skip first 28 lines for now. This is PHP code and it will be discussed later. We will start from lines 29-32, which contain standard HTML document declarations. Line 33 is the page title line. You can notice a small portion of PHP there, between <title> and </title> tags. This PHP reads variable values from config.php file and displays it to site visitors. Variables in config.php file are your main tool to control how your website looks like. It is described more extensive in Installation.txt file which you can also find in the ZIP file you recieved.

Lines 34 to 49 contain Cascading Style Sheets declarations. The CSS files will be discussed further in section B of this document.

Lines 50 to 74 contain JavaScript declarations. Please refer to section C of this document to find more information about JavaScript files

Now, after <body> tag we have four main HTML blocks (see Pic.1 above). HEADER (lines 81 - 87), COUNTDOWN (lines 89 - 92), BOTTOM LEFT (lines 94 - 111) and BOTTOM RIGHT (lines 113 - 145). You probably won't need to modify any code inside index.php file, unless you need some really advanced customization.

The most important things to know are:

 


B) CSS Files and Structure - top

Lines 34 to 49 of index.php file contain CSS files declarations. The main CSS file is chronos.css, and you can see it's content below.

css structure

chronos.css file is divided into four sections and is reflecting the structure of index.php file.

If you need to edit any classes, just find the div in index.php file, check the class name and then look for it in css/chronos.css file.

There are also several other files used in this template:

These are to fix some visual redering bugs across various browsers. If you modify anything in main chronos.css file make sure you check for the classes in the above files too and adjust the code accordingly.

 


C) JavaScript - top

This theme imports four Javascript files.

  1. jQuery
  2. jQuery countdown script
  3. jQuery validate pack
  4. custom chronos.js with a function which controls displaying the countdown digits
  5. IE7.js, IE8.js, IE9.js
  1. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. You can find more information about it on http://www.jquery.com page
  2. The countdown script is commented inside jquery.countdown.js file. Please refer to it if you need any information about how does it work or visit http://keith-wood.name/countdown.html
  3. jQuery validate pack makes sure that all email addresses used to signing up for the newsletter are correct, i.e. have "at" sign and an existing top level domain
  4. chronos.js file controls how the countdown digits are displayed
    js structure

    The secondsStr variable is passed by PHP from index.php file (lines 70 - 74). This variable tells the script what is the launch date, to display correct digit values on the main page.
  5. IE7.js, IE8.js and IE9.js files make sure that Internet Explorer browsers behave like standard compliant browsers

Lines 54 to 69 of index.php is a function connected with jQuery validate pack. It displays error or success message after visitor enters the email address into the input field and clicks submit.

 


D) PHP Code Explanation - top

The whole template is based mainly on PHP code. There are three core PHP files.

  1. index.php
  2. config.php
  3. functions.php
  1. This file was preliminary described in section A of this document. It is a mix of HTML and PHP. Line 3 imports all functions and settings via functions.php file. Lines 8 to 27 serve as email address validation after the signup button of newsletter form is pressed and also sends a confirmation email to the supplied address. The rest of PHP code inside this file are mostly includes from the config.php and error/success message handling between lines 125 and 135.
  2. This is the file you will want to work with the most. You can modify quite a lot by changing the settings. It is very well commented, so open it in your favourite editor and adjust the values until you are satisfied. Refer to Installation.txt file for more information.
  3. This file is an important part of the template as it handles various events on the server side and imports variables from config.php. It calculates how much time is remaining to the launch date (this value is then passed to chronos.js file), it fetches and decodes latest twitter feed, inserts visitors email addresses into database or into a flat xml file. All four sections are named and commented so you should find the relevant code easily. xml php function

    If you would like to store your XML file somewhere else on the server, please modify $xmlfile variable value and replace emails.xml with appropriate path and filename.

 


E) XML File - top

Chronos template stores emails of those visitors who decide to sign up for newsletter, along with their IP addresses and time of visit. The XML file structure looks like the following:

xml structure

Thanks to XML format you can use gathered data easily in numerous applications for research, statistics or marketing purposes.

 


F) PSD File - top

There's a file called design.psd included with this template. If you wish to modify anything, simply open it in Photoshop and edit the parts that you need. This file makes it very easy to create custom backgrounds, change social icons, twitter feed background and even the numbers itself.

For your information, most important graphic files used by the template are:

If you need to update any of the above, use design.psd file as a helpful resource.

 


G) Wordpress Theme - top

As an additional feature, this product can be installed and used as a WordPress theme. Wordpress is one of the most popular content management systems nowadays. If you have no knowledge of PHP or HTML it is probably better if you use WordPress environment. You won't have to edit any configuration files - all settings can be modified by using your mouse only.

Nevertheless i will describe Wordpress plugin file structure for those of you who need to customize it or simply want to know more. I am assuming that you already have the knowledge necessary to use Wordpress CMS. If not, please refer to relevant documentation. You can start from visiting Wordpress home page.

Chronos Wordpress Theme has a standard wp theme file structure. In the main directory you will find:

wordpress theme files structure

A custom created /functions folder has two files:

Inside the /css folder files are the same as in regular PHP template. Please refer to section B for more details.

Files inside /js folder are the same as in regular PHP template. Please refer to section C for more details.

Files inside /img folder are the same as in regular PHP template. Please refer to section F for more details.

 

Chronos Wordpress Theme Installation

1) Log in to your WordPress administration panel.

2) Click on Appearance tab on the left, and go to Install Themes. Select Upload and click browse. Find your chronos_wordpress_theme.zip file and select it. Click Install Now.

3) Return to Manage Themes tab and click Activate under the theme's screenshot.

4) You will see a new tab on the left hand side, at the bottom. It's labeled Chronos. Click on it and you will be taken to the Settings Page.

5) Now it's time to modify some settings. It is possible to use this theme as-it-is, without making any changes, but you will probably want to adjust your contact details, replace the logo, etc.

Be sure to change your Site Title and choose different logo first. There's also place for you to enter your own copy, to describe what the site will be about, or update your visitors with latest news about development progress.

To use different logo image prepare a logo file and upload it by clicking Browse button and locating the file. You will get best results if your logo is in 24-bit PNG format (with transparency enabled). Set your logo file alt tag to something meaningful, as this will be shown instead of graphic image for visually impaired readers.

You can also change template's colour scheme to one of eight available themes: blue (which is a default one), black, green, pink, purple, red, seagreen and yellow.

Now you need to specify your Launch Date. The countdown will go towards this date. You need to specify year, month, day of the month, hour, minute and second. The script will automatically calculate the amount of time between current and target dates and display correct values inside the countdown.

You can also choose if you want to display days in two or in three digits format. As default it is set to three digits.

Next thing is setting the progress bar, which indicates how advanced the development is. If you have just started working on getting your site live, it's good to set progress to a low value. The lowest you can put here is 0, the highest is 100.

Now it's time to define some social media links and names. Chronos enables you to include the latest tweet from your twitter account on the page and also place a link to your twitter profile. You can also add your Facebook profile link, or even the RSS feed link. Don't forget to specify the email address that you want to use to receive communication from the site.

If you decide you don't need some of the icons, you can safely turn them off by selecting relevant option from drop down menu.

Now there's time for some more advanced stuff. If you need MySQL integration (which is turned off by default), you need to change Use SQL option to yes. Then simply enter database hostname, name, username and password. From now on Chronos will start adding records to the database. It is smart enough to skip duplicate email addresses, so you don't have to worry about that.

If you don't have access to MySQL database or simply want to store email addresses in a file, there's also option for that - just answer if you want to store data in XML file. It is set to yes by default, which makes sure of storing all the data in emails.xml file in Chronos root folder. You can download that file any time and use the data in any suitable way.

6) After you're done, click Save. Your Under Construction template is ready to start getting traffic!

 


H) Sources and Credits - top

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


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. 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.

Wojtek Zeglin

Go To Table of Contents