SuperOwl - Kindergarten, School of Early Learning

Nanny Agency HTML template

created: 03/05/2017
latest update: 03/02/2017
by: Monkeysan
themeforest.net/user/monkeysan

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 template has 29 HTML files:

about.html
about2.html
class_single.html
class_tt.html
classes.html
columns.html
contact.html
elements.html
events.html
gallery_grid.html
gallery_masonry.html
header-2.html
header-3.html
home_2.html
home_3.html
home_4.html
home_5.html
home_6.html
home_7.html
index.html
news_big.html
news_single.html
news_small.html
page_404.html
services.html
single_event.html
staff.html
staff_member.html
typography.html

<!doctype html>
<html lang="en">

   


   


   


   


   


</head>

<body>

<div class="loader"></div>






    

    



           

             


                       


                       


                           


                            




                            


       

    

    

       



                       



                       

                       


                       

                       


                       



                       


                       

                       


                       

                       


                       



                       


                       

                       


                       

                       


                       

                   </li>

               </ul>

           </div>

        </div>

        


           


               


               


               


       



                                   

                                       


                                       



                                   

                                   

                                       



                                       



                                   

                                   



                                       



                                       



                                   



                   


                   


                   


                   


                   


                   


                       


                                 

                                     


                                     

                                 

                                 

                                     

                                     

                                 

                                 

                                     

                                     

                                 


               


                   

                                       



                                       

                                       



                                       



                   


                                       


                                       

                                       


                                       



                   


                                       



                                       

                                       


                                       



    

    



                   

                   

                   

                   


       


    







</body>
</html>

This template uses 9 css files:

audioplayer.css
bootstrap.min.css
fontello.css
jquery.fancybox.css
owl.carousel.css
owl.theme.css
owl.transitions.css
responsive.css
style.css

The main style.css has such structure

/* ----------------------------------
1. Reset default browser styles
2. Global
3. General classes
4. Typography
5. Header
6. Content Elements
7. UI Elements
      7.1. Buttons
      7.2. Forms
          7.2.1. Inputs & Textarea
          7.2.2. Label & Legend
          7.2.3. Checkbox & Radio
          7.2.4. Select
          7.2.5. Fieldset
          7.2.6. Form variations
      7.3. Tables
      7.4. Lists
      7.5. Blockquotes
      7.6. Dividers
8. Widgets & Shortcodes
      8.1. Twitter Feed
      8.2. Instagram Feed
      8.3. LightBox
      8.5. Accordions & Toggles
      8.6. Alert boxes
      8.7. Callouts
      8.8. Pagination
      8.9. Dropcaps
      8.10. Icon Boxes
      8.11. Testimonials
      8.12. Carousel Sliders
      8.13. Progress Bars
      8.14. Pricing Tables
      8.15. Counters
      8.16. Tabs & Tour Sections
      8.17. Isotope
      8.18. Team Members
      8.19. Google Map
      8.20. Services
      8.21. Countdown
      8.22. Audio Player
9. Blog
      9.1. Entries
10. Portfolio
11. Shop
12. Sidebar
13. Footer
-------------------------------------*/

The template has 26 HTML files:

plugins.js
script.js
jquery-2.2.4.min.js
jquery-ui.min.js
jquery.modernizr.js
modernizr.js
retina.min.js
apear.js
audioplayer.js
bootstrap.js
elevatezoom.min.js
instafeed.min.js
isotope.pkgd.min.js
jquery.countdown.min.js
jquery.countdown.plugin.min.js
jquery.fancybox.js
jquery.localScroll.min.js
jquery.queryloader2.min.js
jquery.scrollTo.min.js
owl.carousel.min.js
jquery.fancybox.js
jquery.fancybox.pack.js
jquery.themepunch.revolution.min.js
jquery.themepunch.tools.min.js
jquery.tweet.js
jquery.tweet.min.js

If you want to change slider settings, for example, you want switch on/off autoslideshow or change time delay you can find all slider settings here js/script.js

The template has 6 footers and 6 headers.

If you want to use any header you have to go, for example, to html\inc\header4.html

and replace code on your page with below

