Last update: 22.06.2023
Version: V1.4.1
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, Bootstrap5.x, Font Awesome 5.x, SCSS, Gulp, 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 )
STRUCTURE
When you run 'npm run dev', a
directory named 'dist' will be
created, which is the template directory
compiled from Gulp, the directory structure is
as follows:
/assets
/images
/favicon
/js
/app.js
/css
/style-default.css
/style-navy.css
/style-olive.css
/style-orange.css
/style-pink.css
/style-red.css
/style-violet.css
/style-yellow.css
/index.html
/about.html
/event.html
/gallery.html
/.........
Gulp Development Files Structures
Node.js and Gulp.js are required to compile the
template. If you don't have Node.js and Gulp.js
installed, please follow the instructions below:
2. Open command prompt in folder and run
'npm install -g gulp'
To develop, please run
'npm install', then
'npm run dev' a directory named
'dist' will be created, the
development directory structure is as follows:
npm run build - This will create a
production ready version of your template in the
dist folder. This will also create
minified versions of your CSS and JS files.
/src
/assets
/images
/js
/css
/html
/data
/layout
/section
/shared
/.editorconfig
/.gitignore
/gulpfile.js
/package.json
/package-lock.json
It is accepted that before you start modifying the <`a
href="https://www.w3schools.com/html/" target="_blank">HTML for your need at
least you have basic knowledge in html and twitter Bootstrap5.
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 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
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):
ChefsDevid 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):
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):
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
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.
FOOTER
Area
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
*********************************************/
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.
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.
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
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.
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.
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.
Skilled Chefs
50
