Flatastic - Ecommerce

Responsive HTML5 & CSS3 Template


Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to contact us via Ticksy Support System. Thanks so much!

The templates has 27 HTML files:

<!doctype html>
<!--[if IE 9 ]><html class="ie9" lang="en"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
    <head>
        <title>Flatastic - Home</title>

        <!--meta info-->

        <!--stylesheet include-->

        <!--font include-->
      
        <!--styleswitcher-->
       
        <!--boxed layout-->

            <!--markup header-->

                <!--header top part-->
               
                <!--header bottom part-->
             
                                <!--language settings-->
                               
                                <!--currency settings-->
                              
                                <!--shopping cart-->
                             
                                                    <!--product image-->
                                                  
                                                    <!--product description-->
                                                   
                                                    <!--product price-->
                                                  
                                        <!--total price-->
                                       
                <!--main menu container-->
 
                        <!--button for responsive menu-->
                       
                        <!--main menu-->
                      
                                    <!--sub menu-->
                                   
                                    <!--sub menu-->
                                   
                                    <!--sub menu-->
                                  
                                    <!--sub menu-->
                                   
                    <!--search form-->
                  
            <!--slider-->
          
            <!--content-->

                    <!--filter navigation of products-->
                 
                    <!--products-->
                                                   
                        <!--product item-->
    
                                <!--product preview-->
                  
                                    <!--sale product-->
                                   
                                <!--description and price of product-->
                              
                    <!--product brands-->
                 
                    <!--product brands carousel-->
                
                    <!--blog-->
                  
                            <!--blog carousel-->
                           
                        <!--testimonials-->
                       
                            <!--testimonials carousel-->
                           
                    <!--banners-->
                   
            <!--markup footer-->
          
                                <!--social icons-->
                            
                <!--copyright part-->
 
        <!--social widgets-->

            <!--facebook-->
  
            <!--twitter feed-->
 
            <!--contact form-->

            <!--contact info-->
 
        <!--custom popup-->

                            <!--carousel-->

                                <!-- AddThis Button BEGIN -->

                                <!-- AddThis Button END -->

                        <!--right popup column-->

                            <!--description-->

                                <!--rating--> 


        <!--scripts include-->
      
    </body>
</html>

This template uses 13 css files:

 

Tha main CSS file is style.css and has the following structure:

/* ----------------------------------
    1. Reset default browser styles
    2. Basic classes and elements
    3. Color Scheme
    4. Typography
    5. Header
    6. Sliders
    7. Tabs
    8. Carousels
    9. Twitter Feed
    10. Lists and navigations
    11. Buttons
    12. Tables
    13. Icons
    14. Main content elements
    15. Forms
    16. Footer
    17. Animations
    18. Responsive changes
    19. Retina ready
-------------------------------------*/
 

This theme includes 19 Javascript files.

First, create your own keys at the https://dev.twitter.com/. Create your own application and generate keys for you domain.

Second, open the twitter\index.php file and replace the current keys with yours:

    // Your Twitter App Consumer Key
    private $consumer_key = 'prGwIqh0DxorZcltCReQ7Q';

    // Your Twitter App Consumer Secret
    private $consumer_secret = 'Ovmq7ekQnLwc883fpqfEdAAhc4sLSWb609j566aXnok';

    // Your Twitter App Access Token
    private $user_token = '308471286-9tVgRFg0wIALwviPpp8QduLKPkYTM3AhPpClO6DW';

    // Your Twitter App Access Token Secret
    private $user_secret = 'trpkaAjNXydy0pvDeswANtw9zjhnOvSkYhqJukZsK8';

Third, open the js\custom.js file, in line 740 find the following code:

username: 'fanfbmltemplate',

Replace fanfbmltemplate with your twitter username.

To change a contact form email open bat/mail.php and insert you email

$user_email = "";

To change a newsletter email open bat/newsletter.php and insert you email