<div class="h_top_part">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <div class="header_top mobile_menu">
            <nav>
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Forums</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </nav>
            <div class="login_block">
              <div class="widget widget_social_icons type_2 tool_down clearfix">
                <ul>
                  <li class="facebook">
                    <span class="tooltip">Facebook</span>
                    <a href="#">
                      <i class="fa fa-facebook"></i>
                    </a>
                  </li>
                  <li class="twitter">
                    <span class="tooltip">Twitter</span>
                    <a href="#">
                      <i class="fa fa-twitter"></i>
                    </a>
                  </li>
                  <li class="google_plus">
                    <span class="tooltip">Google+</span>
                    <a href="#">
                      <i class="fa fa-google-plus"></i>
                    </a>
                  </li>
                  <li class="rss">
                    <span class="tooltip">Rss</span>
                    <a href="#">
                      <i class="fa fa-rss"></i>
                    </a>
                  </li>
                  <li class="pinterest">
                    <span class="tooltip">Pinterest</span>
                    <a href="#">
                      <i class="fa fa-pinterest"></i>
                    </a>
                  </li>
                  <li class="instagram">
                    <span class="tooltip">Instagram</span>
                    <a href="#">
                      <i class="fa fa-instagram"></i>
                    </a>
                  </li>
                  <li class="linkedin">
                    <span class="tooltip">LinkedIn</span>
                    <a href="#">
                      <i class="fa fa-linkedin"></i>
                    </a>
                  </li>
                  <li class="vimeo">
                    <span class="tooltip">Vimeo</span>
                    <a href="#">
                      <i class="fa fa-vimeo-square"></i>
                    </a>
                  </li>
                  <li class="youtube">
                    <span class="tooltip">Youtube</span>
                    <a href="#">
                      <i class="fa fa-youtube-play"></i>
                    </a>
                  </li>
                  <li class="flickr">
                    <span class="tooltip">Flickr</span>
                    <a href="#">
                      <i class="fa fa-flickr"></i>
                    </a>
                  </li>
                  <li class="envelope">
                    <span class="tooltip">Contact Us</span>
                    <a href="#">
                      <i class="fa fa-envelope-o"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
