How do I install the template?
Copy and paste all the items from the code folder to your server!
How do I change the mail address?
There is only one php file in the pack, edit it and replace the address there with yours!
The wide folio acts like an accordion! The structure is explained bellow, as for content? Go wild! You can basically add anything to them (except for image sliders and contact forms )
<div class="wide-item-wrapper">
<div class="wide-item">
<div class="wide-item-titles">
<h4>A simple image</h4>
<p>This image has no content when tapping it!</p>
</div>
<a class="wide-image" href="#">
<div class="overlay"></div>
<img class="responsive-image" src="images/general-nature/7w.jpg" alt="img">
</a>
<div class="wide-active">
<!-- Add your content here, if the item expands to fullwidth, add it inside a <div class="container"></div> -->
</div>
</div>
</div>
Using the gallery is even easier
Inside the wide-item-wrapper add the following to create an item, and then duplicate it and replace the images and text.
<div class="wide-item">
<div class="wide-item-titles">
<h4>Tile image gallery</h4>
<p>Add a caption, tap the image, and see the result!</p>
</div>
<div class="wide-image">
<div class="overlay"></div>
<a class="swipebox-wide" href="images/general-nature/1.jpg" title="Your caption here!"><img class="responsive-image" src="images/general-nature/1w.jpg" alt="img"></a>
</div>
</div>
This section is extremly important to understand the functionality of the content, so please read it carefuly!
<div class="content">
<!--(1)-->
<div>
<div class="content">
<div class="container">
<!---(2)---->
</div>
</div>
(1) the content class creates a margin left and right, to give your content a bleed margin, inside the content, you can add containers (2) containers will house all the elements found in the second documentation exept for the images sliders which will be added directly in the content (1) class.
<div class="homepage-wrapper">
<img class="homepage-logo" src="images/misc/logo.png" alt="img"><!--1-->
<em class="homepage-logo-sub">Creative Simplicity</em>
<div class="homepage-navigation"><!--2-->
<a class="home-icon" href="homepage.html">Homepage</a>
<a class="type-icon" href="type.html">Type</a>
<a class="jquery-icon" href="jquery.html">jQuery</a>
<a class="gallery-icon" href="tile-gallery.html>Gallery</a>
<a class="folio-icon" href="tile-folio.html">Portfolio</a>
<a class="mail-icon" href="contact.html">Contact</a>
<div class="clear"></div>
</div>
<div class="footer"><!--3-->
<a class="facebook-icon" href="#"></a>
<a class="google-icon" href="#"></a>
<a class="twitter-icon" href="#"></a>
<div class="clear"></div>
<p class="homepage-copyright">Copyright 2014. <br>All Rights Reserved.</p>
</div>
<div class="webapp-wrapper"><!--4-->
<div class="webapp">
<img src="images/splash/splash-icon.png" alt="img">
<h3>SLASHER</h3>
<p>You’re running iOS. Add this page to your homescreen for an enhanced experience!</p>
<em class="corner-deco"></em>
<a href="#" class="close-webapp">x</a>
</div>
</div>
</div>
(1) creates the logo and the logo submenu. The .homepage-logo class in style.css has a width property, make sure to change it when you update the logo with yours
(2) is the page navigation, the current icons can be found in the images/misc folder and you can create more icons using the images/icons folder and the PSD file provided.
(3) the footer is individual for the homepage. you can create more icons the same way you'd create icons for the navigation
ATTENTION : The homepage has indivudual properties for iPhone 5 Minus ( meaning previous versions ) to make the homepage full portrait size in webapp mode, so does it for iPhone 5 Plus (newer models ) and iPads, adding more than 6 icons will distort this!
(4) is our custom Add 2 Homescreen plugin. This has an X button, once clicked, it will automatically create a 7 day cookie that will not show it again for 7 days. You can find more about this in framework.js , locate webapp
<div class="header">
<a href="#" class="show-navigation"></a>
<a href="#" class="hide-navigation"></a>
<img src="images/misc/logo.png" class="page-logo" alt="img">
</div>
The header class has 2 buttons that will show and hide the navigation and the page logo. Locate .page-logo in style.css and replace the width attribute there with your logos width when replacing it.
<div class="navigation">
<div class="navigation-wrapper">
<div class="nav-item"><!--1-->
<a href="#" class="landing-icon">
Homepage<em class="unselected-item"></em><!--2-->
</a>
</div>
<div class="nav-item">
<a href="#" class="submenu-item camera-icon"><!--3-->
Gallery<em class="dropdown-item active-dropdown"></em><!--4-->
</a>
<div class="submenu submenu-active"><!--5-->
<a href="#">1<em class="unselected-item"></em></a><!--6-->
<a href="#">2<em class="selected-item"></em></a>
</div>
</div>
<div class="nav-item"><!--7-->
<a href="#" class="submenu-item portfolio-icon">
Portfolio<em class="dropdown-item"></em>
</a>
<div class="submenu">
<a href="#">3<em class="unselected-item"></em></a>
<a href="#">4<em class="unselected-item"></em></a>
</div>
</div>
</div>
</div>
<div class="page-header-clear"></div>
(1) is a regular nav item
(2) is the nav itemitself, it's set as unselected. Setting it selected will add an orange ball
(3) is an active dropdown menu
(4) active-dropdown creates the - icon in the dropdown
(5) submenu-active will make the submenu directly visble
(6) unselected-item ands selected-item will create a ball to the right of the menu
(7) is a directly unselected dropdown menu
Nope! This is just the structural stuff! Check out the second documentation for the features of our Epsilon framework and to find out what goes into the content class and containers!