'Reply-To: flatastic@flatastic.com'

There are 18 Well-organized PSD files

 

I've used the following scripts:

All clipart, sounds and videos are my own work and belong to me.
Your can use them only for your personal needs.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section or http://velikorodnov.ticksy.com/.

mad_velikorodnov

Version 3.0 – July 5th, 2016

ADDED:
- 4 new skins;


Version 2.3.4 – July 30th, 2015

ADDED:
- RTL;


Version 2.3.1 – July 22nd, 2014

FIXED:
- anchor in the footer on the category_grid.html and category_list.html files;

HOW TO MAKE THE UPDATE:

Version 2.3.3 – December 6th, 2014

FIXED:
- menu for ipad;

HOW TO MAKE THE UPDATE:

Replace style.css and scripts.js. Also, in all HTML files you need to connect the following line: <script src="js/modernizr.js"></script> before the </head> tag.


Version 2.3.1 – July 22nd, 2014

FIXED:
- anchor in the footer on the category_grid.html and category_list.html files;

HOW TO MAKE THE UPDATE:

In these files find autofocus and remove it.

Version 2.3 – June 26th, 2014

FIXED:
- hover on shopping cart;
- titles for the portfolio items on the portfolio pages. Before, when the title was long it destroyed the portfolio grid

HOW TO MAKE THE UPDATE:

Hover on shopping cart.
1. Open the style.css file and add the following code:
#shopping_button{
z-index:189;
}

2. Open the scripts.js file and add the following code:
$('#shopping_button').on('mouseenter',function(){
$(this).css('z-index','300');
}).on('mouseleave',function(){
$(this).css('z-index','189');
});

Titles for the portfolio items on the portfolio pages.
For example, we'll take the portfolio_two_columns.html file.
1. Open the portfolio_two_columns.html file and for an element that has the "portfolio_isotope_container" class add the "two_columns" class.

2. In the style.css file in line 2744 replace all the block and next block (that is under it) with:
.portfolio_isotope_container .portfolio_item,
.portfolio_masonry_container .portfolio_item{
margin:15px 0;
padding:0 15px;
}
.portfolio_isotope_container.two_columns .portfolio_item{
width:50%;
}
.portfolio_isotope_container.three_columns .portfolio_item{
width:33.3%;
}
.portfolio_isotope_container.four_columns .portfolio_item{
width:24.9%;
}

3. Here below find this selector:
.portfolio_isotope_container.four_columns .portfolio_item

and delete the block with styles.

4. In line 3392 find the blocks with selectors and delete them:
.portfolio_isotope_container .portfolio_item
.portfolio_isotope_container.three_columns .portfolio_item
.portfolio_isotope_container.four_columns .portfolio_item

5. Line 3625 delete the same selectors.

6. Line 3846 in the block with the styles add the !important for all these styles. It should be:
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;


Version 2.2 – May 28th, 2014

FIXED:
- responsive version;
- active menu item;
- share icons.
- Firefox issue.

ADDED:
- Alert message for old IE versions.

HOW TO MAKE THE UPDATE:

