Feature Documentation

Epsilon HTML5 & CSS3 Framework


Content Class

The content class is the body of all our elements. This will house containers and columns. This class creates a left, right, and bottom margin and changes it's width on different devices to keep it responsive and beautiful.

Container Class

The container class is the hosing wrapper of a specific feature, this class makes the code more easily readable and at the same time adds a margin bottom to your elements. Inside the container classes the features explained bellow will be added. 

Control Classes

Control classes are added to specific classes to give them a second set of properties. 

left-text: will make text align to the left

center-text: will make text align to the center

right-text: will make text align to the right

no-bottom: this class can be added to any element to remove the margin bottom completely. This can be used for example if you have a paragraph inside a container

half-bottom: this can be added to any element of the page, and it will use half the bottom of the main container class. 

full-bottom: this can be added to any element that you wish to have a full bottom. The bottom value is determined by the container class. 

responsive-image: when having an image on screen you wish to be fullly responsive and maintain aspect ratio, add the class responsive-image to it and it will automatically scale accordingly when changing resolutions. 

disabled: adding this class to any element will turn that element off, by setting it's css to display none. 

uppercase: adding this class will make your entire text uppercase

lowercase: adding this class will make your entire text lowercase

regular-anchor: if you don't want a link to change it's color, adding regular-anchor to it will make it take the color of it's parrent element. 

hide-if-responsive: this class can be added to any element you wish to hide on tablets but show on mobiles

hide-if-mobile: this class can be added to any element you wish to hide on mobiles but show on tablets.

 

Responsive Classes

Responsive classes are columns and responsive columns that adapt according to resolutions. We've set the breaking point at 768px, which is the default small size of a tablet. Under 768px you risk hitting devices like Phablets and Large Phones and making them switch to tablet resolution.

Two Columns, Unresponsive Class. 

Replace the "CONTENT HERE" zone with any feature you want, the code bellow will generate two columns on any resolutions. You must add last-column to the last one-half to make sure the margins are perfect. 

<div class="container">
    <div class="one-half">CONTENT HERE</div>
    <div class="one-half last-column">CONTENT HERE</div>
</div>

Three Columns, Unresponsive Class.

Replace the "CONTENT HERE" zone with any feature you want, the code bellow will generate two columns on any resolutions. You must add last-column to the last one-third to make sure the margins are perfect. 

<div class="container">
    <div class="one-third">CONTENT HERE</div>
    <div class="one-third">CONTENT HERE</div>
    <div class="one-third last-column">CONTENT HERE</div>
</div>

Two Columns, Responsive Class.

Replace the "CONTENT HERE" zone with any feature you want, the code bellow will generate two columns, on a mobile device, they will show up as rows, so, unresponsive, but on tablets, they will show up as two columns, so, responsive. 

<div class="container">
    <div class="one-half-responsive">CONTENT HERE</div>
    <div class="one-half-responsive last-column">CONTENT HERE</div>
</div>

Three Columns, Responsive Class.

Replace the "CONTENT HERE" zone with any feature you want, the code bellow will generate two columns, on a mobile device, they will show up as rows, so, unresponsive, but on tablets, they will show up as two columns, so, responsive. 

<div class="container">
    <div class="one-third-responsive">CONTENT HERE</div>
    <div class="one-third-responsive">CONTENT HERE</div>
    <div class="one-half-responsive last-column">CONTENT HERE</div>
</div>

Sidebar Columns 

Sidebar columns are basically a column that's 25% the width of the screen and a column that's 75% the width of the screen. Sidebar columns will appear as one row on mobiles and as two columns on tablets. 

<div class="container">
    <div class="sidebar-right-big">CONTENT HERE</div>
    <div class="sidebar-left-small">CONTENT HERE</div>
</div>

<div class="container">
    <div class="sidebar-left-big">CONTENT HERE</div>
    <div class="sidebar-right-small">CONTENT HERE</div>
</div>

 

 

Responsive Images

To create a responsive image, follow the structure bellow

<img src="images/img.jpg" alt="img" class="responsive-image">

 

Responsive Videos

To create a responsive video, follow the structure bellow 

<iframe class="responsive-video" src="video_address_link"></iframe>

 

Responsive Maps

To create a responsive map, go to google maps, get the embed code, and paste it in the iframe example bellow! 

