<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>TimeZone Installation &amp; Setup</title>

	<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>

	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/custom.css">
	<link rel="stylesheet" type="text/css" href="css/timezone.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<!--[if IE 7]>
		<link rel="stylesheet" type="text/css" href="css/font-awesome-ie7.min.css">
	<![endif]-->
	<!--[if lt IE 9]>
		<script type="text/javascript" src="js/html5shiv.js"></script>
		<script type="text/javascript" src="js/respond.js"></script>
	<![endif]-->
</head>

<body id="top">
<div id="wrap">
	<div class="page">
		<div class="navbar navbar-default" role="navigation">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>

			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="http://jennperrin.com/envato/timezone" target="_blank">Live Demo</a></li>
					<li><a href="http://goo.gl/HqQ4dR">Download</a></li>
				</ul>
			</div>
		</div>

		<header class="clearfix">
			<div class="inner">
				<div class="row">
					<div class="col-md-8">
						<h1>
							TimeZone
							<span>Employee Management &amp; Time Tracking</span>
						</h1>
					</div>
					<div class="col-md-4">
						<div class="userInfo">
							<p class="textRight">
								Installation &amp; Setup
							</p>
						</div>
					</div>
				</div>
			</div>
		</header>

		<div class="wrapper">
			<div class="row">
				<div class="col-md-6">
					<div class="panel panel-default">
						<div class="panel-heading">
							TimeZone Employee Management & Time Tracking<span class="floatRight">January 2014</span>
						</div>
						<div class="panel-body">
							<p class="lead">
								Thank you for purchasing TimeZone.<br />
								<small>
									If you have any questions that are beyond the scope of this help file, please do not hesitate to email me via my <a href="http://codecanyon.net/user/Luminary">Code Canyon Profile</a>.
									I am always happy to help if you have any questions relating to Reside.
								</small>
							</p>
							<p>
								<small>
									For the latest version of this document, please visit the <a href="http://jennperrin.com/envato/online_docs/timezone">Online Version</a>.
								</small>
							</p>
						</div>
					</div>

				</div>
				<div class="col-md-6">
					<div class="list-group">
						<li class="list-group-item primary">Table of Contents</li>
						<a href="#preinstallation" class="list-group-item">A. Pre-installation</a>
						<a href="#installation" class="list-group-item">B. Installation</a>
						<a href="#settings" class="list-group-item">C. Settings &mdash; Explained</a>
						<a href="#localization" class="list-group-item">D. Localization</a>
						<a href="#advanced" class="list-group-item">E. Advanced &mdash; Custom Styling</a>
						<a href="#support" class="list-group-item">F. Help &amp; Support</a>
						<a href="#ftp" class="list-group-item">G. A Note About FTP</a>
					</div>
				</div>
			</div>
		</div>
		
		<div class="wrapper">
			<h3 id="preinstallation">A. Pre-Installation<span class="floatRight"><a href="#top"><i class="icon-arrow-up"></i></a></span></h3>
			<h4>1. Unzip TimeZone and have a look around.</h4>
			<p>Unzip the TimeZone file and take a look at the file structure. You should see 8 folders and 2 files.</p>
			
			<h4>2. Create a Database.</h4>
			<p>
				First step is to create a MySQL database, and if you do not have a default one, a database user. This process is explained in great detail on many websites and web hosts.
				Once you have the database set-up, you will need:
			</p>
			<ul class="list-group">
				<li class="list-group-item">The hostname <span class="floatRight"><small>almost always "localhost"</small></span></li>
				<li class="list-group-item">The database name <span class="floatRight"><small>ie. timezone</small></span></li>
				<li class="list-group-item">The database username <span class="floatRight"><small>ie: database_user</small></span></li>
				<li class="list-group-item">The database password  <span class="floatRight"><small>ie: database_password.</small></span></li>
			</ul>

			<h4>3. Upload TimeZone</h4>
			<p>Upload all the files you unzipped to your webhost, keeping the file system intact.</p>

			<div class="alertMsg warning">
				<i class="icon-warning-sign"></i> Be sure to cmod the avatars &amp; the uploads folders to 755
			</div>

			<p class="padTop">You should now have the following folders/files on your host account:</p>
			<p><img src="images/one.png" class="imgFrame" /></p>
		</div>
		
		<div class="wrapper">
			<h3 id="installation">B. Installation<span class="floatRight"><a href="#top"><i class="icon-arrow-up"></i></a></span></h3>
			<h4>Run the Online Setup Wizard</h4>
			<p>Installation is quite easy and only takes a few minutes.</p>
			<p>
				Once TimeZone has finished uploading, simply go to http://www.yoursite.com/timezone/ (or wherever subfolder you uploaded it to) and follow the on-screen instructions.<br />
				Easy to do, just follow the defaults and plug in your specific information.
			</p>

			<h4>1. Database Configuration &amp; Time Zone</h4>

			<ul class="list-group">
				<li class="list-group-item">Hostname <span class="floatRight"><small>On most web hosts this usually defaults to "localhost"</small></span></li>
				<li class="list-group-item">Database Username <span class="floatRight"><small>Your username to access the database</small></span></li>
				<li class="list-group-item">Database Password <span class="floatRight"><small>Your database password</small></span></li>
				<li class="list-group-item">Database Name <span class="floatRight"><small>The name of the database you plan to install TimeZone to</small></span></li>
				<li class="list-group-item">Select Time Zone <span class="floatRight"><small>Select your Time Zone from the dropdown</small></span></li>
			</ul>
			<p>
				Once you have input your database information, click on the "On to Step 2" button.<br />
				If you run into any errors here, simply delete the config.php file from the folder you uploaded TimeZone to, and try again.
			</p>

			<p><img src="images/two.png" class="imgFrame" /></p>
			<p>If everything was configured correctly, you will see the following:</p>
			<p><img src="images/three.png" class="imgFrame" /></p>

			<h4>2. TimeZone Settings</h4>
			<p>
				Again, follow the defaults and plug in your site's specific information. You can set your Administrator password and Site name to be anything you would like. Once completed, be sure to hit
				"On to Step 3" to save your settings.
			</p>

			<div class="alertMsg info">
				<i class="icon-info-sign"></i> Installation URL:</strong> This should be auto-filled for you*.
			</div>

			<p class="padTop">
				*If the Installation URL is not auto-filled, you will need to enter it manually.<br />
				This is needed for email notifications. Include any sub-folder TimeZone may be installed in. (ie. http://www.mydomain.com/timezone/)<br />
				Look at your browser's URL bar, and use that (remove the install/install.php from the end) as your Installation URL.
			</p>
			<p>
				If you have any questions on this, please do not hesitate to email me via my <a href="http://codecanyon.net/user/Luminary">Code Canyon Profile</a>.
			</p>

			<h4>3. The Primary Admin Account</h4>
			<p>
				Complete the Primary Admin Account form. This is the main, "Superuser" for TimeZone. This Admin Account cannot be deleted through the web UI, only from within the database (ie. PHPMyAdmin).<br />
				Once you have filled in the information for the Primary Admin, click the "Complete Install" button to complete the installation.
			</p>
			<p><img src="images/four.png" class="imgFrame" /></p>

			<p>Once installation is completed, you will need to go back into your FTP application, and either rename or delete the installation folder on your webhost before you can log in as Administrator.</p>
			<div class="alertMsg warning">
				<i class="icon-warning-sign"></i> For security reasons and to stop any possible re-installations please, DELETE or RENAME the "install" folder, otherwise you will not be able to log in as Administrator.
			</div>
		</div>
		
		<div class="wrapper">
			<h3 id="settings">C. Settings &mdash; Explained<span class="floatRight"><a href="#top"><i class="icon-arrow-up"></i></a></span></h3>
			<h4>1. Settings</h4>
			<p>Once TimeZone is installed, you can update the Site Settings after logging in as the Primary Admin. Go to Site Settings page from the Manage dropdown menu.</p>
			<p><img src="images/five.png" class="imgFrame" /></p>
			
			<p>
				All Sensitive Employee data is encrypted in the database.<br />
				Personal Information Fields include Social Security Number (SSN) and Date of Birth (DOB) to be available for use by Managers & Admins Only.
			</p>

			<ul class="list-group padTop">
				<li class="list-group-item primary">Global Site Settings</li>
				<li class="list-group-item">Installation URL <span class="floatRight"><small>Used in all File Uploads & email notifications. Must include the trailing slash (ie. http://mysite.com/timezone/).</small></span></li>
				<li class="list-group-item">Site Name <span class="floatRight"><small>ie. TimeZone (Appears at the top of the browser, the header logo, in the footer and in other headings throughout the site).</small></span></li>
				<li class="list-group-item">Site Email <span class="floatRight"><small>Used in email notifications as the "from/reply to" email address.</small></span></li>
				<li class="list-group-item">Avatar Upload Directory <span class="floatRight"><small>Where all Avatars upload to. Must include the trailing slash.</small></span></li>
				<li class="list-group-item">Avatar File Types Allowed <span class="floatRight"><small>The file types you allow to be uploaded, NO spaces & each separated by a comma. (Format: jpg,jpeg,png)</small></span></li>
				<li class="list-group-item">Localization <span class="floatRight"><small>Choose the Language file to use throughout TimeZone. All Localization files need to be translated from English.</small></span></li>
				<li class="list-group-item">Use Personal Information Fields <span class="floatRight"><small>Set to No to hide all PII (Personally Identifiable Information) Fields.</small></span></li>
			</ul>
			<div class="alertMsg info">
				<i class="icon-info-sign"></i> If you change the name of the Avatar folder, be sure you also update the Site Settings to reflect that change. Otherwise, Uploading will not work.
			</div>
		</div>
		
		<div class="wrapper">
			<h3 id="localization">D. Localization<span class="floatRight"><a href="#top"><i class="icon-arrow-up"></i></a></span></h3>
			<p>
				TimeZone is translation ready. All Localization files are located in the folder named "language".<br />
				Any language files you may want to use will need to be translated from English.
			</p>
			<p><img src="images/six.png" class="imgFrame" /></p>

			<p>
				You will also need to translate 2 class files &mdash; calendar.class.php &amp; pagination.class.php located in the /includes folder. It is just a few lines of text that is hard-coded in these files.<br />
				If you have any questions on this, please do not hesitate to email me via my <a href="http://codecanyon.net/user/Luminary">Code Canyon Profile</a>.
			</p>
			<p><img src="images/seven.png" class="imgFrame" /></p>
		</div>
		
		<div class="wrapper">
			<h3 id="advanced">E. Advanced &mdash; Custom Styling<span class="floatRight"><a href="#top"><i class="icon-arrow-up"></i></a></span></h3>
			<h4>1. Custom Styling</h4>
			<p>
				While TimeZone already has a modern flat interface based on <a href="http://getbootstrap.com/" target="_blank">Twitter's Bootstrap</a>, many of you will want to integrate it into your own design. This is very
				easy, however, you will need to be able to write HTML/CSS code. For those that aren't versed, here is a quick overview. The easiest way to change the look is by editing the default CSS files named "timezone.css"
				and "custom.css". Next is to edit the page files, located in the "pages" folder.
			</p>

			<h4>2. Images</h4>
			<p>
				TimeZone does not use any images.<br />
				All icons are generated from an Icon Font: Font Awesome (version 3.2). Check out all of Font Awesome's icons &amp; usage at:<br />
				<a href="http://fontawesome.io/">http://fontawesome.io</a>.
			</p>
			<p>Icons &amp; Images can be changed to your liking.</p>
		</div>
		
		<div class="wrapper">
			<h3 id="support">F. Help &amp; Support<span class="floatRight"><a href="#top"><i class="icon-arrow-up"></i></a></span></h3>
			<p>
				Please, if you have any questions, run into any issues or just need some help, do not hesitate to <a href="http://codecanyon.net/user/Luminary">contact me</a>.<br />
				I believe in providing the best support possible, and I monitor my email just about 24/7.
			</p>
			<p>
				If you are thinking of giving TimeZone anything less then 5 Stars, please tell me what I can do to make it a 5 Star experience for you.<br />
				I love to hear feedback, and welcome any suggestions you may have to make TimeZone better.
			</p>
			<p><img src="images/rating.png" class="imgFrame" /></p>
		</div>
		
		<div class="wrapper">
			<h3 id="ftp">G. A Note About FTP<span class="floatRight"><a href="#top"><i class="icon-arrow-up"></i></a></span></h3>
			<p>
				If you are having problems with TimeZone after successfully installing and logging in the for the first time you should check your FTP software settings.
				I have found in many cases that numerous FTP programs are not uploading files correctly.
			</p>
			<p>
				Check your FTP program to see if it is uploading files in ASCII - which is causing the file code to be uploaded in one long line.<br />
				Try changing it to Binary and uploading the files again. Upload everything except the install folder and the config file (or better yet, if you have not started using TimeZone,
				just wipe the install and the database and reinstall a fresh copy).<br />
				I use <a href="http://www.cuteftp.com">CuteFTP</a> for my uploads and ran into this problem a few months ago when all of the sudden everything I was working on just seemed to stop working as expected.
			</p>
			<p><img src="images/ftp.png" class="imgFrame" /></p>
		</div>
		
		<div class="footer">
			<small>
				© 2014 TimeZone Employee Management &amp; Time Tracking
				<span>&middot;</span>
				Created by <a href="http://codecanyon.net/user/Luminary?ref=Luminary" target="_blank">Luminary on Code Canyon</a>
			</small>
		</div>

	</div>
</div>

</body>
</html>