Responsive version. Open the categories_list.html file, find the links with the pp_wrap class, remove the m_xs_bottom_15 and m_xs_right_0 classes, add the m_xs_right_25 class.
In the style.css file in line 3858 (or about) find the line .products_container .product_item .photoframe and replace it with .products_container:not(.list_type) .product_item .photoframe
Find the @media only screen and (max-width: 992px){ line and after it add:
.product_item:not(.list_type){
width:226px;
}

Find the @media only screen and (max-width:480px){ line and after it add:
.products_container.list_type .pp_wrap{
width:100px;
}


Active menu item. If you need that a certain menu item becomes active just add the current class to the <li> tag in a proper HTML file. For example:
<li class="relative f_xs_none m_xs_bottom_5"><a href="category_grid.html" class="tr_delay_hover color_light tt_uppercase"><b>Shop</b></a>
after adding the class it will become active:
<li class="current relative f_xs_none m_xs_bottom_5"><a href="category_grid.html" class="tr_delay_hover color_light tt_uppercase"><b>Shop</b></a>

Share icons. Add this line <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-5306f8f674bfda4c"></script> before the </body> tag in HTML files (index.html, index_layout_2.html, index_layout_wide.html, category_grid.html, category_list.html, product_page_sidebar.html, full_width_product_page.html)

Firefox issue. In the scripts.js file find the following function:
// synchronise

$.fn.waypointSynchronise = function(config){
var element = $(this);
function addClassToElem(el,eq){
el.eq(eq).addClass(config.classN);
}
element.closest(config.container).waypoint(function(direction){
element.each(function(i){
if(direction === 'down'){

if(config.globalDelay){
setTimeout(function(){
setTimeout(addClassToElem,i * config.delay,element,i);
},config.globalDelay);
}else{
setTimeout(addClassToElem,i * config.delay,element,i);
}

}else{

if(config.inv){
setTimeout(function(){
element.eq(i).removeClass(config.classN);
},i * config.delay);
}

}
});
},{ offset : config.offset }).resize();
return element;
};

and replace it with the following:

// synchronise

$.fn.waypointSynchronise = function(config){
var element = $(this);
function addClassToElem(el,eq){
el.eq(eq).addClass(config.classN);
}
element.closest(config.container).waypoint(function(direction){
element.each(function(i){
if(direction === 'down'){

if(config.globalDelay != undefined){
setTimeout(function(){
setTimeout(function(){
addClassToElem(element,i);
},i * config.delay);
},config.globalDelay);
}else{
setTimeout(function(){
addClassToElem(element,i)
},i * config.delay);
}

}else{

if(config.inv){
setTimeout(function(){
element.eq(i).removeClass(config.classN);
},i * config.delay);
}

}
});
},{ offset : config.offset });
return element;
};


Alert message for old IE versions. Add the following code to HTML files after first <div> tag (see in the source files):

<!--[if (lt IE 9) | IE 9]>
<div style="background:#fff;padding:8px 0 10px;">
<div class="container" style="width:1170px;"><div class="row wrapper"><div class="clearfix" style="padding:9px 0 0;float:left;width:83%;"><i class="fa fa-exclamation-triangle scheme_color f_left m_right_10" style="font-size:25px;color:#e74c3c;"></i><b style="color:#e74c3c;">Attention! This page may not display correctly.</b> <b>You are using an outdated version of Internet Explorer. For a faster, safer browsing experience.</b></div><div class="t_align_r" style="float:left;width:16%;"><a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode" class="button_type_4 r_corners bg_scheme_color color_light d_inline_b t_align_c" target="_blank" style="margin-bottom:2px;">Update Now!</a></div></div></div></div>
<![endif]-->



Version 2.1 – April 17th, 2014

FIXED:
- the shopping cart block in the headers;
- social side blocks (Join Us on Facebook, Latest Tweets, Contact Us, Store Location) are not scrolled now with the content;

HOW TO MAKE THE UPDATE:
In the inc folder open the header_1.html, header_2.html, header_3.html, header_4.html files with any text editor, find id=”shopping_button” and move it in the li tag that is above.

If you want that the social side widgets are not scrolled, the you need in the styles.css file find the .social_widgets class:

.social_widgets{
position:absolute;
right:0;
top:56%;
z-index:110;
}
Replace position:absolute; with position:fixed; and replace top:56%; with top:26%;


Version 2.0 – April 10th, 2014

ADDED:
- CORPORATE STYLE;
- 10 PSD files;
- 9 HTML files: corporate homepage, shortcodes, typography, 2 column portfolio, 3 column portfolio, 4 column portfolio, masonry portfolio, 2 variants of single portfolio post;
- 5th footer;


Version 1.0 – March 24th, 2014

Initial release.