<div class="maps-container">
    <iframe class="responsive-image maps" src="https://maps.google.com/?ie=UTF8&amp;ll=47.595131,-122.330414&amp;spn=0.006186,0.016512&amp;t=h&amp;z=17&amp;output=embed"></iframe>
</div>

 

Text Highlights

Text highlights will make a certain part of the text show up using a background. These are easy to use and are applied by adding a span class to the text you want highlighted. Please check the examples bellow. The span has the main class text-highlight that sets the proper spacings and the highlight-COLOR class that changes the color. Examples of colors can be seen in the code bellow, just copy and paste them to your desired location ( container ) 

<p><span class="text-highlight highlight-turqoise">This is a highlight</span>and this is the text</p>
<p><span class="text-highlight highlight-green">This is a highlight</span>and this is the text</p>
<p><span class="text-highlight highlight-blue">This is a highlight</span>and this is the text</p>
<p><span class="text-highlight highlight-magenta">This is a highlight</span>and this is the text</p>
<p><span class="text-highlight highlight-dark">This is a highlight</span>and this is the text</p>
<p><span class="text-highlight highlight-yellow">This is a highlight</span>and this is the text</p>
<p><span class="text-highlight highlight-red">This is a highlight</span>and this is the text</p>
<p><span class="text-highlight highlight-orange">This is a highlight</span>and this is the text</p>

PNG Icon Lists

Altough we also incorporated font-awesome http://fortawesome.github.io/Font-Awesome/icons/ in our project, we included some PNG icons as well. To generate a icon list, you must first create an unsorted list ( ul ) with the class name icon-list, then, to the list you want, add any of the following classes. ( check the example bellow ) 

<ul class="icon-list">
    <li class="address-list">Address icon</li>
    <li class="block-list">Block icon</li>
    <li class="bookmark-list">Bookmark icon</li>
    <li class="briefcase-list">Briefcase icon</li>
    <li class="bubble-list">Bubble icon</li>
    <li class="buy-list">Buy icon</li>
    <li class="calendar-list">Calendar icon</li>
    <li class="clipboard-list">Clipboard icon</li>
    <li class="clock-list">Clock icon</li>
    <li class="delete-list">Delete icon</li>
    <li class="diagram-list">Diagram icon</li>
    <li class="document-list">Document icon</li>
    <li class="down-list">Down icon</li>
    <li class="flag-list">Flag icon</li>
    <li class="folder-list">Folder icon</li>
    <li class="gear-list">Gear icon</li>
    <li class="globe-list">Globe icon</li>
    <li class="heart-list">Heart icon</li>
    <li class="help-list">Help icon</li>
    <li class="info-list">Info icon</li>
    <li class="key-list">Key icon</li>              
    <li class="left-list">Left icon</li>
    <li class="letter-list">Letter icon</li>
    <li class="monitor-list">Monitor icon</li>
    <li class="pencil-list">Pencil icon</li>
    <li class="plus-list">Plus icon</li>
    <li class="present-list">Present icon</li>
    <li class="print-list">Print icon</li>
    <li class="right-list">Right icon</li>
    <li class="save-list">Save icon</li>
    <li class="search-list">Search icon</li>
    <li class="shield-list">Shield icon</li>
    <li class="statistics-list">Statistics icon</li>
    <li class="stop-list">Stop icon</li>
    <li class="tick-list">Tick icon</li>
    <li class="trash-list">Trash icon</li>
    <li class="up-list">Up icon</li>
    <li class="user-list">User icon</li>
    <li class="wallet-list">Walet icon</li>
    <li class="warning-list">Warning icon</li>
    <li class="home-list">Home icon</li>
    <li class="label-list">Label icon</li>  
</ul>

Normal Lists, Numbered Lists

Regular lists are vital, and the code for them is very simple. To create an ordered list class name your class ( ol class ) number-list, to create a regular list, name your class (ul class) normal-list.

Static Notifications

Static notifications are just background colored boxes used to attract the attention of the viewer. To create these classes, add them to a container and use the examples bellow. 

<div class="static-notification-red">
    <p class="center-text uppercase">Red notification!</p>
</div>
You can choose between four colors just by switching the main class name from static-notification-red to green, yellow or blue. 
 

Table 

