To install the files to your server, simply copy the following files to your choice location:
To change the contact form information, simply edit the only PHP file inside the template, and replace paultrifa@gmail.com with your e-mail address. If you can't find a PHP file inside the template, that means you stole the file and the contact form won't be working :) Good luck with that.
Except for the first container of the site, all containers must use the following structure.
<div class="container">
<div class="decoration"></div>
Your Content Goes Here.
</div>
The best example for retina graphics is the footer. The footer icons are retina. They are called by the following.
<img src="images/icons/facebook.png" width="16" class="replace-2x" alt="img">
The image is facebook.png, the width is set to 16 and the class is replace-2x. Now, the width is mandatory. If you don't add that to it will double the image when it loads.
After that is done, you have to have 2 graphics. The first one must be 16pixels wide, which will be read by non retina graphic phones, the second one must be 32 pixels, this wil be read by retina phones.
The first graphic will be called facebook.png and the second one will be called facebook2x.png. They will be replaced automatically by jQuery.
The above structure will apply for all items you wish to make retina. All images except responsive fullscreen images can be made retina.
A fullscreen image resizes to screen size automatically so that means you cannot give it a fixed with attribute.
<div id='slider' class='swipe'>
<ul>
<li style='display:block'>
<div>
<img class="swipe-img" src="images/slider/1.jpg" alt="img">
<p class="swipe-text">Swipe me from your mobile!</p>
</div>
</li>
<li style='display:none'>
<div>
<img class="swipe-img" src="images/slider/2.jpg" alt="img">
<p class="swipe-text">Come on! Swipe me!</p>
</div>
</li>
</ul>
</div>
Copy the following syntax to a container and simply duplicate the second list. The one that uses display:none; Only the first box must have display block, the rest will have display none, and will be controled by JavaScript.
<div class="column">
<p>
<img class="column-image replace-2x" width="73" src="images/icon.png" alt="img">
<span class="column-title shadow">
Clean like an address book!
</span>
<span class="column-text shadow">
Column Text
</span>
</p>
<div class="clear"></div>
</div>
Simply copy the following syntax above inside the container structure, and replace the text, image, and title with what you wish! Read the Retina Chapter to understand how the retina items work!
<ul class="shadow icon-list">
<li class="list-heart">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li class="list-cross">Proin pharetra hendrerit metus, sed feugiat nisi molestie.</li>
<li class="list-arrow">Nam ullamcorper tortor et nisi volutpat condimentum.</li>
<li class="list-plus">Morbi cursus nulla at libero pharetra sed congue.</li>
<li class="list-tick">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li class="list-attention">Nam ullamcorper tortor et nisi condimentum.</li>
<li class="list-warning">Proin hendrerit metus, sed feugiat nisi molestie</li>
<li class="list-staron">Nam ullamcorper et nisi volutpat condimentum.</li>
<li class="list-staroff">Proin pharetra metus, sed feugiat nisi molestie.</li>
<li class="list-info">Morbi cursus nulla at libero pharetra sed congue.</li>
</ul>
The above will create lists. Each list has it's own name, simply use them by their class! If you wish to create a heart icon, use the list-heart class! Simple, no? :)
<div class="content-toggle">
<a href="#" class="itoggle shadow">Find out more? Turn me on!</a>
<p class="itoggle-content">
On Off Toggle Text.
</p>
</div>
Copy paste the above syntax in the container and replace the on off toggle text. This will create the iPhone like toggle text.
<div class="toggle">
<a href="#" class="content-toggle-deploy shadow">Exapand me!</a>
<div class="toggle-content">
<p class="full-width shadow">
Toggle Text
</p>
</div>
</div>
The same syntax as the on off toggle applies here. Just copy paste them to the container.
<a href="#" class="checkbox shadow">Check me!</a> <a href="#" class="radiobox shadow">Check me!</a>
The above create the checkboxes. Copy paste them to the container.
<div class="fourofour">
<h1>404</h1>
<p>Sorry Mario!</p>
<em>Your princes is in another castle!</em>
<span>Don't be sad... go <a href="index.html">back home!</a></span>
</div>
To create a gallery, simply add the following code inside a container.
<ul id="gallery" class="gallery">
<li><a href="images/swype/full/001.jpg">
<img src="images/swype/thumb/001.jpg" alt="Caption Title One" />
</a></li>
<li><a href="images/swype/full/002.jpg">
<img src="images/swype/thumb/002.jpg" alt="Caption Title Two" />
</a></li>
</ul>
Replace the image and caption and you're ready to go! :)
Thanks for purchashing this template, if you have any trouble understanding code, or you need help with it, please contact me through my profile! I offer support for all my files!
Don't forget to rate 5 stars and thank you for your purchase!
All the best,
Enabled.