Foodie – Restaurant & Cafe Html Template

Visit Our Product Page

Last update: 22.01.2017
Version: V1.3
Created By: Codeboxr Team
Support: Contact us

Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file,
please feel free to email via our contact form HERE. Thanks so much!

Overview

Foodie is a clean, modern and minimalistic responsive html Template. It’s especially designed for Restaurant , Cafe, Food or anyone working in the Food industry and more. This is built with modern technologies like HTML5, CSS3, jQuery, Bootstrap3.x, Font Awesome 4.x, LESS, Gulp, Modernizer, CSS3 Animation, Owl Slider and more. Foodie have many sections: Header, Slider, About, Special (CHEF SELECTION), Menu (FOOD RECIPES) , Chefs Section, Milestone(Counterup), Reservation Table, Testimonials, Latest News, footer With Subscribe & Twitter Feed.
It have many Pages(Home page & 5 Inner Pages):

  • Home Page ( index.html )
  • About Page ( about.html )
  • Blog Listing Page ( blog-list.html )
  • Single Blog Page ( blog-single.html )
  • Menu Listing Page ( menu-list.html )
  • Contact Page ( contact.html )

It is accepted that before you start modifying the HTML for your need at least you have basic knowledge in html and twitter Bootstrap3. If you need custom development as well as need to know any thing specific for this Template that doesn't cover in this documentation, you are always welcome to contact us.

How to Modify or Customize

This Template has Six(6) html files named index.html about.html blog-list.html blog-single.html menu-list.html contact.html For home page index.html file for contact page contact.html, for Blog listing page copy blog-list.html, for Single Blog page copy blog-single.html, for About page copy about.html, for Menu Listing page copy menu-list.html file and edit.

General

Foodie html template contains html, css, js and less files. Css files are compiled from less files. Final js and css files are all minified version added in html head tag but their non minified version is included for further development. The theme includes a gulp.js file which can compile the less file into one css file and compress, same thing for theme.js to minified theme.min.js.

Less: Less files are located in assets/less folder. If you are advance user and know how to compile less then change it as need and compile. gulp.less file in theme root has all instruction. If you don't know what it is then don't touch it and leave it as it is. You can change css file as need (in case you need customization in style)

Html: All html files are located in theme root folder. Total three html files index.html(Home), contact.html() and speaker.html(Single Speaker)

CSS: Css files are stored in assets/css. The default css file is style-default.css and it's minified version of file style-default.min.css. In the css folder, there are other css files for different color variation. We include 5 color variation, by default the default css is linked, but you can change as need. We recommend not to change the default css file style-default.min.css and see there is an extra css file custom.css in css folder and put any extra custom style in that file.

JS Files: Most js libraries are under assets/vendor folder. Theme main js file is under folder assets/js , file name theme.min.js which is minified version of file theme.js. If you change the theme.js then compile it via gulp. We recommend not to change this file and use custom.js for any custom js code.

Logo & Menu

If you would like to edit branding name/logo : you would do the following: (Line No:145)And for Mobile device Line No:118

                                
                            

If you would like to edit left Menu : you would do the following:(Line No: 130 to 143 )

                                
                            

If you would like to edit Right Menu : you would do the following:(Line No: 147 to 161 )

                                   
                            

Slider Content

If you would like to edit branding slider content : you would do the following: (Line No: Near 182 to 261 )

For 1 Slider Item Like this type of code in index.html

                                   
                    
Music-Banner

About Section

If you would like to edit About content : you would do the following: (Line No: Near 270 to 290 )

                                   

Fusce hendrerit eget diam a dapibus. Vestibulum at dui ut sapien mollis molestie. Phasellus vulputate vestibulum at dui ut sapien mollis molestie eros et diam stibulum at dui ut sapien mollis molestie auctor, porttitor vehicula nisi blandit. Mauris imperdiet cursus duiac lacinia. Mauris sed porta eros, volutpat tincidunt diam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dictumaccumsan. Aliquam erat volutpat interdum felis dignissim

Read More

Special Section

If you would like to edit: you would do the following: (Line No: Near 295 to 374 )

For Single Item, the Code is like (in index.html):

                                   
special food

American Foodie

American Humburger

If you would like to edit: you would do the following: (Line No: Near 380 to 680 )

For Single Item, the Code is like (in index.html):

                                   