By default, templates are responsive, but please keep in mind the reelestate of the screen you are adding the table to as you cannot add 50 columns to a 300 pixel width screen! Using tables implies the same old structure use since the begging of HTML, but just in case, we're adding the code here so you can copy and paste it to your page and edit from there on! 

       <table cellspacing='0' class="table">
            <tr>
                <th>TABLE</th>
                <th class="table-title">PLUS</th>
                <th class="table-title">PRO</th>
            </tr>
            <tr>
                <td class="table-sub-title"> ONE</td>
                <td>Yes</td>
                <td>Yes</td>
            </tr>
            <tr class='even'>
                <td class="table-sub-title"> TWO</td>
                <td>No</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td class="table-sub-title"> THREE</td>
                <td>No</td>
                <td>No</td>
            </tr>
            <tr class='even'>
                <td class="table-sub-title">VALUE</td>
                <td class="price">$9.<sup class="small-price">99</sup></td>
                <td class="price">$109.<sup class="small-price">99</sup></td>
            </tr>       
        </table>

 

 

 

 

Tabs

Responsive tabs are simple to use.

<div class="container">
    <div class="tabs">
        <a href="#" class="tab-but tab-but-1 tab-active">Tab 1</a>
        <a href="#" class="tab-but tab-but-2">Tab 2</a>   
    </div>
    <div class="tab-content tab-content-1">
        Tab Content
    </div>
    <div class="tab-content tab-content-2">
        Tab Content
    </div>
</div>    
The tabs class creates the tab controls buttons. To create more tab buttons duplicate line 4 and replace tab-but-2 with tab-but-3, and keep adding numbers growing with each new tab.  Also, when creating a new tab button add the tab-content tab-content-3 and keep adding growin numbers to each as more elements you add. 
 

Submenus In Page

To add more submenu items, duplicate the anchor classes. 

<div class="submenu-navigation">
    <a href="#" class="submenu-nav-deploy">Deploy Submenu</a>
    <div class="submenu-nav-items">
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
    </div>
</div>
 

Toggles

You can choose between 3 toggles, to switch between these toggles, replace toggle-1, deploy-toggle-1 with -2 and -3. For the toggle-3, be sure to add  the following code inside the anchor. <em><strong></strong></em> 

<div class="container">
    <div class="toggle-1">
        <a href="#" class="deploy-toggle-1">This is content toggle</a>
        <div class="toggle-content">
            Toggle Content Here
        </div>
    </div>
</div>
 

Big Notifications

Big notifications cna be used when a user must see a large notice and these can be closed as well. You can chose between 4 color codes red, green, yellow and blue. replace COLOR-notifcation with the color you want from the four above. 

<div class="big-notification red-notification">
    <h4 class="uppercase">Notification Title</h4>
    <a href="#" class="close-big-notification">x</a>
    <p>A lot of nice stuff you want to write in this notification! It's simple to use and awesome!</p>
</div>
 

Static Dismisable Notifications

Static small notifications can be dismissed with a simple tap. These work the same as the features from the typography page and can be switched between four color codes, green, blue, yellow or red. Replace static-notification-COLOR with the color you wish.

<div class="static-notification-red tap-dismiss-notification">
    <p class="center-text uppercase">A red notification! Dismiss!</p>
</div>

 

 

 

 

 

 

 

 

 

 

SImple Buttons

Not much to be explained here, these are button classes, copy and paste them where you need them. 

<a href="#" class="button button-red">Button</a>
<a href="#" class="button button-green">Button</a>
<a href="#" class="button button-blue">Button</a>
<a href="#" class="button button-magenta">Button</a>
<a href="#" class="button button-tea">Button</a>
<a href="#" class="button button-yellow">Button</a>
<a href="#" class="button button-orange">Button</a>
<a href="#" class="button button-light">Button</a>
<a href="#" class="button button-grey">Button</a>  
<a href="#" class="button button-dark">Button</a>  
<a href="#" class="button button-red">Button</a>
<a href="#" class="button button-green">Button</a>           

3D Button Classes

3D Buttons have a darker 4 pixel stroke beneeth them to give them a three dimensional effect. Just copy and paste them where you need them.

