SwipeBody


How do I install the template?

Simply copy and paste the following files to your server!

images
php
scripts
styles
blog-page.php
contact.html
folio.html
gallery.html
index.html
jquery.html
other.html
type.html
video.html
 

How do I customize the contact form?

There is only one php file in the pack. Opening it will reveal a email address. Simply replace it with yours!

To change the logo, replace:

    <div class="page-header">
        <p class="logo">
            <img src="images/misc/logo.png" width="78">
        </p>
        <a href="#" class="deploy-sidebar"></a>
        <a href="#" class="deploy-contact"></a>
    </div>

Replace the logo image, located in misc, with your image, and also replace the width with the image widht. After doing so, open the style.css and locate the .logo class and replace the width there with your logo's width

Page structure.

<div class="all-elements">
    <div class="page-header">
        <p class="logo">
            <img src="images/misc/logo.png" width="78">
        </p>
        <a href="#" class="deploy-sidebar"></a>
        <a href="#" class="deploy-contact"></a>
    </div>
    
    <div id="sidebar" class="page-sidebar">
        <div class="page-sidebar-scroll">
            <div class="nav-item">
                <a href="index.html" class="nav-icon home-icon">HOMEPAGE</a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-icon close-icon">CLOSE</a>
            </div>
            <div class="sidebar-ending"></div>
        </div>
    </div>
    
      
    <div id="content" class="page-content">
        <div class="page-content-wrapper">  

        <!--Containers Go Here -->       

        <div class="decoration"></div>

        <div class="footer-shortcuts">
            <a href="#"><span class="icon icon-facebook"></span></a>
            <a href="#"><span class="icon icon-twitter2"></span></a>
            <a href="#" class="go-up"><span class="icon icon-arrow-up"></span></a>
        </div>
        <div class="clear"></div>
        <p class="center-text copyright no-bottom">COPYRIGHT 2013. ALL RIGHTS RESERVED</p>
    </div>   
    <div class="page-ending"></div>
</div>

Copying the following code, will generate a page. Once you've done this, simply add containers ( found in the second documentation ) in the page-content-wrapper.

 

 

    <div id="sidebar" class="page-sidebar">
        <div class="page-sidebar-scroll">
            <div class="nav-item">
                <a href="#" class="nav-icon nav-coach coach-icon">PAGE COACH</a>
            </div>
            <div class="nav-item">
                <a href="index.html" class="nav-icon home-icon">HOMEPAGE</a>
            </div>
            <div class="nav-item">
                <a href="type.html" class="nav-icon type-icon">TYPOGRAPHY</a>
            </div>
            <div class="nav-item">
                <a href="jquery.html" class="nav-icon jquery-icon">jQUERY</a>
            </div>
            <div class="nav-item">
                <a href="other.html" class="nav-icon other-icon">OTHERS</a>
            </div>
            <div class="nav-item">
                <a href="folio.html" class="nav-icon folio-icon">PORTFOLIO</a>
            </div>
            <div class="nav-item">
                <a href="gallery.html" class="nav-icon gallery-icon">GALLERY</a>
            </div>
            <div class="nav-item">
                <a href="video.html" class="nav-icon videos-icon">VIDEOS</a>
            </div>
            <div class="nav-item">
                <a href="blog-page.html" class="nav-icon blogpa-icon">BLOG</a>
            </div>
            <div class="nav-item">
                <a href="contact.html" class="nav-icon contact-icon">CONTACT</a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-icon close-icon">CLOSE</a>
            </div>
            <div class="sidebar-ending"></div>
        </div>
    </div>

 

The navigation items are easy to customize. Simply copy and paste a nav-item and give it a class name, to create a new icon, simply open style.css and locate the icons, search for home-icon for example. Duplicate the class, and add the icon you wish, then add it to the HTML file.

Adding close-icon to your sidebar, will create a close button that closes the navigation

Adding nav-coach, will create a coach class, that will allow you to include coach arrows!

 

 

 

<div class="page-coach">
    <div class="portrait-coach">
        <span  style="top:40px; left:28px;" class="coach-arrow arrow1">
            <h3 style="padding-top:35px; padding-left:100px">TOGGLE</h3>
            <p style="padding-top:0px; padding-left:100px;">TOGGLES THE NAVIGATION!</p>
        </span>     
    </div>    
    <div class="landscape-coach">        
        <span style="left:47%; top:15%;" class="coach-arrow arrow12">
            <p style="text-align:center; padding-top:100px; margin-left:-160px;">
                This page has a lot of responsive features!<br>
                That means they expand when the device is in landscape!<br>
                Flip your device back in portrait mode to continue the tutorial!<br>      
            </p>
        </span>
    </div>
</div>

 

The coach arrows are added using inline CSS. Creating classes for this would be impossible, as each can have endless combinations.

To create a new coach arrow, simply copy and paste the fist class in portrait-coach, replace arrow1 with whichever arrow you wish to use ( open images/coach, the arrows use the same names as classes )

Giving the main span style, will move the arrow about the screen. Giving the H3 and P classes, paddings will move the text around!

It's best you only use coach arrows for portrait mode, as each device has a taller or shorter screen and the page being responsive, they can be added wrong in landscape.

Nope!

You can add containers, as mentioned in the page structure, with elements within them, these can be found in the second documentation from the pack! Check it out!