Pizza Mexicana

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Nullam varius a felis eu dictum.

$40

And For Tab Menu, the Code is like (in index.html):

                                   
                            

Chefs Section

If you would like to edit: you would do the following: (Line No: Near 685 to 815 )

For Single Item, the Code is like (in index.html):

                                   
                                    

Chefs Devid Nilima

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate veliesse sed do eiusmo cillum dolore!

Milestone Section

If you would like to edit: you would do the following: (Line No: Near 820 to 865 )

For Single Item, the Code is like (in index.html):

                                   
Foodie Award Skilled Chefs 50

Reservation Table

If you would like to edit: you would do the following: (Line No: 870 to 950 )

The Code is like (in index.html):

                                   

After submit Reservation frontend, admin and guest can email alert, guest email can be save to mailchimp and full submission can be save in csv as optional. Php file located in theme root/php/bookings.php handles the ajax request for booking. Booking email, csv and mailchimp related configuration is near 29-54

Email smtp or such configure is from line 152-160 and 233-242

                                    //csv
$save_in_csv = false; // make it true if you want to save in a csv file, the csv file name should be bookings.csv and must be located in same dir of this file


//mailchimp
$save_in_mailchimp = false; //true = save in mailchimp, false =  ignore //if true, then list id and key needs to be set
$api_key           = null; //mailchimp api key
$list_id           = null; //set mailchimp list id api
$status            = 'pending'; //pending = user will get email to confirm his subscription, subscribed = force subscribe the email


$admin_email_to        = 'admin@yourdomain.com'; // admin email who will get the contact email alert
$admin_email_to_name   = "Company Name"; // Admin Name/Company name who will get the email alert
$admin_email_from      = 'noreply@yourdomain.com';  // admin email from which email address email will be sent
$admin_email_from_name = 'System'; //admin name from which email will be sent
$admin_send_subject    = 'Booking form alert'; //email subject what the admin will get as contact email alert
$user_send_subject     = 'Thanks for booking request, your copy'; //email subject what the user will get if the user agreed or select "copy me"

$site_name			   = 'Example Site Name'; //change this as need
$header_image		   = ''; //header image
$footer_text		   = 'Copyright @example.com'; //change this as need
$email_heading	   	   = 'New Booking Notifiction';
//end options parameter for user

$send_copy  = true; // true = sends an email to visitor who submits the contact form
$html_email = true; //true, sends html email, false = send plain text email
                                

Testimonials Section

If you would like to edit: you would do the following: (Line No: Near 995 to 1050 )

For Single Item, the Code is like (in index.html):

                                   
                                        

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore!

Jonathon Doe

Blogs Section

If you would like to edit: you would do the following: (Line No: Near 1053 to 1100 )

For Single Item, the Code is like (in index.html):

                                    
                            

Twitter Feed

The Code is like (in index.html): search for keyword "tweetiefeed"

                                

Twitter feed uses a js script owl carousel which default added in every html and php folder in Template root/tweetie. To create twitter app please follow this guideline. Here we need to collect 4 keys. The follow that guideline it will help you to collect Consumer key(api key) and consumer secret(api secret). If you go to your twitter app config page and click tab "Keys and Access Token" check the section titled "Your Access Token", There you will get Access Token and Access Secret. So, total we will have 4 keys. Now go to Template root/tweetie/api/config.php you will see code like bellow

                                 // Consumer Key
    define('CONSUMER_KEY', 'copy paste here');
    define('CONSUMER_SECRET', 'copy paste here');

    // User Access Token
    define('ACCESS_TOKEN', 'copy paste here');
    define('ACCESS_SECRET', 'copy paste here');

                            

Now need to work bit js code, check the index.html near footer line no 1008-1034

                                 //adding twitter feed, dependency js location siteroot/tweetie/tweetie.js
        $('#tweetiefeed').twittie(
            {
                'username': 'codeboxr',
                'hideReplies': true,
                'count' : 10,
                'apiPath' : 'tweetie/api/tweet.php',
                'dateFormat': '%b-%d-%Y',
                'template': '{{tweet}}-{{date}}'
            }, function () {
                    //using owl carousel
                    $("#tweetiefeed ul").owlCarousel({
                        navigation : false, // Show next and prev buttons
                        slideSpeed : 900,
                        rewindSpeed : 1000,
                        paginationSpeed : 400,
                        navigationText : ['',''],
                        pagination : false,
                        autoPlay : true,
                        stopOnHover : false,
                        singleItem:true,
                        addClassActive:true
                    });
                    //tweet sliding using owl carousel ends
                }
        );
        //twitter feed done.
                            

