Table of Contents
A. Files Structure - top
InTime template has three versions - "Image", "Image slider" and "YouTube video". The files of each version are located in the separate sub-folder within template folder.
1. HTML Files and Structure
index.html is the main template file that contains the HTML structure of the template. Here is the general structure (shortened):
2. PHP Files and Structure
subscribe.php is the template file that contains the PHP code to handle the newsletter form submission.
3. CSS Files and Structure
All CSS files can be found in the template’s css folder. Here's the list of the files used within the template and a short descriptions of their function:
style.css- the main CSS file that includes all template styles and formatting.ie.css- includes Internet Explorer specific styles.
4. JavaScript Files and Structure
This template uses JavaScript to enhance the user’s experience. All JavaScript files can be found in the template’s js folder. Here's the list of the files used within the template and a short descriptions of their function:
modernizr.custom.js- detects HTML5 and CSS3 features in the user’s browser.jquery-1.10.2.min.js- a JavaScript library.plugins.js- includes all jQuery plugins used within the template.scripts.js- includes newsletter form validation, modal page toggle and other custom JavaScript.
B. Template Versions - top
InTime template has three versions:
- "Image" - adds fullscreen image to the background.
- "Image slider" - adds fullscreen image slider to the background.
- "YouTube video" - adds YouTube video to the background.
C. Customization - top
Select your desired version and make the following changes.
1. Replace Logo
To change the logo replace the logo.png located in the template's images folder with yours. Then edit width and height attributes of the <img> tag to match your logo image dimensions in index.html file (line 25).
<h1 class="site-title fade-in"><img src="images/logo.png" width="..." height="..." alt="Your Alternative Text" /></h1>If you don't want to use a logo, simply remove <img> tag and add site title instead:
<h1 class="site-title fade-in">Your Title</h1>2. Edit Text
All static texts can be modified within the index.html file. For example, to change the text "Our Website Is Almost Ready" open index.html and edit text between <h1 class="section-title"></h1> tags on line 31.
3. Change Site Launch Date
To change the launch date of your site open scripts.js file within the js folder and edit the date on line 22:
var launchDay = new Date(2014, 5-1, 7);The first integer value represents the year, the second integer value represents the month and the third integer value represents the day of the month.
Important! The month ranges from 0 to 11. Specify the month from 1 to 12 and manually subtract the 1.
4. Replace Background Images (for "Image" or "Image Slider" Version)
You can find all images used for the background within the images folder. Replace those images with yours and if necessary change their names respectively in the scripts.js file on line 28 for "Image" version or lines 29-31 for "Image slider" version.
5. Change Background Video (for "YouTube Video" Version)
To change the background YouTube video edit the videoURL parameter value of the data-property attribute in the index.html file on line 115.
<a id="bg-video" data-property="{videoURL:'http://youtu.be/ab0TSkLe-E0', containment:'body', autoPlay:true, mute:true, startAt:0, showControls:false}" data-poster="images/poster.jpg"></a>Since the video player falls back to the poster image on mobile devices, you need to update poster image as well. Make the screenshot of your video and replace the default poster image located in the template's images folder.
6. Change the Email Address for Newsletter Form
Make sure that you change the default email address example@example.com to your own in subscribe.php file (line 16) to receive emails when the newsletter form is submitted.
7. Add Links to Social Network Profiles
To add links to your social network profiles open index.html file and edit lines 54-58. You may use any of the following social icons:
D. Upload - top
After you have made all necessary changes, upload the content of your selected version folder to your web hosting server using FTP client or File Manager (or similar) utility provided by the web hosting company.
E. Credits - top
We have used the following scripts, fonts or other files as listed.
- jQuery 1.10.2 library: http://jquery.com
- Custom Modernizr library: http://modernizr.com/
- jQuery Backstretch plugin: http://srobbin.com/jquery-plugins/backstretch/
- jQuery Countdown plugin: http://keith-wood.name/countdown.html
- jQuery Placeholder plugin: http://mths.be/placeholder
- jQuery Validation plugin: http://jqueryvalidation.org/
- jQuery mb.YTPlayer plugin: http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer/
- Open Sans Font: http://www.google.com/fonts/specimen/Open+Sans
- Roboto Slab Font: http://www.google.com/fonts/specimen/Roboto+Slab
- Entypo icons: http://www.entypo.com/
- Photos (free of copyright restrictions): http://unsplash.com/
Once again, thank you so much for purchasing this template! Please feel free to email us if you have any questions or just want to make some suggestions.
Just Good Themes