Documentation by “Ansonika” v2.8

“QUICKFOOD - HTML Site template”

Created: 5 December 2015
Last update: 27 June 2023
By: Ansonika

Thank you for purchasing my theme. If you are happy with the theme, please TAKE A MOMENT TO RATE IT from your DOWNLOADS PAGE. Thanks so much!

Table of Contents

  1. HTML Structure
  2. CSS Files, Structure and basic modifications
  3. PHP contact form, newsltetter form and plan a visit form
  4. JavaScript
  5. Sources and Credit
  6. Updates

A) HTML Structure - top

This theme has a fixed centered layout 1170px. It's based on Boostrap framework grid 4x. It 's ULTRA RESPONSIVE!!

B) CSS Files Structure and basic modfication - top

The css files are inside the css folder (minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. Below how the file is organized:

1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Buttons
- 1.3 Structure

2. CONTENT
- 2.1 Home all versions
- 2.2 List page
- 2.3 Restaurant menu
- 2.4 Order process
- 2.5 Restaurant detail page
- 2.6 About
- 2.7 Contacts

3. COMMON
3.1 Preloader
3.2 Parallax bg
3.4 Login/Register modals
3.5 Spacing
3.6 Map
3.7 Password strength
3.8 Input form style
3.9 Collapse
3.10 Tabs
3.11 Tooltips
3.12 Blockquote

Change the logo
To change the logo, simply use your PNG24 file a or start with the psd provided. The items by defualt comes with 2 logo versions: one normal and the other one for mobiles Below how is coded. We suggest to use logo with max height 25/30px.

<a href="index.html" id="logo">
<img src="img/logo.png" width="190" height="23" alt="" class="d-none d-sm-block">
<img src="img/logo_mobile.png" width="59" height="23" alt="" class="d-block d-sm-none">
</a>

Set up site launch page located in coming_soon folder
Open functions.js and find this line of code:

SET THE DATE
Open site_launch/js/functions.js and find this line.

var target = new Date("July 15 2014 13:30:00 GMT+0100"); //replace with YOUR DATE

SET NEWSLETTER EMAIL
Open site_launch/assets/newsletter.php and find this commented code.

//$address = "your email address";
$address = "test@domain.com";

How MAPS works
Open js/map.js and find this line of code:

Let's take as example the map used in list_page.html. Open js/map.js.

'American': [
			{
name: 'Angus Steak House',
		location_latitude: 48.873792, 
		location_longitude: 2.295028,
		map_image_url: 'img/thumb_restaurant_map.png',
		name_point: 'Angus Steak House',
		type_point: 'American/Mexican',
		description_point:'135 Newtownards Road, Belfast, BT4<br><strong>Opening time</strong>: 09am-10pm.',
				url_point: 'detail_page.html'
			},

American= restaurant category
location_latitude= the latitude of Arc de Triomphe
location_longitude= the longitude of Arc de Triomphe
name_point= the title in info box,
map_image_url: the thumbnail inside the infobox
description_point= description
type_point= restaurant type
url_point= the link in the button

The marker/pins are located in img/pins folder (psd included). Each pin name have to match with the restaurant 
category name. In this case for example is Historic.png...so automatically every point in the same 
category has the same pin/marker.
COMMON ISSUE ON GOOGLE MAP (if the Google map works locally but does not works once the site will be online)
In some cases Google requires an api key for the Google map.

You can create your own "Standard api key" here 
by clicking on "GET KEY" BUTTON (on Authentication for the standard API—API keys section), 
and follow the steps.
https://developers.google.com/maps/documentation/javascript/get-api-key#key

Here some additionale info on how to create an API KEY http://thegrue.org/google-map-javascript-api-key/

Then replace at the bottom of every page that use Google map, this line

<script src="http://maps.googleapis.com/maps/api/js"></script> OR 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

with your api key included, like the example below
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Note: if you apply the api key, on your local computer the map does not load.
You shoul upload on your host. So we suggest to apply this changes after your
complete to edit the template.

Home with video header (fallback with a background image in tablets and mobile)

1)Save you mp4 and ogv video in the video folder.The name of the files must match the datasource tag:

Example
data-teaser-source="video/intro" (folder/name_files)=
intro.mp4
intro.ogv

2) To change the fallback background image (on tablets and mobiles the video bg is not supported)
 open responsive.css an find this class

.hero_video {
background: #333 url(../img/sub_header_home.jpg);
background-size:cover; 
background-position: center center
}

Home with text rotator

Taking as reference index_4.html, simply add your rotate words separated by commas like the example below:
 <h1>Order <strong id="js-rotating">Takeaway,Delivery,Quick</strong> Food</h1>

Home with Cookie bar

1) At the top of your page add the relative css
<!-- SPECIFIC CSS -->
<link href="css/jquery.cookiebar.css" rel="stylesheet">

