1. Start
  2. F.A.Q
    1. How do I install the template?
    2. How do I redirect users to my mobile page?
    3. How do I change the contact form?
  3. Use Image Slider
  4. Template structure.
  5. Features
  6. Using portfolio!
  7. Using the blog.

Drhop

Mobile Retina | HTML5 & CSS3 And iWebApp


F.A.Q


How do I install the template?

Simply copy paste the files from the color code to your servers desired location! 

 

How do I redirect users to my mobile page?

This script is no longer availalble via e-mail due to some ... great persons who abused of my kindness in the past. So, in order to get this script, visit http://support.paultrifa.com , select the redirect tab, and enter your purchase code! I will NOT offer this code via e-mail! 

 

How do I change the contact form?

Find the php file, only one in the entire pack. locate the e-mail address in it and replace it. If you can't find a php file, consider buing it first! :) 

Use Image Slider


 


            <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>
 
Duplicate the display none class to create a new slider image! 
 

 

Template structure.


The template has been structured in the following syntax. This structure is a MUST.

<div class="content">
     <div class="container">

     </div>
</div>

Features are added inside containers! 

Features


 

There is nothing much to explain witht he code bellow. it looks scary, but it isn't. All classes are named properly to make them "read through", and make you as comfortable as possible with each feature! Remember, all features must be included in separate, closed container boxes, and add a <div class="deocration"></div> after closing the container to make the line deco between them!
 
Toggles
 
     <div class="toggle">
         <a href="#" class="toggle-deploy">Tap me to open!</a>
         <a href="#" class="toggle-close">Tap me to close!</a>
         <p class="toggle-content">
             Text
         </p>
     </div>    
 
Notification Boxes
   
<div class="notification-box-green">
   <a href="#" class="notification-quit-green">x</a>
   <img class="notification-icon" width="16" src="images/lists/tick_32.png" alt="">
   <p class="notification-text">Yes, green is good!</p>
</div>

<div class="notification-box-yellow">
   <a href="#" class="notification-quit-yellow">x</a>
   <img class="notification-icon" width="16" src="images/lists/warning_32.png" alt="">
   <p class="notification-text">Something requires attention!</p>
</div>

<div class="notification-box-blue">
   <a href="#" class="notification-quit-blue">x</a>
   <img class="notification-icon" width="16" src="images/lists/info_32.png" alt="">
   <p class="notification-text">Something interesting!</p>
</div>

<div class="notification-box-red">
   <a href="#" class="notification-quit-red">x</a>
   <img class="notification-icon" width="16" src="images/lists/delete_32.png" alt="">
   <p class="notification-text">Attention! Bad things here!</p>
</div>
   
Cheboxes and radios.
 
<a href="#" class="checkbox">Check Me!</a><br/><br/>
<a href="#" class="checkbox2">Check Me!</a><br/><br/>
<a href="#" class="radiobox">Click Me!</a><br/><br/>
<a href="#" class="radiobox2">Click Me!</a>
 
Responsive image and responsive image with caption. Both need to be added into containers.
 
<img class="responsive-image responsive-background" src="images/slider/1.jpg">

<img class="responsive-image responsive-background" src="images/slider/2.jpg">
<p class="responsive-image-caption">This is an image caption!</p>
    
Columns with images.
    
<div class="container">
    <p class="column-two-one">
        <img class="responsive-image responsive-background" src="images/slider/3.jpg">    </p>
    <p class="column-two-two">
        <img class="responsive-image responsive-background" src="images/slider/4.jpg">    </p>
    <div class="clear"></div>
</div>    

<div class="container">
   <p class="column-three-one">
       <img class="responsive-image responsive-background" src="images/slider/3.jpg">
   </p>
   <p class="column-three-two">
       <img class="responsive-image responsive-background" src="images/slider/2.jpg">
   </p>
   <p class="column-three-three">
       <img class="responsive-image responsive-background" src="images/slider/1.jpg">
   </p>   
   <div class="clear"></div>