<div class="h_bot_part">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <div class="clearfix">
            <a href="index.html" class="f_left logo"><img src="images/logo.png" alt=""></a>
            <div class="f_right">
              <div class="login_block">
                <ul>
                  <li class="login_button shop_button">
                    <a href="#" role="button">
                      <i class="fa fa-shopping-cart"></i>Cart(0)
                    </a>
                    <div class="shopping_cart">
                      <div class="sc_header">Recently added item(s)</div>
                      <div class="products_list">
                        <ul>
                          <li>
                            <div>
                              
                              <img src="images/shopping_c_img_1.jpg" alt="">
                              
                              <div class="product_description">
                                <a href="#">Cursus eleifend elit aenean</a>
                                <div>
                                  1 x $499.00
                                </div>
                              </div>
                              
                              <button class="close_product"><i class="fa fa-times-circle"></i></button>
                            </div>
                          </li>
                          <li>
                            <div>
                              
                              <img src="images/shopping_c_img_2.jpg" alt="">
                              
                              <div class="product_description">
                                <a href="#">Cursus eleifend elit aenean</a>
                                <div>
                                  1 x $1599.00
                                </div>
                                <div>
                                  Size: 2-Seat Sofa, <br>
                                  Color: Red
                                </div>
                              </div>
                              
                              <button class="close_product"><i class="fa fa-times-circle"></i></button>
                            </div>
                          </li>
                          <li>
                            <div>
                              
                              <img src="images/shopping_c_img_3.jpg" alt="">
                              
                              <div class="product_description">
                                <a href="#">Cursus eleifend elit aenean</a>
                                <div>
                                  2 x $99.00
                                </div>
                              </div>
                              
                              <button class="close_product"><i class="fa fa-times-circle"></i></button>
                            </div>
                          </li>
                        </ul>
                      </div>
                      
                      <div class="total_price">
                        <ul>
                          <li><span>Tax:</span><span>$0.00</span></li>
                          <li><span>Discount:</span><span>$37.00</span></li>
                          <li><span>Total:</span><span>$999.00</span></li>
                        </ul>
                      </div>
                      <div class="sc_footer">
                        <button class="button button_grey full_width">View Cart</button>
                        <button class="button button_orange full_width">Checkout</button>
                      </div>
                    </div>
                  </li>
                  
                  <li class="login_button">
                    <a href="#" role="button"><i class="fa fa-user login_icon"></i>Login</a>
                    <div class="popup">
                      <form>
                        <ul>
                          <li>
                            <label for="username">Username</label><br>
                            <input type="text" name="" id="username">
                          </li>
                          <li>
                            <label for="password">Password</label><br>
                            <input type="password" name="" id="password">
                          </li>
                          <li>
                            <input type="checkbox" id="checkbox_10"><label for="checkbox_10">Remember me</label>
                          </li>
                          <li>
                            <a href="#" class="button button_orange">Log In</a>
                            <div class="t_align_c">
                              <a href="#" class="color_dark">Forgot your password?</a><br>
                              <a href="#" class="color_dark">Forgot your username?</a>
                            </div>
                          </li>
                        </ul>
                      </form>
                      <section class="login_footer">
                        <h3>New Customer?</h3>
                        <a href="#" class="button button_grey">Create an Account</a>
                      </section>
                    </div>
                  </li>
                  
                  <li class="lang_button">
                    <a role="button" href="#"><img class="d_inline_middle m_right_10 m_mxs_right_0" src="images/flag_en.jpg" alt=""><span class="d_mxs_none">English</span></a>
                    <ul class="dropdown_list">
                      <li><a href="#" class="tr_delay_hover default_t_color"><img class="d_inline_middle" src="images/flag_en.jpg" alt="">English</a></li>
                      <li><a href="#" class="tr_delay_hover default_t_color"><img class="d_inline_middle" src="images/flag_g.jpg" alt="">German</a></li>
                      <li><a href="#" class="tr_delay_hover default_t_color"><img class="d_inline_middle" src="images/flag_s.jpg" alt="">Spanish</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
              <form class="search">
                <input type="text" name="" placeholder="Search">
                <button class=""><i class="fa fa-search"></i></button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

<div class="menu_wrap">
    <div class="container clearfix">
      
      <button id="menu_button">
        <div>Menu</div>
      </button>
      
      <nav role="navigation" class="main_menu">
        <ul>
          <li class="current"><a href="#">Home<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>
            
            <div class="sub_menu_wrap clearfix">
              <div>
                <div>Homepage Layouts</div>
                <ul>
                  <li><a href="index.html">Home 1</a></li>
                  <li><a href="home_2.html">Home 2</a></li>
                  <li><a href="home_3.html">Home 3</a></li>
                  <li><a href="home_4.html">Home 4</a></li>
                  <li><a href="home_5.html">Home 5</a></li>
                </ul>
              </div>
              <div>
                <div>Header Styles</div>
                <ul>
                  <li><a href="index.html">Header 1</a></li>
                  <li><a href="home_2.html">Header 2</a></li>
                  <li><a href="home_3.html">Header 3</a></li>
                  <li><a href="home_4.html">Header 4</a></li>
                  <li><a href="home_5.html">Header 5</a></li>
                </ul>
              </div>
              <div>
                <div>Footer Styles</div>
                <ul>
                  <li><a href="index.html">Footer 1</a></li>
                  <li><a href="home_2.html">Footer 2</a></li>
                  <li><a href="home_3.html">Footer 3</a></li>
                  <li><a href="home_4.html">Footer 4</a></li>
                  <li><a href="home_5.html">Footer 5</a></li>
                </ul>
              </div>
            </div>
          </li>
          <li><a href="#">Business<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>

          </li>
          <li><a href="#">Sport<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>

          </li>
          <li><a href="#">Health<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>

          </li>
          <li><a href="#">Pages<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>
            
            <div class="sub_menu_wrap type_2 clearfix">
              <ul>
                <li><a href="page_full_width.html">Full width page</a></li>
                <li><a href="page_author.html">Author page</a></li>
                <li><a href="page_about.html">About us</a></li>
                <li><a href="page_contributors.html">Contributors</a></li>
                <li><a href="page_contact.html">Contact</a></li>
                <li><a href="page_404.html">404 page</a></li>
                <li><a href="page_archives.html">Archives</a></li>
                <li><a href="page_tags.html">Tags</a></li>
                <li><a href="page_search_results.html">Search results</a></li>
                <li><a href="page_sitemap.html">Sitemap</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#">Features<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>
            
            <div class="sub_menu_wrap type_2 clearfix">
              <ul>
                <li><a href="features_elements.html">Elements</a></li>
                <li><a href="features_typography.html">Typography</a></li>
                <li><a href="features_columns.html">Columns</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#">Blog<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>
            
            <div class="sub_menu_wrap type_2 clearfix">
              <ul>
                <li><a href="#">Category layouts<span class="plus"><i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i></span></a>
                  
                  <div class="sub_menu_wrap sub_menu_inner type_2 clearfix">
                    <ul>
                      <li><a href="blog_category1.html">Category layout 1</a></li>
                      <li><a href="blog_category2.html">Category layout 2</a></li>
                      <li><a href="blog_category3.html">Category layout 3</a></li>
                      <li><a href="blog_category4.html">Category layout 4</a></li>
                      <li><a href="blog_category5.html">Category layout 5</a></li>
                      <li><a href="blog_category6.html">Category layout 6</a></li>
                      <li><a href="blog_category7.html">Category layout 7</a></li>
                      <li><a href="blog_category8.html">Category layout 8</a></li>
                    </ul>
                  </div>
                </li>
                <li><a href="#">Post layouts & formats<span class="plus"><i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i></span></a>
                  
                  <div class="sub_menu_wrap sub_menu_inner type_2 clearfix">
                    <ul>
                      <li><a href="blog_simple_post.html">Simple post</a></li>
                      <li><a href="blog_full_width_post.html">Full width post</a></li>
                      <li><a href="blog_featured_post.html">Extended featured image post</a></li>
                      <li><a href="blog_gallery_post.html">Gallery post</a></li>
                      <li><a href="blog_slideshow_post.html">Slideshow post</a></li>
                      <li><a href="blog_spotlight_post.html">Post with spotlight</a></li>
                      <li><a href="blog_video_post.html">Video post</a></li>
                      <li><a href="blog_audio_post.html">Audio post</a></li>
                      <li><a href="blog_review_post.html">Review post</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="#">Portfolio<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>
            
            <div class="sub_menu_wrap type_2 clearfix">
              <ul>
                <li><a href="#">Portfolio layouts<span class="plus"><i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i></span></a>
                  
                  <div class="sub_menu_wrap sub_menu_inner type_2 clearfix">
                    <ul>
                      <li><a href="portfolio_1column_with_sidebar.html">1 Column With Sidebar</a></li>
                      <li><a href="portfolio_2columns.html">2 Columns</a></li>
                      <li><a href="portfolio_2columns_with_sidebar.html">2 Columns With Sidebar</a></li>
                      <li><a href="portfolio_3columns.html">3 Columns</a></li>
                      <li><a href="portfolio_3columns_with_sidebar.html">3 Columns With Sidebar</a></li>
                      <li><a href="portfolio_4columns.html">4 Columns</a></li>
                    </ul>
                  </div>
                </li>
                <li><a href="#">Gallery layouts<span class="plus"><i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i></span></a>
                  
                  <div class="sub_menu_wrap sub_menu_inner type_2 clearfix">
                    <ul>
                      <li><a href="gallery_2columns.html">2 columns</a></li>
                      <li><a href="gallery_3columns.html">3 columns</a></li>
                      <li><a href="gallery_4columns.html">4 columns</a></li>
                    </ul>
                  </div>
                </li>
                <li><a href="#">Post layouts & formats<span class="plus"><i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i></span></a>
                  
                  <div class="sub_menu_wrap sub_menu_inner type_2 clearfix">
                    <ul>
                      <li><a href="image_gallery_post.html">Image gallery post</a></li>
                      <li><a href="image_slideshow_post.html">Image slideshow post</a></li>
                      <li><a href="extended_image_slideshow_post.html">Extended image slideshow post</a></li>
                      <li><a href="youtube_video_playlist_post.html">Youtube video playlist post</a></li>
                      <li><a href="vimeo_video_playlist_post.html">Vimeo video playlist</a></li>
                      <li><a href="video_slideshow_post.html">Video slideshow post</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="#">Buddypress<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>
            
            <div class="sub_menu_wrap type_2 clearfix">
              <ul>
                <li><a href="#">Forums<span class="plus"><i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i></span></a>
                  
                  <div class="sub_menu_wrap sub_menu_inner type_2 clearfix">
                    <ul>
                      <li><a href="forum_front_page.html">Front page</a></li>
                      <li><a href="forum_topics_page.html">Topics page</a></li>
                      <li><a href="forum_single_topic_page.html">Single topic page</a></li>
                    </ul>
                  </div>
                </li>
                <li><a href="buddypress_activity.html">Activity</a></li>
                <li><a href="buddypress_groups.html">Groups</a></li>
                <li><a href="buddypress_members.html">Members</a></li>
                <li><a href="buddypress_single_member.html">Single member</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#">Shop<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>
            
            <div class="sub_menu_wrap type_2 clearfix">
              <ul>
                <li><a href="shop_front_page_with_sidebar.html">Front page with sidebar</a></li>
                <li><a href="shop_full_width_front_page.html">Full width front page</a></li>
                <li><a href="shop_product_page.html">Product page</a></li>
                <li><a href="shop_shoping_cart.html">Shopping cart</a></li>
                <li><a href="shop_checkout.html">Checkout</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </nav>
    </div>