Here the only thing you need to change is 'username': 'codeboxr', , put your twitter handle/username where it says codeboxr

Google Map

This is a javascript based plugin. So, for any type customization or modification need to open site custom javascript file which you find from js floder as custom.js

HTML code of goole map starting from as

                                   

Confgigure Google map: To change from the above section latitude, see it has example like data-lat="xxxx", longitude (example data-lng="xxxx"), tile (data-title="xxxxx") and description for location marker (data-content="xxxx"), , the rest thing will be loaded automatically and you don't need to care about this.

If you would like to edit: you would do the following: (Line No: Near 1105 to 1224 )

                                       
                                        

Subscribe Area

This feature need to take care the php part most but if you still need to change for html see the code block like bellow or search with keyword "subscribe-form-action" The Code is like (in index.html):

                                 
                            

Subscribe is handled from js and php file. After subscribe form is validated request is send to php file located in php/subscribe.php.

To configure Subscribe options then open subscribe.php . The code near 23-27 is for Subscribe configuration.

You can configure for csv as csv and send to mailchimp. Code is well commented to understand

Default Subscribe configuration:

                        $save_in_csv   = false; // make it true if you want to save in a csv file, the csv file name should be subscribe.csv and must be located in same dir of this file

$api_key       = null; //mailchimp api key
$list_id       = null; //set mailchimp list id api
$status 	   = 'pending'; //pending = user will get email to confirm his subscription, subscribed = force subscribe the email
                    

Subscribe form validation and ajax js code is located in file assets/js/custom.js near line 121-180

                       /********************************************
     *** Email Subscription Validation And Ajax Submission
     *********************************************/

    var isEmail = function (email) {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regex.test(email);
    }

    $('form.subscribe-form-action').on( 'submit', function (evnt) {
        evnt.preventDefault();

        $form = $(this);

        //var emailInput = $( 'form.subscribe-form' ).find( 'input#subscribe' );
        var emailInput = $form.find( 'input#subscribe' );

        if (isEmail( emailInput.val() )) {
            //console.log('ok');
            $.ajax({
                url: cbx_path + '/php/subscribe.php',
                type: 'post',
                data: { action: 'lz_subscription', 'email': emailInput.val().toLowerCase()},
                beforeSubmit: function (argument) {
                    // body...
                },
                success: function (ajaxResponse) {
                    try {
                        var ajaxResponse = $.parseJSON(ajaxResponse);
                        if ( !ajaxResponse.error ) {
                            emailInput.css('color', '#0f0');
                        } else {
                            emailInput.removeAttr( 'style' ); //css('color', '#f00');
                            throw ajaxResponse.message;
                        }
                        alert( ajaxResponse.message );
                    } catch (e) {
                        //e.message;
                        alert(e.message );
                    }
                },
                error: function (argument) {
                    // body...
                }
            });
            $form[0].reset();
        } else {
            emailInput.css('color', '#f00');
            return false;
        }
    });

    $('form.subscribe-form-action input#subscribe').on('keyup', function (evnt) {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        this.style.color = (isEmail( $(this).val() )) ? '#f5832b': '#f00';
    });

    /********************************************
     *** End Email Subscription Validation And Ajax Submission
     *********************************************/
                        

The Code is like:

                                   
                                    

Blogs Upcoming News

Contact Page: ( contact.html)

Contact page is a separate page contact.html and the mail related configuration is shown below:

To configure email options then open contact.php file which you find from php directory from Template root Template root/php/contact.php. There we try to describe everything by comments.

You can configure to save in a csv file, subscribe in mailchimp and send email. The code is well documentation where to put what. The configuration starts from line 30 and ends to line 52

Email smtp or such configure is from line 161-168 and 218-226

Default Email & Other configuration:

                       //csv
$save_in_csv = false; // make it true if you want to save in a csv file, the csv file name should be contacts.csv and must be located in same dir of this file


//mailchimp
$save_in_mailchimp = false; //true = save in mailchimp, false =  ignore //if true, then list id and key needs to be set
$api_key           = null; //mailchimp api key
$list_id           = null; //set mailchimp list id api
$status            = 'pending'; //pending = user will get email to confirm his subscription, subscribed = force subscribe the email