2) At the bottom of the page add these scripts
<!-- SPECIFIC SCRIPTS -->
<script src="js/jquery.cookiebar.js"></script>
    <script>
		$(document).ready(function(){
		'use strict';
		 $.cookieBar({
			fixed: true
		});
		});
	</script>

3)In js/jquery.cookiebar.js you can change the default settings:

to set the link to the "Pricavy policy" page, set your link path here: policyURL: '#',
message: 'We use cookies to track usage and preferences.', //Message displayed on bar

How to use the icon font libraries

1) Choose the icon from these pages 
icon-pack-1.html
icon-pack-2.html

2) Copy an paste the class name…for example from here icon-pack-2.html
<i class="arrow_left"></i>


3) You can change the size via style inline
<i class="arrow_left" style="font-size:18px"></i>

How to change the default color scheme 

The item come with a css/color_scheme.css as an example of other color scheme. You can edit this file with your color scheme, then

1) or you add this file in the head of the page as last css file
2) copy and paste the styles present in css/color_scheme.css into css/custom.css in order to avoid to edit every page (quicker solution)

THE GRID
Please refer to this documentation Boostrap


C) PHP files: Newsletter subscription form, Leave a review form, Newsletter in site launch - top

All the files you need are located in assets folder(for the coming soon is coming_soon/assets). Below an example taken from newsletter.php; all the files are well commented.

Common issues
f you doesn't recieve the email please first check:
1) Your spam folder
2) If you hosting requires special settings
3) If your email has to be managed from the same hosting provider
4) Set the permission of the asset folder on your host to 755 your FTP client
5) SMTP authentication is not supported

D) JavaScript - top

This theme use These Javascript (minified versions included). i've included the common theme scripts in a single file for a fast edit and load.

common_scripts.js content:

E) Sources and Credits - top

I've used the following images, icons or other files as listed.

Images are not included.

F) Updates - top

V.2.8 (27 June 2023)

V.2.7 (8 August 2022)

How to update:
      
Update the following files: assets/review.php or delete the following lines of code 

if(get_magic_quotes_gpc()) {
	$message_contact = stripslashes($message_contact);
}

V.2.6 (9 May 2022)

V.2.5 (14 January 2022)

V.2.4 (17 August 2021)

V.2.3 (18 February 2021)

V.2.2 (16 September 2020)

HOW TO UPDATE FROM PREVIOUS VERSION

1) Updated Bootstrap Library from BS3 to BS4
a) Update the following files: css/bootstrap.css, css/bootstrap.min.css, js/bootstrap.js, js/bootstrap.min.js, js/common_scripts.js,js/common_scripts_min.js, js/functions.js.
b) Update some classes in the html and the "meta" in the head of the page. Unfortunately there's no easy way to update the theme to BS4 other than doing it manually. 
The differences, are explained in this link or here in the left column .	Mainly are in the grid classes, responsive images, visibility classes, accordions.  
We suggest to use this tool https://www.diffchecker.com/ and compare the html files with the new ones.
c) Update css/style.css, css/admin.css, css/blog.css or compare using this tool https://www.diffchecker.com/ (we applied very minor changes)

2) Update the script on footer page to <script src="js/jquery-3.5.1.min.js"></script> + js/functions.js + js/pop_up_func.js
(some events has changed. for example $(window).scroll(function () > $(window).on('scroll', function ()... etc)

3) Update the following files: js/common_scripts.js,js/common_scripts_min.js, js/functions.js.

4) Update the following files: js/common_scripts.js, js/common_scripts_min.js

5) Update the link in the head of the pages

6) Update the following files: js/functions.js, in particular the section /* Button show/hide map */

7) Copy and paste the "editor" folder locate in js folder and in admin.html footer change the script

V.2.1 (5 May 2020)

V.2.0 (11 December 2018)

V.1.9 (19 September 2018)

V.1.8 (26 June 2017)

V.1.8 (26 June 2017)

V.1.7 (28 Feb 2017)

V.1.6 (5 December 2016)

V.1.5 (22 November 2016)

V.1.4 (26 July 2016)

V.1.3 (09 June 2016)

V.1.2 (26 Feb 2016)

V.1.1 (7 January 2016)

Version 2.1

Updated documentation

Version 2.0

1) Removed @import (from March/April 2019 will no longer supported by Google Chrome Browser)

How to update from previous version:

in the head of every page please replace this line:

<!-- BASE CSS -->
<link href="css/base.css" rel="stylesheet">

with
<!-- BASE CSS -->
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/menu.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/elegant_font/elegant_font.min.css" rel="stylesheet">
<link href="css/fontello/css/fontello.min.css" rel="stylesheet">
<link href="css/magnific-popup.css" rel="stylesheet">
<link href="css/pop_up.css" rel="stylesheet">

Same changes for the RTL version; for any doubt takes as reference the head of the updated pages.

