Thank you kindly for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to contact me via my ThemeForest profile, i’ll be glad to help out.
To edit the 'Welcome Message', simply find the appropriate label <!-- intro --> in the body of the HTML file named 'index.html'.
Part to edit:
<!-- intro --> <div class="intro-wrapper"> <div class="intro"> <div class="introduction"> <h3>AN EX NIHILO TEMPLATE</h3> <h1>ROADS</h1> <h4>BUILDING A BETTER WAY</h4> </div> </div> </div> <!-- intro end -->
To edit the 'About' page, simply find the appropriate label <!-- about || lower page --> in the body of the HTML file named 'index.html'.
Part to edit:
<!-- intro --> <div class="intro-pages"> <h1>About</h1> </div> <!-- intro end --> <!-- sixteen columns --> <div class="sixteen columns"> <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a> [...]</p> </div> <!-- sixteen columns end --> <!-- flexslider --> <div class="flexslider"> <ul class="slides"> <li><img src="images/flexslider-1.jpg" alt="About"></li> <li><img src="images/flexslider-2.jpg" alt="About"></li> </ul> </div> <!-- flexslider end --> <!-- about column 1 --> <div class="eight columns column"> <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a> [...]</p> </div> <!-- about column 1 end --> <!-- about column 2 --> <div class="eight columns column"> <p>Curabitur gravida, magna id condimentum convallis, <a href="#">nibh odio tristique lorem</a> [...]</p> </div> <!-- about column 2 end -->
To edit the 'Services' page, simply find the appropriate label <!-- services || lower page --> in the body of the HTML file named 'index.html'.
Part to edit:
<!-- intro --> <div class="intro-pages"> <h1>Services</h1> </div> <!-- intro end --> <!-- sixteen columns --> <div class="sixteen columns"> <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a> [...]</p> </div> <!-- sixteen columns end --> <!-- services img column 1 --> <div class="one-third column"> <ul id="sti-menu" class="sti-menu"> <li data-hovercolor="#fff"> <a href="#"> <h2 data-type="mText" class="sti-item">Mobile Friendly</h2> <h3 data-type="sText" class="sti-item">Lorem ipsum dolor sit amet</h3> <span data-type="icon" class="sti-icon sti-icon-mobile sti-item"></span> </a> </li> </ul> </div> <!-- services img column 1 end --> <!-- services img column 2 --> <div class="one-third column"> <ul id="sti-menu-2" class="sti-menu"> <li data-hovercolor="#fff"> <a href="#"> <h2 data-type="mText" class="sti-item">Responsive Layout</h2> <h3 data-type="sText" class="sti-item">Lorem ipsum dolor sit amet</h3> <span data-type="icon" class="sti-icon sti-icon-responsive sti-item"></span> </a> </li> </ul> </div> <!-- services img column 2 end --> <!-- services img column 3 --> <div class="one-third column"> <ul id="sti-menu-3" class="sti-menu"> <li data-hovercolor="#fff"> <a href="#"> <h2 data-type="mText" class="sti-item">Easy to Customize</h2> <h3 data-type="sText" class="sti-item">Lorem ipsum dolor sit amet</h3> <span data-type="icon" class="sti-icon sti-icon-customize sti-item"></span> </a> </li> </ul> </div> <!-- services img column 3 end --> <!-- services column 1 --> <div class="one-third column"> <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a> [...]</p> </div> <!-- services column 1 end --> <!-- services column 2 --> <div class="one-third column"> <p>Curabitur gravida, magna id condimentum convallis, <a href="#">nibh odio tristique lorem</a> [...]</p> </div> <!-- services column 2 end --> <!-- services column 3 --> <div class="one-third column"> <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a> [...]</p> </div> <!-- services column 3 end -->
To edit the 'Contact' page, simply find the appropriate label <!-- contact --> in the body of the HTML file named 'index.html'.
Part to edit:
<!-- contact info column 1 --> <div class="info-address"> <p><strong>Address</strong><br> ex nihilo, Inc.<br> Touchdown Dr<br> 1176</p> </div> <!-- contact info column 1 end --> <!-- contact info column 2 --> <div class="info-phone"> <p><strong>Telephone</strong><br> [00] 11 - 76<br> <strong>Email</strong><br> <a href="mailto:you@yoursite.com">you@yoursite.com</a></p> </div> <!-- contact info column 2 end -->
To edit the real time live 'Twitter Feed', simply find the files named 'roads.js' placed in the folder named 'js'.
Open the file and find the appropriate label '// twitter ticker'.
Replace:
username: "enihilo",
With:
username: "yourtwitterusername",
To link the 'Twitter Logo' to your account, simply find the appropriate label <!-- twitter ticker --> in the body of the HTML file named 'index.html'.
Replace:
<a class="logo" href="https://twitter.com/enihilo" target="_blank">Twitter</a>
With:
<a class="logo" href="https://twitter.com/yourtwitterusername" target="_blank">Twitter</a>
Twitter API 1.1 OAuth authentication process
[Step 1] Setup a Twitter Application
1. Visit https://dev.twitter.com/apps and sign in with your Twitter account username and password
2. Select 'Create a new application' and fill in the application form with the following application details:
- Name: e.g. 'yoursite.com'
- Description: e.g. 'tweet.js-mod'
- Website: e.g. http://www.yoursite.com/
- Callback URL: This field can be left blank
3. Enter the CAPTCHA and click 'Create your Twitter application'
4. Create your access token
5. Make a note of the 'Consumer key', 'Consumer secret', 'Access token' and 'Access token secret'
[Step 2] Authenticate the Twitter Feed
After creating your application, open the file named 'index.php' placed in the folder named 'twitter'.
Open the 'index.php' file and configure it with your OAuth credentials in the assigned slots below:
// Your Twitter App Consumer Key
private $consumer_key = 'YOUR_CONSUMER_KEY';
// Your Twitter App Consumer Secret
private $consumer_secret = 'YOUR_CONSUMER_SECRET';
// Your Twitter App Access Token
private $user_token = 'YOUR_ACCESS_TOKEN';
// Your Twitter App Access Token Secret
private $user_secret = 'YOUR_ACCESS_TOKEN_SECRET';
Save the edited 'index.php' file. Upload the entire 'twitter' folder on your web server.
Please note; The 'twitter' folder [containing: index.php, jquery.tweet.js and the lib files) is designed to be placed in the document root of your website as a whole (e.g. yourdomain.com/twitter), otherwise it will not work.
To edit the 'Google Maps', simply find the appropriate label <!-- map --> in the body of the HTML file named 'index.html'.
Part to edit:
<!-- map --> <div id="map"> <iframe class="map-google" src="https://maps.google.com/maps/ms?msa=0&msid=211966962386664154949.0004e6fcf6a48ede4754f&hl=en&ie=UTF8&t=m&iwloc=0004e6fcfe81051738dcb&ll=48.857981,2.293514&spn=0,0&z=14&output=embed"></iframe> </div> <!-- map end -->
More on Google Maps at: https://developers.google.com/maps/documentation/javascript/
To send the contents of your 'Subscription Form' to your email, simply open the file named 'subscribe.php'.
Your email address goes here:
$myemail = 'you@yoursite.com';
To set the 'Countdown Target Date', simply find the appropriate label <!-- countdown --> at the bottom of the HTML file named 'index.html'.
Edit this section:
date: "23 September 2014 12:00:00",
To add images in the background of the template, simply find the file named 'supersized.3.2.7.bg.js' placed in the folder named 'js'.
Open the file named 'supersized.3.2.7.bg.js'.
Replace:
{image : 'images/background/1.jpg', title : '', thumb : '', url : ''},
{image : 'images/background/2.jpg', title : '', thumb : '', url : ''},
{image : 'images/background/3.jpg', title : '', thumb : '', url : ''},
{image : 'images/background/4.jpg', title : '', thumb : '', url : ''}
With:
{image : 'images/background/your-image-name-1.jpg', title : '', thumb : '', url : ''},
{image : 'images/background/your-image-name-2.jpg', title : '', thumb : '', url : ''},
{image : 'images/background/your-image-name-3.jpg', title : '', thumb : '', url : ''},
{image : 'images/background/your-image-name-4.jpg', title : '', thumb : '', url : ''}
You can use any size for a background image. You can add as many images as you want.
Please note
Demo images are not included. Image placeholders are provided instead.
To add 'YouTube Videos' in the background of the template, simply find the appropriate label <!-- YTPlayer --> in the body of the HTML file named 'index.html'.
Replace:
<!-- YTPlayer -->
<a href="http://www.youtube.com/watch?v=IsLbFY7jG7s" id="bgndVideo" class="player {containment:'body', autoPlay:true, mute:true, startAt:0, opacity:1, loop:true}"></a>
<!-- YTPlayer end -->
With:
<!-- YTPlayer -->
<a href="http://www.youtube.com/watch?v=youryoutubevideouniqueID" id="bgndVideo" class="player {containment:'body', autoPlay:true, mute:true, startAt:0, opacity:1, loop:true}"></a>
<!-- YTPlayer end -->
By default the sound of the video is set mute. To unmute the sound, change 'mute:true' into 'mute:false'.
I will respond to buyers' questions via the contact form on my profile.
Support for my items includes:
Responding to questions or problems regarding the item and its features
Fixing bugs and reported issues
Providing updates to ensure compatibility with new software versions
Item support does not include:
Customization and installation services
Support for third party software and plug-ins
Social Icons
To edit the 'Social Icons' links, simply find the appropriate label <!-- social icons --> in the body of the HTML file named 'index.html'.
Replace:
With: