Foodpicky

online food ordering,restaurant directory theme
Created on: November 20 th, 2016
by Codenpixel



Update

First Release




Hi, Thanks for purchasing my work ! And it is not just a sentence.I really mean it !



Loocall template introduction

Kuponhub it’s a high-Quality and Professional HTML5 Template design and developed to fit all the needs of a directory business. .



Introduction

Frequently asked questions regarding the Kuponhub HTML template.

If you have trouble working with Bootstrap, please visit FAQ as it covers most of the frequently asked question. If we don't have it covered yet, please, email me at support@pamukovic.com or via my Themeforest profile, or send a tweet to @codenpixel and I'll be happy to have a look at it.



HTML Structure

The layout is flexible,we use "grid" system, so you can make any configuration (please refer to the "" Bootstrap online Documentation " for more details. The general template structure is the same throughout the template.



NAVIGATION AND LOGO PART

Structure are folowing bootstrap standard navigation.You can brose bootstrao documentation form more tutorials.To edit the logo you can simply replace the "logo.png" with your file, if you intend to use a png file. you can tweak size for your logo in style.css file. 


                        
            <header>
            <nav class="navbar-default navbar-fixed-top">
                <div class="container">
                    <a href="#" class="nav-trigger hidden-xs" data-toggle="modal" data-target="#myModal"></a>
                    <div class="navbar-header"> <a href="./index.html" class="navbar-brand">L<span>oo</span>call</a> </div>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li> <a href="index.html">Home</a> </li>
                            <li class=" dropdown"> <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="directory_profile.html">Profile (Booking)</a> </li>
                                    <li><a href="directory_profile_2.html">Profile (Discount Sale)</a> </li>
                                    <li><a href="directory_coupons.html">Profile (Coupons)</a> </li>
                                    <li><a href="directory_search_list.html">Search results list</a> </li>
                                    <li><a href="directory_search.html">Search results grid</a> </li>
                                    <li><a href="faq.html">Faq Page</a> </li>
                                    <li><a href="wizard.html">Form Wizard</a> </li>
                                </ul>
                            </li>
                            <li> <a href="directory_pricing.html">Pricing</a> </li>
                            <li class=" dropdown"> <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">News <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="directory_blog.html">Blog</a> </li>
                                    <li><a href="directory_blog_single.html">Blog single</a> </li>
                                </ul>
                            </li>
                            <li> <a href="directory_contact.html">Contact</a> </li>
                        </ul>
                    </div>
                    <div class="header-widget pull-right"> <a href="#" class="h-cart dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Cart <span class="item-count">0</span></a>
                        <ul class="dropdown-menu dropdown-menu-lg">
                            <li class="notifi-title">My Coupons</li>
                            <li class="list-group">
                                <!-- list item-->
                                <a href="javascript:void(0);" class="list-group-item">
                                    <div class="media">
                                        <div class="media-left"> <img src="images/cart1.jpg" alt=""> </div>
                                        <div class="media-body clearfix">
                                            <div class="media-heading">Up to 30%</div>
                                            <p class="m-0"> <small>Shopname coupon</small> </p>
                                        </div>
                                    </div>
                                </a>
                                <!-- list item-->
                                <a href="javascript:void(0);" class="list-group-item">
                                    <div class="media">
                                        <div class="media-left"> <img src="images/cart2.jpg" alt=""> </div>
                                        <div class="media-body clearfix">
                                            <div class="media-heading">Up to 30%</div>
                                            <p class="m-0"> <small>Shopname coupon</small> </p>
                                        </div>
                                    </div>
                                </a>
                                <!-- list item-->
                                <a href="javascript:void(0);" class="list-group-item">
                                    <div class="media">
                                        <div class="media-left"> <img src="images/cart3.jpg" alt=""> </div>
                                        <div class="media-body clearfix">
                                            <div class="media-heading">Up to 30%</div>
                                            <p class="m-0"> <small>Shopname coupon</small> </p>
                                        </div>
                                    </div>
                                </a>
                                <!-- last list item -->
                                <a href="javascript:void(0);" class="list-group-item"> <small>Print all coupons</small> </a>
                            </li>
                        </ul> <a href="#" class="h-login" data-toggle="modal" data-target="#myModal2" data-tab="login">Sign In</a> </div>
                </div>
            </nav>
        </header>

Background imags

Adding background image is very easy

You need to add class="bg-image" and add source to the image to src="path/image"

Exemple bellow

                             
                              <div class="widget newsletter-wrap widget bg-image" data-image-src="assets/images/22.jpg" 
                            
                            <div class="widget-body">
                                <div class="newsletter">
                                    <h4>
                           Sign up for our weekly email newsletter <br>with the best money-saving coupons.             
                        </h4>
                                    <h1 class="text-pink">Get 10% off</h1>
                                    <h4>Extra on any new visit </h4>
                                    <div class="input-group col-sm-10">
                                        <input type="text" class="form-control" placeholder="Email"> <span class="input-group-btn">
                           <button class="btn btn-danger btn-raised ripple-effect" type="button">
                           Subscribe
                           </button>
                           </span> </div>
                                    <p><small> Subscribe to our newsletter for good deals, sent out every month. </small> </p>
                                </div>
                            </div>
                        </div>
                        <!-- /widget -->


How to customize a theme



In this tutorial we'll show you, how to start customizing a Warp theme and which tools you need to learn to make small modifications like changing the look and colors of a theme.



Web Developer tools


Whenever you try customizing our templates we highly recommend using Web Developer Tools like the famous Firebug plugin for Firefox. Other browsers like Chrome, Opera or Safari include very similar functionalities. Using these tools you have the possibility of easily trying out CSS styles right in your browser and inspecting existing styles to find their location in the theme's CSS files.



Editing CSS styles directly in your browser


Bring up Firebug by right-clicking on an interesting element and choosing "Inspect Element". On the left side you see the html-structure of your document (make sure you have the HTML-Tab enabled). Here you have the possibility to add and edit attributes and their values. Just double-click parts of the code to edit them.

Web Developer Tools

Even more interesting is the right side of the plugin, here you see all css-styles for the selected element. If you want to edit something just double click on it, enter your new value and press enter when you are done. You will notice that Firebug opens a new empty line so you can not only edit existing styles but also add new ones. Firebug even shows you the computed style-values for the selected element, make sure you have activated the style-tab for our example.


Resources

Well,depending on several parameters.


I'm bored, I could learn something

It wil be great to learn something more about Bootstrap,please visit " Learn Bootstrap "

CSS will work too,please visit " Learn CSS "


Nah, I'm not interested.Please tell me who can take care of everything

Need someone to handle everything for you,then please visit " Envato studio "

Tools and apps

Firebug for firefox browser,must have! To download please visit " Get FireBug "

F12 if usign Chrome. Find out more about "Developer tools "

HTML editor,great one for free. Brackets! Download "Here "



Free Images

"Gratisography"

"Unsplash"





Once again, thank you so much for purchasing my work. As I said at the beginning, I'd be glad to help you if you have any questions. No guarantees, but I'll do my best to assist. If you have a more general question relating to the theme you can shoot me an e-mail via my ThemeForest profile, you might consider visiting the forums and asking your question in the "Item Discussion" section as well.