2) Fixed an issue related to the page scroll on faq.html
Please replace the script <!-- SMOOTH SCROLL --> on footer page

3) Fixed and issue related to the parallax header in RTL version
Please update js/common_scripts_min.js

Version 1.9

- Updated the Parallax script
- Updated the Sticky Sidebar Script

How to update from previous version:
1) Update common_scripts.js
2) Update footer scripts for the following pages:
- cart.html
- cart_2.html
- cart_detapicker.html
- detail_page.html
- faq.html

Example of the new footer scripts
<script src="js/ResizeSensor.min.js"></script>
<script src="js/theia-sticky-sidebar.min.js"></script>
<script>
    jQuery('#sidebar').theiaStickySidebar({
      additionalMarginTop: 80
    });
</script>

3) Update the js files in js folder: theia-sticky-sidebar.min.js, 
theia-sticky-sidebar.js, (new) ResizeSensor.min.js, (new)ResizeSensor.js

Of course same for the RTL version

Vesion 1.8

How to update from previous version:
1) In style.css update this class .dropdown-options .dropdown-menu 
aprox line 2366 + add the new styles under the comment 
/*Drop-down menu options position */

2) In js/functions.js update the script under the comment
<!-- Drop down menu options-->

Vesion 1.6

ADMIN SECTION: copy the following files
1) admin.html
2) fonts folder in main root folder
3) css/admin.css
4) css/dropzone.css
5) css/bootstrap3-wysihtml5.min.css
6) js/bootstrap3-wysihtml5.min.js
7) js/tabs.js
8) js/dropzone.js

UPDATE JQUERY VERSION
1) change the script name in the pages
2) copy js/jquery-2.2.4.min.js

UPDATE BOOTSTRAP VERSION
1) update js/common_scripts.js
2) update css/bootsrap.min.css

SEARCH MODAL
1) copy the html from the pages
2) copy the css in style.css/responsive.css section "4.5 Search modal"
3) update js/common_scripts.js

MENU ORDER OPTIONS DROP DOWN AND THUMBS
1) update js/functions.js (at the end there is a new script)
2) copy the css in style.css/responsive.css section "4.6 Restaurant menu"
3) copy the images

SET THE OPACITY of the header images via css (homepages excluded)
1) from style.css update the id selector #subheader

THE 2 NEW PAGES (submit drivers or restaurant)
1) copy the images
2) copy the css in style.css/responsive.css section "4.7 Work with us section"

Vesion 1.2

1) Update the parallax script
Update the js/common_script_min.js file 

2) Udpate the fixed sidebar
2.1 Copy and paste into your js folder the new script theia-sticky-sidebar.js
2.2 At the bottom of the html pages(detail_page, cart, cart_2, faq) remove the old code



<script src="js/jquery.pin.min.js"></script>
<script>
$("#cart_box").pin({padding: {top: 80, bottom: 25},minWidth: 1100, containerSelector: "#container_pin"})
</script>

and add the new one

<script src="js/theia-sticky-sidebar.js"></script>
<script type="text/javascript">
    jQuery('#sidebar').theiaStickySidebar({
      additionalMarginTop: 80
    });
</script>

3.1 Wrapp the pinned element with <div class="theiaStickySidebar">...</div> + add to the parent top #sidebar.
Example:
<div class="col-md-3" id="sidebar">
 <div class="theiaStickySidebar">
	.....
</div>
</div>

Vesion 1.1

1) Grid version +  general updates + load more button
Copy all new css form style.css/resposnive.css under the comment UPDATES or v.1.1 

2) Blog section
Copy the new pages + images + css/blog.css

3) Gallery in restaurant detail page
3.1 Copy the html from the page (the css in the head of the page + script call on bottom
3.2 Copy the images from img folder (slider_single_restaurant folder)
3.3 Copy the css slider-pro.min.css/slider-pro.css + images folder in css folder 
+ js/jquery.sliderPro.min.js js/jquery.sliderPro.js

4) Fix the issue in leave a review form (the name of the restaurant does not come in the email)
Open assets/validate.js and add this line restaurant_name: $('#restaurant_name').val(), like ex. below
$.post(action, {
restaurant_name: $('#restaurant_name').val(),
name_review: $('#name_review').val(),
email_review: $('#email_review').val(),
...
},

and in the html page change this line
<input name="restaurant_name" id="restaurant_name" type="text" value="Mexican Taco Mex" hidden="">
into
<input name="restaurant_name" id="restaurant_name" type="hidden" value="Mexican Taco Mex">

Maybe you are interested in




Once again, thank you so much for purchasing this theme. Please take a moment to rate it from your Downloads page.

Need support?

For support contact me using the support tab on the item page. You will receive an answer within 24-48 hours (working days) GMT +1.

Need customization or availability for freelance projects?

Just send an email via profile page form; please don't forget to specify: Themeforest Support Policy

Ansonika

Go To Table of Contents