<a href="#" class="button-3d button-red red-3d">Button</a>
<a href="#" class="button-3d button-green green-3d">Button</a>
<a href="#" class="button-3d button-blue blue-3d">Button</a>
<a href="#" class="button-3d button-magenta magenta-3d">Button</a>
<a href="#" class="button-3d button-tea tea-3d">Button</a>
<a href="#" class="button-3d button-yellow yellow-3d">Button</a>
<a href="#" class="button-3d button-orange orange-3d">Button</a>
<a href="#" class="button-3d button-light light-3d">Button</a>
<a href="#" class="button-3d button-grey grey-3d">Button</a>    
<a href="#" class="button-3d button-dark dark-3d">Button</a>  
<a href="#" class="button-3d button-red red-3d">Button</a>
<a href="#" class="button-3d button-green green-3d">Button</a> 
 

Font Awesome Buttons

The font awesome class ( http://fortawesome.github.io/Font-Awesome/icons/  4.1.0 curent version ) allows you to import icons by simply adding the <i class="fa fa-ICON-NAME"></i> to your button. Check the link to see all icons available. Make sure you copy and paste the icon name corectly. In case you see that an icon is not displayed, it means that font-awesome has updated their classes and you need to update the font-awesome.css file. 

We won't be updating our files just for font-awesome.css because it would be a logistical nightmare to update all our 60+ files for just one CSS. Updating the class is extremely simple. Open http://fortawesome.github.io/Font-Awesome/ , download the pack, extract the file, (make a backup of font-awesome.css from our styles folder then ) replace font-awesome.css in our item, with the font-awesome.css you've just downloaded! Voila! Font awsome has been updated! 

In case this method does not work, revert to the old font-awesome you've just backed up and send us a message. We will fix the issue in less than 24 hours and give you a free update! 

<a href="#" class="button button-red"><i class="fa fa-navicon"></i>Button</a>
<a href="#" class="button button-green"><i class="fa fa-life-saver"></i>Button</a>
<a href="#" class="button button-blue"><i class="fa fa-paw"></i>Button</a>
<a href="#" class="button button-magenta"><i class="fa fa-camera"></i>Button</a>
<a href="#" class="button button-tea"><i class="fa fa-cog"></i>Button</a>
<a href="#" class="button button-yellow"><i class="fa fa-picture-o"></i>Button</a>
<a href="#" class="button button-orange"><i class="fa fa-question"></i>Button</a>
<a href="#" class="button button-light"><i class="fa fa-exclamation"></i>Button</a>
<a href="#" class="button button-grey"><i class="fa fa-angle-right"></i>Button</a>         
<a href="#" class="button button-dark"><i class="fa fa-angle-left"></i>Button</a>  
 

Speach Bubbles

The following code must be added in a container. 

<em class="speach-left-title">John Doe says:</em>
<p class="speach-left">This is just an awesome bubble! It's quite cute isn't it?</p>

<div class="clear"></div>

<em class="speach-right-title">Jane Doe replied:</em>
<p class="speach-right blue-bubble">Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!</p>

<div class="clear"></div>  

Once you've copied the code above, replace the text you need with yours. The top code will create a left speach bubble, the bottom code will create a right speach bubble. Copy and paste as many times as many bubbles you need. 

Device Specific Classes

Device specific classes will apear only for the device that browse them. We've added android, ipod, ipad, and iphones to the mix, because these represent 99% of the mobile marketshare. To change the device, simply replace the main class DEVICE-detected with android, ipod, iphone, or ipad.

We've made a small design for you, but inside the DEVICE-detected class you can add whatever content you wish to display for that specific platform. 

<div class="android-detected">
    <div class="detected-wrapper">
        <img src="images/detector/android.png" alt="img">
        <h4>Get it on Google Play</h4>
        <em>For your Android Device</em>
        <p>
            This is a demo box, included in the template, but you can detect Androids
            and add whatever text or element appear for that platform only!
        </p>
    </div>
</div>
 
 
 
 
 

 

One Item Portfolio

Inside the content class, create a class called portfolio-one, and inside it, add the following code to create a portfolio item. You can duplicate the code bellow to create more items. 

<div class="portfolio-one-item full-bottom">
    <div class="portfolio-one-image">
        <a href="images/pictures/3.jpg" class="swipebox" title="Caption Here">
            <i class="fa fa-plus"></i>
        </a>
        <img src="images/pictures/3.jpg" class="responsive-image">
    </div>

    <div class="portfolio-one-text">
        <h3 class="title">Portfolio Item</h3>
        <em class="subtitle">Awesome one column portfolio</em>
        <div class="portfolio-one-details">
            <a href="#">10 September 2055</a>
            <a href="#">Mobile</a>
            <a href="#">Envato Item</a>
        </div>
        <p class="half-bottom">
            Lorem ipsum dolor sit amet, consectetur est adipiscing elit. Pellentesque lacus ex,
            sollid um facilisis elementum quis, vulputate nec urna. In scelerisque tincidunt 
            enim, eutsmax. 
        </p>            
        <div class="portfolio-one-links">
            <a href="#"><i class="fa fa-arrow-right"></i> Visit Project</a>
            <a href="#">Details <i class="fa fa-link"></i></a>
        </div> 
    </div>       
</div>
Line 1 creates the hosing box for the portfolio item. 
Line 2 creates the portfolio one image wrapper.
Line 3 4 5 6 creates the swipebox gallery wrapper, inside of this there is the plus icon.
Lines 9 to 26 house the portfolio title, subtitle, details, text and links. Replace them acording to your needs! 
 

Two Item Portfolio

Inside the content class, create a class called portfolio-two, and inside it, add the following code to create a portfolio item. You can duplicate the code bellow to create more items. 

<div class="portfolio-two-item full-bottom">
    <div class="portfolio-two-image">
        <a href="images/pictures/3.jpg" class="swipebox" title="Caption Here">
            <i class="fa fa-plus"></i>
        </a>
        <img src="images/pictures/3s.jpg" class="responsive-image">
    </div>

    <div class="portfolio-two-text">
        <h3 class="title">Portfolio Item</h3>
        <em class="subtitle">Portfolio items placed on multiple columns.</em>
        <p class="half-bottom">
            Lorem ipsum dolor sit amet, consecte tur est adipiscing elit. Lacus 
            sollid um facilisis eleme quis, vulputat nec. 
        </p>            
        <div class="portfolio-two-links">
            <a href="#"><i class="fa fa-arrow-right"></i> Visit Project</a>
        </div> 
    </div>       
</div>
 
The second portfolio follows the same rules as the first one, same code manages it, only the way it reacts in responsive screen differes. 

Wide Portfolio

<div class="portfolio-wide">
    <a href="#" class="portfolio-wide-item">
        <h3>Swing near the ocean</h3>
        <p>This is a wide item, just tap it to read more</p>
        <div class="overlay"></div>
        <img class="responsive-image" src="images/pictures/1ww.jpg" alt="img">
    </a>
</div>

To make more wide items, duplicate the anchor class.

Line 3 creates the wide portfolio title.

Line 4 creates the wide portfolio text

Line 5 creates the overlay for the image

Line 6 creates the image itself. 

 

 

<ul class="gallery round-thumb">
    <li>
        <a class="swipebox" href="images/pictures/1.jpg" title="An awesome gallery!">
            <img src="images/pictures/1s.jpg" alt="img" />
        </a>
    </li>
</ul>
To change the style of the gallery from round to square, relace the round-thumb with square thumb.
To add more images, simply duplicate the list class. The title of the anchor represents the image caption. 
 
<div class="portfolio-wide">
    <a href="images/pictures/1.jpg" class="swipebox portfolio-wide-item" titlte="caption here">
        <h3>Swing near the ocean</h3>
        <p>This is a wide item, just tap it to read more</p>
        <div class="overlay"></div>
        <img class="responsive-image" src="images/pictures/1ww.jpg" alt="img">
    </a>
</div>

The wide gallery is the exact same thing as a portfolio, only, it houses the swipebox class inside the main anchor. 

404 Error Page

<div class="coverpage coverpage-bg3 coverpage-error">
    <div class="coverpage-content">
         <h1>404</h1>
            <h4>You're on the wrong page!</h4>
            <p>
                We're either building this page now, and you're 
                here too soon, or the page doesn't exist! So
                how about going back home?
            </p>
            <a class="coverpage-button" href="#">Homepage</a>
        </div>
    <div class="overlay"></div>
</div>

 

This code generates the 404 page. It should be outside the content. We suggest not including a footer on these pages

Line 1 creates the coverpaage, meaning, the 100% height of the page, this has the class coverpage-bg3 which is the background image. To edit and replace the background image, open framework.css and find (ctrl + f or cmd + f ) .coverpage-bg3, replace the image there with your own. 

Line 3 is the main title

Line 4 is the small title

Line 5 to 9 is the 404 page text

Line 10 is the button to direct users back to a page you desire. 

 

Under Construction Page

 

<div class="coverpage coverpage-bg4 coverpage-construction">
    <div class="coverpage-content">
        <h1>Coming Soon</h1>
        <h4>We're still building this page</h4>
        <p>
            This page is curently under construction, but feel
            free to check it later we'll have it complete realy soon!
        </p>
        <div class="countdown">
            <!-- Time Generated By Custom.JS -->
        </div>
        <a class="coverpage-button" href="#">Homepage</a>
    </div>
    <div class="overlay"></div>
</div>

 

The same principle of placing the construction page applies as for the 404 page 

Line 3 is the main title

line 4 is the main sub title

line 5 is the text

line 9 to 11 is the countdown timer, you can open custom.js and locate the countdown code, it's on the top lines. Replace the date there with yours.

Line 12 is the button to redirect users wherever you want them! 

 

Profile Header

<div class="profile-header full-bottom">
    <div class="profile-header-contents">
        <img class="profile-header-logo" src="images/pictures/3s.jpg" alt="img">
        <h4 class="profile-header-heading">John Doe</h4>
        <em class="profile-header-subheading">Professional Consultant</em>
        <div class="profile-header-socials">
            <a href="#">
                <i class="fa fa-facebook"></i>
                5k+ Likes
            </a>
            <a href="#">
                <i class="fa fa-twitter"></i>
                9k+ Followers   
            </a>
            <a href="#">
                <i class="fa fa-google-plus"></i>
                2.5k + Plus
            </a>
        </div>
    </div>
    <div class="profile-header-background"></div>
    <div class="profile-header-overlay"></div>
</div>
 
This creates a profile header page, with a large background image at the top and a logo. Let's explain the code.
 
This section should be place outside the content class. It wil allow it to strech to fullscreen. 
Line 3 creates the profile header icon, inside framework.css search (ctrl + f or cmd + f ) profile-header-logo and replace the width and height of the image with yours 
Line 4 is the text under the logo. The title
Line 5 is the text under the main text. The subtitle
Line 6 to line 20 create the social icons. Remember! This is just a template. the system to pull data from social networks is PHP and server side based! 
Line 21 is the header background. Open framework.css and locate profile-header-background. Once you've done that replace the image there with what image you wish 
Line 22 is the black overlay. We added this to make the text more readable. 
 

Updates Page

The following code creates a notification that uses a image for the icon.  Replace the second line image with an image you desire. 

<p class="notification-page-item">
    <img src="images/pictures/1s.jpg" alt="img">
    <em>
        Site outage for update. More updates soon. Tap read more for further information.
    </em>
    <a href="#">Read More</a>
    <a href="#">15th July 2016</a>
</p>
 
The code bellow generates a notification that uses a font awesome icon. You can use any icon found in the font awesome pack. We added the background there for you just to replace with casual hex colors.
 
<p class="notification-page-item">
    <i class="fa fa-facebook" style="background-color:#3B5998;"></i>
    <em>
        We just launched a Facebook page, for news and updates, go ahead and like our page.
    </em>
    <a href="#">Like our Page</a>
    <a href="#">15th July 2016</a>
</p>
 
Color notitifications can be used to have the default colors of basic notifications, so replacing the yellow-notification in the example bellow with blue-notification, green-notification or red-notification will change the icon background color. For icons, use anything you'd like from the font awesome library! 
 
<p class="notification-page-item">
    <i class="fa fa-warning yellow-notification"></i>
    <em>
        Important notifications here! Just a simple class, copy and paste it and you're ready!
    </em>
    <a href="#">Follow on Twitter</a>
    <a href="#">15th July 2016</a>
</p>  
 

 

 

This documentation is made for the page features, but the first documentation will cover the navigation, header, changing logos and more details that are independent to each template. 

 

Where do I get hands on support? 

That's simple. Send us a message using this form -> http://enableds.com/html-support/

 

Please rate 5 stars! 

If there is something wrong with the file, we'll help you, if there are features ( and by features we don't mean things like creating a new social network for you that competes with facebook ) we'll most likely add that too, and usually for free! If there is anything we can do to help, we will, plus, you got a mobile app like interface template for 10$. A 5 star rating will not hurt you, and it will only take a minute to give, but it will help us more than you can imagine! So thnak you in advance for your purchase and your rating! 

Let us know if we can help you at http://enableds.com/html-support/