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.
To edit the 'Site Name', simply find the appropriate label <!-- site name --> in the body of the HTML file named 'index.html'.
Replace:
<!-- site name --> <div class="site-name"><a href="index.html">the ONE</a></div> <!-- site name end -->
With:
<!-- site name --> <div class="site-name"><a href="index.html">Your Site Name</a></div> <!-- site name end -->
To edit the 'Flash News', simply find the appropriate label <!-- news ticker --> in the body of the HTML file named 'index.html'.
Replace:
<!-- news ticker --> <ul id="js-news" class="js-hidden"> <li class="news-item"><a href="#">Lorem ipsum dolor sit amet.</a></li> <li class="news-item"><a href="#">Consectetuer adipiscing elit.</a></li> <li class="news-item"><a href="#">Sed diam nonummy nibh euismod tincidunt.</a></li> <li class="news-item"><a href="#">Ut laoreet dolore magna aliquam erat volutpat.</a></li> </ul> <!-- news ticker end -->
With:
<!-- news ticker --> <ul id="js-news" class="js-hidden"> <li class="news-item"><a href="#">Your Flash News Content 1.</a></li> <li class="news-item"><a href="#">Your Flash News Content 2.</a></li> <li class="news-item"><a href="#">Your Flash News Content 3.</a></li> <li class="news-item"><a href="#">Your Flash News Content 4.</a></li> </ul> <!-- news ticker end -->
Use the same procedure for the rest of your 'Flash News'. You can add as many 'Flash News' contents as you like.
To edit the 'Contact Form', simply find the appropriate label <!-- contact form --> in the body of the HTML file named 'index.html'.
Replace:
<p>E-mail: <a href="mailto:example@yourdomainname.com">example@yourdomainname.com</a></p>
With:
<p>E-mail: <a href="mailto:example@yourdomainname.com">example@yourdomainname.com</a></p>
To send the contents of your 'Contact Form' to your email, simply open the file named 'send.php'.
Your email address goes here:
$myemail = 'example@yourdomainname.com';
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 : 'Slide Caption 1', thumb : '', url : ''},
{image : 'images/background/2.jpg', title : 'Slide Caption 2', thumb : '', url : ''},
{image : 'images/background/3.jpg', title : 'Slide Caption 3', thumb : '', url : ''},
{image : 'images/background/4.jpg', title : 'Slide Caption 4', thumb : '', url : ''},
{image : 'images/background/5.jpg', title : 'Slide Caption 5', thumb : '', url : ''},
{image : 'images/background/6.jpg', title : 'Slide Caption 6', thumb : '', url : ''},
{image : 'images/background/7.jpg', title : 'Slide Caption 7', thumb : '', url : ''}
With:
{image : 'images/background/your-image-name-1.jpg', title : 'Your Slide Caption 1', thumb : '', url : ''},
{image : 'images/background/your-image-name-2.jpg', title : 'Your Slide Caption 2', thumb : '', url : ''},
{image : 'images/background/your-image-name-3.jpg', title : 'Your Slide Caption 3', thumb : '', url : ''},
{image : 'images/background/your-image-name-4.jpg', title : 'Your Slide Caption 4', thumb : '', url : ''},
{image : 'images/background/your-image-name-5.jpg', title : 'Your Slide Caption 5', thumb : '', url : ''},
{image : 'images/background/your-image-name-6.jpg', title : 'Your Slide Caption 6', thumb : '', url : ''},
{image : 'images/background/your-image-name-7.jpg', title : 'Your Slide Caption 7', thumb : '', url : ''}
Thumbnails will be created automatically. 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 edit the 'Home' page, simply find the appropriate label <!-- content section 1 --> in the body of the HTML file named 'index.html'.
Replace:
<!-- news 1-->
<li>
<a href="images/rollover/rollover-big.jpg" rel="prettyPhoto"><span class="roll-news"></span><img src="images/rollover/rollover-thumb.jpg" alt="News 1" /></a>
<span class="titles">News Title 1 || <a href="javascript:show('section1-1')">Read More</a></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
</li>
<!-- news 1 end -->
With:
<!-- news 1-->
<li>
<a href="images/rollover/your-display-image-name.jpg" rel="prettyPhoto"><span class="roll-news"></span><img src="images/rollover/your-preview-image-name.jpg" alt="Your News Title 1" /></a>
<span class="titles">Your News Title 1 || <a href="javascript:show('section1-1')">Read More</a></span>
<p>Your Short News Content 1.</p>
</li>
<!-- news 1 end -->
To edit the 'News Read More' page, simply find the appropriate label <!-- content section 1-1 --> in the body of the HTML file named 'index.html'.
Replace:
<!-- news more 1 -->
<li>
<span class="titles-more">News Title 1 || <a href="javascript:show('section1')">Read Less</a></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...]</p>
</li>
<!-- news more 1 end -->
With:
<!-- news more 1 -->
<li>
<span class="titles-more">Your News Title 1 || <a href="javascript:show('section1')">Read Less</a></span>
<p>Your Full News Content 1.</p>
</li>
<!-- news more 1 end -->
Use the same procedure for the rest of your 'News'. You can add as many 'News' contents as you like.
To edit the 'Our Company' page, simply find the appropriate label <!-- content section 2 --> in the body of the HTML file named 'index.html'.
Replace:
<li><a href="#tabs-1">Who we are</a></li> <li><a href="#tabs-2">What we do</a></li> <li><a href="#tabs-3">Why we do it</a></li>
With:
<li><a href="#tabs-1">Your Custom Company Title 1</a></li> <li><a href="#tabs-2">Your Custom Company Title 2</a></li> <li><a href="#tabs-3">Your Custom Company Title 3</a></li>
Replace:
<!-- who --> <div id="tabs-1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...]</p> </div> <!-- who end --> <!-- what --> <div id="tabs-2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...]</p> </div> <!-- what end --> <!-- why --> <div id="tabs-3"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...]</p> </div> <!-- why end -->
With:
<!-- who --> <div id="tabs-1"> <p>Your Custom Company Text 1.</p> </div> <!-- who end --> <!-- what --> <div id="tabs-2"> <p>Your Custom Company Text 2.</p> </div> <!-- what end --> <!-- why --> <div id="tabs-3"> <p>Your Custom Company Text 3.</p> </div> <!-- why end -->
To edit the 'Our Team' page, simply find the appropriate label <!-- content section 3 --> in the body of the HTML file named 'index.html'.
Replace:
<!-- team member 1 -->
<li>
<a href="images/rollover/rollover-big.jpg" rel="prettyPhoto"><span class="roll-team"></span><img src="images/rollover/rollover-thumb.jpg" alt="Team Member 1" /></a>
<span class="titles">Team Member 1 || <a href="javascript:show('section3-1')">More Info</a></span>
<!-- social media team -->
<ul class="social" id="social-team-member-1">
<li class="facebook"><a href="#"><strong>Facebook</strong></a></li>
<li class="google-plus"><a href="#"><strong>Google+</strong></a></li>
<li class="linkedin"><a href="#"><strong>LinkedIn</strong></a></li>
<li class="twitter"><a href="#"><strong>Twitter</strong></a></li>
<li class="youtube"><a href="#"><strong>YouTube</strong></a></li>
<li class="skype"><a href="#"><strong>Skype</strong></a></li>
</ul>
<!-- social media team end -->
</li>
<!-- team member 1 end -->
With:
<!-- team member 1 -->
<li>
<a href="images/rollover/your-display-image-name.jpg" rel="prettyPhoto"><span class="roll-team"></span><img src="images/rollover/your-preview-image-name.jpg" alt="Your Team Member 1" /></a>
<span class="titles">Your Team Member 1 || <a href="javascript:show('section3-1')">More Info</a></span>
<!-- social media team -->
<ul class="social" id="social-team-member-1">
<li class="facebook"><a href="http://www.facebook.com/yourusername"><strong>Facebook</strong></a></li>
<li class="google-plus"><a href="https://plus.google.com/yourusername"><strong>Google+</strong></a></li>
<li class="linkedin"><a href="http://www.linkedin.com/in/yourusername"><strong>LinkedIn</strong></a></li>
<li class="twitter"><a href="https://twitter.com/yourusername"><strong>Twitter</strong></a></li>
<li class="youtube"><a href="http://www.youtube.com/user/yourusername"><strong>YouTube</strong></a></li>
<li class="skype"><a href="skype:yourusername?chat"><strong>Skype</strong></a></li>
</ul>
<!-- social media team end -->
</li>
<!-- team member 1 end -->
To edit the 'Team Read More' page, simply find the appropriate label <!-- content section 3-1 --> in the body of the HTML file named 'index.html'.
Replace:
<!-- team member more 1 -->
<li>
<span class="titles-more">Team Member 1 || <a href="javascript:show('section3')">Less Info</a></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...]</p>
</li>
<!-- team member more 1 end -->
With:
<!-- team member more 1 -->
<li>
<span class="titles-more">Your Team Member 1 || <a href="javascript:show('section3')">Less Info</a></span>
<p>Your Full Team Member 1 Content.</p>
</li>
<!-- team member more 1 end -->
Use the same procedure for the rest of the team members. You can add as many team members as you like.
To edit the 'Upcoming Events' page, simply find the appropriate label <!-- content section 4 --> in the body of the HTML file named 'index.html'.
Replace:
<!-- upcoming events 1 -->
<li>
<!-- events date -->
<div class="place-date">23</div>
<div class="place-month">March</div>
<div class="place-year">2013</div>
<!-- events date end -->
<!-- container full -->
<span class="titles">Event Title 1 || <a href="javascript:show('section4-1')">More Info</a></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
</li>
<!-- upcoming events 1 end -->
With:
<!-- upcoming events 1 -->
<li>
<!-- events date -->
<div class="place-date">Your Event Date</div>
<div class="place-month">Your Event Month</div>
<div class="place-year">Your Event Year</div>
<!-- events date end -->
<!-- container full -->
<span class="titles">Your Event Title 1 || <a href="javascript:show('section4-1')">More Info</a></span>
<p>Your Short Event Content 1.</p>
</li>
<!-- upcoming events 1 end -->
To edit the 'Events More Info' page, simply find the appropriate label <!-- content section 4-1 --> in the body of the HTML file named 'index.html'.
Replace:
<!-- upcoming events more 1 -->
<li>
<span class="titles-more">Event Title 1 || <a href="javascript:show('section4')">Less Info</a></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...]</p>
</li>
<!-- upcoming events more 1 end -->
With:
<!-- upcoming events more 1 -->
<li>
<span class="titles-more">Your Event Title 1 || <a href="javascript:show('section4')">Less Info</a></span>
<p>Your Full Event Content 1.</p>
</li>
<!-- upcoming events more 1 end -->
Use the same procedure for the rest of your 'Upcoming Events'. You can add as many 'Upcoming Events' as you like.
To edit the 'Past Events' page, simply find the appropriate label <!-- content section 5 --> in the body of the HTML file named 'index.html'.
Replace:
<!-- past events 1 -->
<li>
<!-- events date -->
<div class="place-date">23</div>
<div class="place-month">February</div>
<div class="place-year">2013</div>
<!-- events date end -->
<span class="titles">Event Title 1 || <a href="javascript:show('section5-1')">More Info</a></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
</li>
<!-- past events 1 end -->
With:
<!-- past events 1 -->
<li>
<!-- events date -->
<div class="place-date">Your Event Date</div>
<div class="place-month">Your Event Month</div>
<div class="place-year">Your Event Year</div>
<!-- events date end -->
<span class="titles">Your Event Title 1 || <a href="javascript:show('section5-1')">More Info</a></span>
<p>Your Short Event Content 1.</p>
</li>
<!-- past events 1 end -->
To edit the 'Events More Info' page, simply find the appropriate label <!-- content section 5-1 --> in the body of the HTML file named 'index.html'.
Replace:
<!-- past events more 1 -->
<li>
<span class="titles-more">Event Title 1 || <a href="javascript:show('section5')">Less Info</a></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...]</p>
</li>
<!-- past events more 1 end -->
With:
<!-- past events more 1 -->
<li>
<span class="titles-more">Your Event Title 1 || <a href="javascript:show('section5')">Less Info</a></span>
<p>Your Full Event Content 1.</p>
</li>
<!-- past events more 1 end -->
Use the same procedure for the rest of your 'Past Events'. You can add as many 'Past Events' as you like.
To edit the 'Photo Galleries', simply find the appropriate label <!-- content section 6 --> in the body of the HTML file named 'index.html'.
Replace:
<!-- photos 1 --> <li> <a href="images/rollover/rollover-big.jpg" rel="prettyPhoto[photos-1]"><span class="roll-photos"></span><img src="images/rollover/rollover-thumb.jpg" alt="Photo Gallery 1" /></a> <span class="titles">Photo Gallery 1</span> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p> <a href="images/rollover/rollover-big.jpg" rel="prettyPhoto[photos-1]"></a> <a href="images/rollover/rollover-big.jpg" rel="prettyPhoto[photos-1]"></a> <a href="images/rollover/rollover-big.jpg" rel="prettyPhoto[photos-1]"></a> </li> <!-- photos 1 end -->
With:
<!-- photos 1 --> <li> <a href="images/rollover/your-display-image-name-1.jpg" rel="prettyPhoto[photos-1]"><span class="roll-photos"></span><img src="images/rollover/your-preview-image-name.jpg" alt="Your Photo Gallery Title 1" /></a> <span class="titles">Your Photo Gallery Title 1</span> <p>Your Photo Gallery Description 1.</p> <a href="images/rollover/your-display-image-name-2.jpg" rel="prettyPhoto[photos-1]"></a> <a href="images/rollover/your-display-image-name-3.jpg" rel="prettyPhoto[photos-1]"></a> <a href="images/rollover/your-display-image-name-4.jpg" rel="prettyPhoto[photos-1]"></a> </li> <!-- photos 1 end -->
Use the same procedure for the rest of your 'Photo Galleries'. You can add as many 'Photo Galleries' as you like.
To edit the 'Video Galleries', simply find the appropriate label <!-- content section 7 --> in the body of the HTML file named 'index.html'.
Replace:
<!-- videos 1 --> <li> <a href="http://www.youtube.com/watch?v=fZd9mKJcOR0" rel="prettyPhoto[videos-1]"><span class="roll-videos"></span><img src="images/rollover/rollover-thumb.jpg" alt="Video Gallery 1" /></a> <span class="titles">Video Gallery 1</span> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p> <a href="http://vimeo.com/15475581" rel="prettyPhoto[videos-1]"></a> <a href="http://www.youtube.com/watch?v=fZd9mKJcOR0" rel="prettyPhoto[videos-1]"></a> <a href="http://vimeo.com/15475581" rel="prettyPhoto[videos-1]"></a> </li> <!-- videos 1 end -->
With:
<!-- videos 1 --> <li> <a href="http://www.youtube.com/watch?v=youryoutubevideouniqueID" rel="prettyPhoto[videos-1]"><span class="roll-videos"></span><img src="images/rollover/your-preview-video-image-name.jpg" alt="Your Video Gallery Title 1" /></a> <span class="titles">Your Video Gallery Title 1</span> <p>Your Video Gallery Description 1.</p> <a href="http://vimeo.com/yourvimeovideoID" rel="prettyPhoto[videos-1]"></a> <a href="http://www.youtube.com/watch?v=youryoutubevideouniqueID" rel="prettyPhoto[videos-1]"></a> <a href="http://vimeo.com/yourvimeovideoID" rel="prettyPhoto[videos-1]"></a> </li> <!-- videos 1 end -->
Use the same procedure for the rest of your 'Video Galleries'. You can add as many 'Video Galleries' as you like.
To edit the 'Extras' page, simply find the appropriate label <!-- extras --> in the body of the HTML file named 'index.html'.
Replace:
<!-- extras --> <div id="extras"> <div id="text-extras"> <p>Special Thanks:<br /> <a href="http://jquery.com/" target="_blank">The jQuery Project</a></p> <br /> <p>Design: <a href="http://www.11-76.com/" target="_blank">11 76</a> || Photo Credit: ex nihilo</p> <p>Copyright © <script type="text/javascript">var d = new Date(); document.write(d.getFullYear());</script>: <a href="http://www.11-76.com/" target="_blank">11 76</a></p> <br /> <p class="extras-closer"><a href="#">Click here to close this window.</a></p> </div> </div> <!-- extras end -->
With:
<!-- extras --> <div id="extras"> <div id="text-extras"> <p>Special Thanks:<br /> <a href="http://jquery.com/" target="_blank">The jQuery Project</a></p> <br /> <p>Design: <a href="http://www.11-76.com/" target="_blank">11 76</a> || Photo Credit: ex nihilo</p> <p>Copyright © <script type="text/javascript">var d = new Date(); document.write(d.getFullYear());</script>: <a href="http://www.11-76.com/" target="_blank">11 76</a></p> <br /> <p class="extras-closer"><a href="#">Click here to close this window.</a></p> </div> </div> <!-- extras end -->
To edit the 'Credits' page, simply find the appropriate label <!-- credits --> in the body of the HTML file named 'index.html'.
Replace:
<!-- credits --> <div id="credits"> <div id="text-credits"> <p>Special Thanks:<br /> <a href="http://jquery.com/" target="_blank">The jQuery Project</a></p> <br /> <p>Design: <a href="http://www.11-76.com/" target="_blank">11 76</a> || Photo Credit: ex nihilo</p> <p>Copyright © <script type="text/javascript">var d = new Date(); document.write(d.getFullYear());</script>: <a href="http://www.11-76.com/" target="_blank">11 76</a></p> <br /> <p class="credits-closer"><a href="#">Click here to close this window.</a></p> </div> </div> <!-- credits end -->
With:
<!-- credits --> <div id="credits"> <div id="text-credits"> <p>Special Thanks:<br /> <a href="http://jquery.com/" target="_blank">The jQuery Project</a></p> <br /> <p>Design: <a href="http://www.11-76.com/" target="_blank">11 76</a> || Photo Credit: ex nihilo</p> <p>Copyright © <script type="text/javascript">var d = new Date(); document.write(d.getFullYear());</script>: <a href="http://www.11-76.com/" target="_blank">11 76</a></p> <br /> <p class="credits-closer"><a href="#">Click here to close this window.</a></p> </div> </div> <!-- credits end -->
To edit the real time live 'Twitter Feed', simply find the file named 'scripts.js' placed in the folder named 'js'.
Open the file named 'scripts.js' 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.
Note for users of the previous releases of the template.
- Insert a reference to 'jquery.tweet.js' and 'ticker.js' into the HTML document as shown below:
<!-- twitter ticker --> <script type="text/javascript" src="twitter/jquery.tweet.js"></script> <script type="text/javascript" src="js/ticker.js"></script>
- Replace the previous 'scripts.js' file, placed in the folder named 'js', with the updated 'scripts.js' file
To send the contents of your 'Subscription Form' to your email, simply open the file named 'subscribe.php'.
Your email address goes here:
$myemail = 'example@yourdomainname.com';
To edit the 'Google Maps' location, simply find the file named 'gmaps.js' placed in the folder named 'gmaps'.
Open the file named 'gmaps.js' and replace the following coordinates (48.858278,2.294254) with your own.
To add your logo as a location marker, simply open and edit the file named 'map-location.png' placed in the folder named 'gmaps'.
More on Google Maps at: https://developers.google.com/maps/documentation/javascript/
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:false, startAt:0, opacity:1}"></a>
<!-- YTPlayer end -->
With:
<!-- YTPlayer -->
<a href="http://www.youtube.com/watch?v=youryoutubevideouniqueID" id="bgndVideo" class="player {containment:'body', autoPlay:true, mute:false, startAt:0, opacity:1}"></a>
<!-- YTPlayer end -->
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 Links
To add links to your 'Social Networking' accounts, simply find the appropriate label <!-- social links --> in the body of the HTML file named 'index.html'.
Part to edit: