1. Start
  2. F.A.Q
    1. How do I install the template?
    2. How do I change the contact form information? 
  3. Template Structure
  4. Using retina graphics
  5. How to change the navigation
  6. How to change the slider images
  7. Template Elements
    1. Columns
    2. Lists
    3. ON/OFF Toggle.
    4. Default Toggle
    5. Creating checkboxes.
    6.  
    7. 404 Element
  8. Creating Galleries
  9. Last words.

Kaius Mobile Retina | HTML5 & CSS3 And iWebApp


F.A.Q


How do I install the template?

To install the files to your server, simply copy the following files to your choice location:

images
scripts
styles
php
404.html
contact.html
features.html
gallery.html
index.html
interfaces.html
portfolio.html
 

How do I change the contact form information? 

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. 

 

Template Structure


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>

 

Using retina graphics


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. 

How to change the navigation


 

<div class="header">
<img class="logo replace-2x" width="69" src="images/logo.png" alt="logo">
    <div class="navigation">
    <a class="shadow"  id="home"  href="index.html">Home</a>
        <a class="shadow"  id="about"  href="#">About</a>
        <a class="shadow"  id="media"  href="#">Media</a>
        <a class="shadow"  id="contact"  href="#">Contact</a>
        <div class="home">
            Welcome to Kaius Mobile! You can add items here like in the about menu.
        </div>
        <div class="about">
            <a href="features.html">Features</a>
            <a href="interfaces.html">Interfaces</a>
            <a href="404.html">404 Page</a>
        </div>
        <div class="media">
            <a href="gallery.html">Gallery</a>
            <a href="portfolio.html">Portfolio</a>
        </div>
        <div class="contact">
            <a href="contact.html">Mail Form</a>
            <a href="">Mail</a>
            <a href="tel:+1-000-000-0000">Phone</a>
            <a href="sms:+1-000-000-0000">Text</a>
         </div>
    </div>
    <div class="clear"></div>
</div>

Simply copy the above elements and and add the navigation items you need inside each div class. Do not rename them because they are controled by javascript. You can change the name of the href but not it's class! 

How to change the slider images


 

<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. 

Template Elements


Columns

 

<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! 

Lists

 

<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? :) 

 

ON/OFF Toggle.

 

<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.

Default Toggle

 

<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. 

Creating checkboxes.

 

<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. 

 

404 Element

 

<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>
The above creates a 404 page. Simply add it inside the container box. 
 
 
 
 
 

Creating Galleries


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! :) 

Last words.


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.