</div>
    
Buttons
    
    <div class="container">
        <a href="#" class="button grey">Button</a>
        <a href="#" class="button yellow">Button</a>
        <a href="#" class="button green">Button</a>
        <a href="#" class="button black">Button</a>
        <a href="#" class="button red">Button</a>
        <a href="#" class="button blue">Button</a>
        <a href="#" class="button gblue">Button</a>
        <a href="#" class="button purple">Button</a>
    </div>
 
Detect different kinds of mobiles. Each appear for the specific name! 
          
<div class="iphone-detected">
    <a href="#" class="button blue">
        <img class="button-icon" src="images/icons/iphone@2x.png" alt="img">
        <em>Availalbe on the</em>
        <strong>AppStore</strong>
    </a>
    <br/>
</div>

<div class="ipod-detected">
    <a href="#" class="button yellow">
        <img class="button-icon" src="images/icons/ipodn@2x.png" alt="img">
        <em>Availalbe on the</em>
        <strong>AppStore</strong>
    </a>
</div>

<div class="ipad-detected">
    <a href="#" class="button black">
        <img class="button-icon" src="images/icons/ipad@2x.png" alt="img">
        <em>Availalbe on the</em>
        <strong>AppStore</strong>
    </a>
</div>

<div class="android-detected">
    <a href="#" class="button green">
        <img class="button-icon" src="images/icons/android@2x.png" alt="img">
        <em>Availalbe on</em>
        <strong>Google Play</strong>
    </a>
</div>
 
 
Image columns and text.
 
<div class="container">
    <div class="two-column-one">
        <em class="center-text">
            <img src="images/icons/icon1.png" class="replace-2x" width="70">
        </em>
        <h3 class="center-text">WE BUILD AMAZINGLY</h3>
        <p class="center-text">
            Text
        </p>
    </div>
    <div class="two-column-two">
        <em class="center-text">
            <img src="images/icons/icon2.png" class="replace-2x" width="70">
        </em>
        <h3 class="center-text">WE BUILD AMAZINGLY</h3>
        <p class="center-text">
            Text
        </p>
    </div>
    <div class="clear"></div>
</div>    
 
 Highlighted text.
    
    <div class="container">
        <p class="highlight"><span class="highlight-orange">Donec</span> Text </p>
        <p class="highlight"><span class="highlight-green">Donec</span> Text</p>              <p class="highlight"><span class="highlight-yellow">Donec</span> Text</p>             <p class="highlight"><span class="highlight-gray">Donec</span> Text</p>           </div>        
 
Icon lists.    
 
    <div class="container">
        <ul class="icon-lists">
            <li class="list-address">Addressbook list.</li>
            <li class="list-block">Block icon list.</li>
            <li class="list-bookmark">Bookmark list.</li>
            <li class="list-bubble">Bubble icon list.</li>
            <li class="list-briefcase">Briefcase list.</li>
            <li class="list-buy">Buy icon list.</li>
            <li class="list-calendar">Calendar list.</li>
            <li class="list-clipboard">Clipboard list.</li>
            <li class="list-delete">Delete icon list.</li>
            <li class="list-clock">Clock icon list.</li>
            <li class="list-diagram">Diagram icon list.</li>
            <li class="list-document">Document list.</li>
            <li class="list-down">Down icon list.</li>
            <li class="list-flag">Flag icon list.</li>
            <li class="list-folder">Folder icon list.</li>
            <li class="list-gear">Gear icon list.</li>
            <li class="list-globe">Globe icon list.</li>
            <li class="list-heart">Heart icon list.</li>
            <li class="list-help">Help icon list.</li>
            <li class="list-home">Home icon list.</li>
            <li class="list-key">Key icon list.</li>
            <li class="list-label">Label icon list.</li>
            <li class="list-left">Left icon list.</li>
            <li class="list-letter">Letter icon list.</li>
            <li class="list-monitor">Monitor icon list.</li>
            <li class="list-pencil">Pencil icon list.</li>
            <li class="list-plus">Plus icon list.</li>
            <li class="list-present">Present icon list.</li>
            <li class="list-print">Print icon list.</li>
            <li class="list-right">Right icon list.</li>
            <li class="list-save">Save icon list.</li>
            <li class="list-shield">Sheild icon list.</li>
            <li class="list-statistics">Statistics list.</li>
            <li class="list-stop">Stop icon list.</li>
            <li class="list-tick">Tick icon list.</li>
            <li class="list-trash">Trash icon list.</li>
            <li class="list-up">Up icon list.</li>
            <li class="list-user">User icon list.</li>
            <li class="list-walet">Wallet icon list.</li>
            <li class="list-warning">Warning icon list.</li>
        </ul>
    </div>
 