//general email configuration
$send_email            = true; //false = doesn't send email, actually sending email is basic practice fo contact form.

$admin_email_to        = 'admin@yourdomain.com'; // admin email who will get the contact email alert
$admin_email_to_name   = "Company Name"; // Admin Name/Company name who will get the email alert
$admin_email_from      = 'noreply@yourdomain.com';  // admin email from which email address email will be sent
$admin_email_from_name = 'System'; //admin name from which email will be sent
$admin_send_subject    = 'Contact form alert'; //email subject what the admin will get as contact email alert
$user_send_subject     = 'Thanks for contact, your copy'; //email subject what the user will get if the user agreed or select "copy me"

$site_name			   = 'Example Site Name'; //change this as need
$header_image		   = ''; //header image
$footer_text		   = 'Copyright @example.com'; //change this as need
                    

Single Blog Page: ( blog.html)

Single Blog page is a separate page blog-single.html

If you would like to edit: you would do the following:

                        
                        
15 Feb 2016

Marginally impress your friends with this skinned with are water

A faucibus velit adipiscing est vitae scelerisque tristique eu adipiscing porta suspendisse aliquet duis class phasellus euismod

Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur lobortis justo ante, in varius leo congue id. Etiam a libero elementum, posuere est at, sodales justo. Proin nec venenatis metus.

Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur lobortis justo ante, in varius leo congue id. Etiam a libero elementum, posuere est at, sodales justo. Proin nec venenatis metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbierst imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspeiss hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh.

Unordered List Style

  • Reget nec nunc. Etiam posuere iaculis quam.
  • Faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  • Etiam nec urna in odio faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  • Lectus Morbi tempus, odio suscipit efficitur vestibulum
  • Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit efficitur vestibulum
  • nteger ac nunc sed lectus vehicula mollis. Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit efficitur vestibulum
  • Reget nec nunc. Etiam posuere iaculis quam.
  • Faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  • Etiam nec urna in odio faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  • Lectus Morbi tempus, odio suscipit efficitur vestibulum
  • Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit efficitur vestibulum
  • nteger ac nunc sed lectus vehicula mollis. Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit efficitur vestibulum

Ordered List Style

  1. Reget nec nunc. Etiam posuere iaculis quam.
  2. Faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  3. Etiam nec urna in odio faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  4. Lectus Morbi tempus, odio suscipit efficitur vestibulum
  5. Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit efficitur vestibulum
  6. nteger ac nunc sed lectus vehicula mollis. Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit efficitur vestibulum
  7. Reget nec nunc. Etiam posuere iaculis quam.
  8. Faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  9. Etiam nec urna in odio faucibus viverra eget nec nunc. Etiam posuere iaculis quam.
  10. Lectus Morbi tempus, odio suscipit efficitur vestibulum
  11. Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit efficitur vestibulum
  12. nteger ac nunc sed lectus vehicula mollis. Ut in ante et quam malesuada gravida. Morbi tempus, odio suscipit.

Table Style Here

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content

Images Alignment

image

Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur lobortis justo ante, in varius leo congue id. Etiam a libero elementum, posuere est at, sodales justo. Proin nec venenatis metus. Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur lobortis justo ante.

image

Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur lobortis justo ante, in varius leo congue id. Etiam a libero elementum, posuere est at, sodales justo. Proin nec venenatis metus. Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis diam metus, id commodo ex placerat vitae.

image

Cras porttitor convallis ligula, at elementum erat mattis quis. In vitae vulputate tellus, sed laoreet est. Nam eget dolor non eros rutrum facilisis ut vel sapien. Aenean sed vehicula massa. Morbi imperdiet egestas ullamcorperet. Expo neque, congue nec nibh in, pellentesque fringilla risus. Suspendisse hendrerit et sapien ut pretium. Aenean nulla ipsum, facilisis eu porta non, rutrum sit amet nibh. Quisque id diam feugiat, pharetra arcu eget, bibendum tortor. Vivamus aliquam lacus id leo tristique sagittis. Pellentesque mattis diam metus, id commodo ex placerat vitae. Curabitur lobortis justo ante, in varius leo congue id. Etiam a libero elementum, posuere est at, sodales justo. Proin nec venenatis metus.