</div>

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. Read more here: http://imulus.github.io/retinajs/

If you want to switch off sticky menu open js/script.js and find:

/*   Sticky menu                                           */
        /* ---------------------------------------------------- */

       $('body').Temp({
           sticky: true
       });

Replace true with false

To remove preloader open HTML and remove element <div id="loader"></div>.

and

<script src="plugins/jquery.queryloader2.min.js"></script>

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

Second, open the \plugins\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\script.js file, in line 485 find the following code:

username: 'fanfbmltemplate',
Replace fanfbmltemplate with your twitter username.

To change a contact form and subscribe emails open bat/mail.php, newsletter.php and insert you email

$user_email = "mail@companyname.com";

I've used the following scripts:

plugins.js - embed plugins js
script.js - all plugins settings + custom js
jquery-2.2.4.min.js - main JS library
jquery-ui.min.js -
jquery.modernizr.js - is a small piece of JavaScript code that automatically detects the availability of next-generation web technologies in your user's browsers
retina.min.js - is an open source script that makes it easy to serve high-resolution images to devices with retina displays
apear.js - plugin for tracking element's appearance in browser viewport
audioplayer.js - Responsive and Touch-Friendly
bootstrap.js - Bring Bootstrap's components to life with over a dozen custom jQuery plugins
elevatezoom.min.js - A Jquery Image Zoom Plugin
instafeed.min.js - a dead-simple way to add Instagram photos to your website
isotope.pkgd.min.js - Filter & sort magical layouts
jquery.countdown.min.js - A jQuery plugin that sets a div or span to show a countdown to a given time.
jquery.fancybox.js - is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page
jquery.localScroll.min.js - Animated anchor navigation made easy with jQuery
jquery.queryloader2.min.js - Version of the QueryLoader by Gaya Kessler. Preload images with ease
jquery.scrollTo.min.js - Lightweight, cross-browser and highly customizable animated scrolling with jQuery
owl.carousel.min.js - Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider
jquery.themepunch.revolution.min.js - is an innovative, responsive WordPress Slider Plugin that displays your content the beautiful way
jquery.tweet.js - Basic wrapper for Seaofclouds

Clipart for the preview was bought from http://depositphotos.com

IMPORTANT: clipart is not included in the stock file.

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 http://velikorodnov.ticksy.com and asking your pre-sale question in the "Item Discussion" section.

Monkeysan

SuperOwl - Kindergarten, School of Early Learning

Nanny Agency HTML template

HTML Files

HTML Structure

CSS Files and Structure

JavaScript Files

Sliders settings

Choose footer, header

Retina

Sticky Menu

Preloader

Twitter

Contact form

Sources and Credits