Center, left and right text.
       
<div class="container">
    <h4 class="center-text">A CENTERED TEXT HEADING!</h4>
    <p class="center-text">This is a center text for a centered heading.</p>   
</div>    

<div class="container">
   <h4 class="left-text">A LEFT ALIGNED HEADING!</h4>
   <p class="left-text">This is a left aligned text, it's the most used!</p>  
</div>    

<div class="container">
   <h4 class="right-text">A RIGHT ALIGNED HEADING!</h4>
   <p class="right-text">I have no idea why you would need this but here!</p>    
</div>    
 
Two and three columns of text.
    
<div class="container">
    <h4 class="left-text">TWO COLUMNS TEXT</h4>
    <p class="column-two-one">Two columns of text? Not a problem!Column one!</p>
    <p class="column-two-two">And of course, this is column two! They are floated</p>
    <div class="clear"></div>
</div>    
  
<div class="container">
    <h4 class="left-text">THREE COLUMNS TEXT</h4>
    <p class="column-three-one">Three columns of text? Not hard at all! First!</p>
    <p class="column-three-two">And of course, this is column number two!</p>
    <p class="column-three-three">last but not least, column number three!</p>   
    <div class="clear"></div>
</div>
 

 

Using portfolio!


 

<div class="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>
</div>  

Duplicate the list items to create more portfolio items! 

Using the blog.


Blog Post

 

<div class="container blog-post">
    <h3 class="blog-title">BLOG POST ONE</h3>
    <img class="responsive-background responsive-image" src="images/slider/1.jpg">
    <p class="responsive-image-caption">Testing</p>
    <p class="blog-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
    <a href="#" class="posted-by">Admin</a>
    <a href="#" class="posted-on">22 Dec 2012</a>
    <a href="#" class="posted-cat">Tutorials</a>
    <a href="#" class="posted-tag">0 Comments</a>
    <a href="#" class="posted-more">More</a>
    <div class="clear"></div>
</div>

 

Ads

 

<div class="container">
    <div class="ads">
        <img src="images/ads/tf_125x125_v1.gif" alt="img">
         <img src="images/ads/tf_125x125_v2.gif" alt="img">

            <img src="images/ads/tf_125x125_v3.gif" alt="img">

            <img src="images/ads/tf_125x125_v4.gif" alt="img">

        </div>

    </div>

Category list.

 

    <div class="container">
        <h3 class="container-title">AND CATEGORIES!</h3>

        <ul class="icon-lists float">
            <li class="list-right"><a href="#">Tutorials</a></li>
            <li class="list-right"><a href="#">Web Design</a></li>
            <li class="list-right"><a href="#">Web Development</a></li>
            <li class="list-right"><a href="#">Coding</a></li>
        </ul>

        <ul class="icon-lists float">
            <li class="list-right"><a href="#">Programming</a></li>
            <li class="list-right"><a href="#">Designing</a></li>
            <li class="list-right"><a href="#">Uncategorized</a></li>
            <li class="list-right"><a href="#">News and Updates</a></li>
        </ul>
        <div class="clear"></div>
    </div>