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!
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:
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.
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:
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.
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.
This theme imports four Javascript files.
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.
The whole template is based mainly on PHP code. There are three core PHP files.
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:
Thanks to XML format you can use gathered data easily in numerous applications for research, statistics or marketing purposes.
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.
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:
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.
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!
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