Documentation by “Ansonika” v2.4

“FOOGRA - HTML Site template”

Created: 14 NOV 2019
Lat udpate: 18 January 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 submit restaurant
  4. JavaScript
  5. Sources and Credit
  6. New Premium Template
  7. UPDATES

A) HTML Structure - top

It's based on Boostrap 5 framework grid. It's ULTRA RESPONSIVE!!. The item comes with SASS files for the primary styles.

B) CSS Files Structure and basic modfication - top

The css files are inside the css folder (not minified and minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. We reccomend to apply every changes in css/custom.css in order to makes future updates easly to apply. Below how the main style file is organized:

1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Structure
- 1.3 Main Menu
- 1.4 Heros/Above the fold

2. CONTENT
- 2.1 Home
- 2.2 Carousel
- 2.3 Strip item

3. COMMON
- 3.1 Spacing
- 3.2 Buttons
- 3.3 Misc
- 3.4 Footer
- 3.5 Magnific Popup CSS
- 3.6 Sing In Modal
- 3.7 Misc
- 3.8 Cookie bar 

Note
1) To increase the Page Speed we inclued the main site css style in css/style.css;  for specific styles related and present only on specific pages, 
we include create dedicated css files.

Example for listing.html (and listing variation pages):
<!-- SPECIFIC CSS -->
<link href="css/listing.css" rel="stylesheet">
The item comes with SASS  files.

2) Same logic for the some js files; js/common_func.js contain the scripts common for all pages of the template. Specific pages, have dedicate 
js files.

Example for listing.html (and listing variation pages):
<!-- SPECIFIC SCRIPTS -->
<script src="js/sticky_sidebar.min.js"></script>
<script src="js/specific_listing.js"></script>

Change the logo
To change the logo, simply use your PNG24 file (suggested logo height is 35/40px) or better use an svg version. Below how is coded

<div id="logo">
 <a href="index.html">
	<img src="img/logo.svg" width="140" height="35" alt="" class="logo_normal">
	<img src="img/logo_sticky.svg" width="140" height="35" alt="" class="logo_sticky">
 </a>
</div>
GOOGLE MAP API (if the Google map works locally but does not works once the site will be online)
Google requires an api key for the Google map. They require a credit card for a new api..don’t worry 
there cost is very very low quantity of views or free for a 
particular limit https://cloud.google.com/maps-platform/pricing/sheet/

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 additional 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 an api key, the map locally does not load. You must upload your site.

Home with video header (fallback with a background image in tablets and mobile: these devices does not support video autoplay as background due to reduce bandwith consume)

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

You can change also the opacity in style.css 

video {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0.6;
}

2) To change the fallback background image for mobiles and tablets open css/style.css and 
find this class (video on background is disable on tablet and mobiles due to bandwith consume limit):

@media (max-width: 1024px):
#hero_video{
background: #ccc url(../img/home_section_1.jpg);
background-size:cover;
background-position: center bottom;}

How Lazy Load Works

1) Owl Carosuel Lazy Load

<img src="img/lazy-placeholder.png" data-src="img/location_1.jpg" class="owl-lazy" alt="">

2) Lazy load images

<img src="img/location_list_placeholder.png" data-src="img/location_list_1.jpg" alt="" class="lazy">

or use for the src attribute a 1px gif transparent

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
data-src="img/cards_all.svg" alt="" width="198" height="30" class="lazy">

You can delete the "src" attribute and leave only "data-src", the page gain in performance with less
request to the server but the code result not W3C validated due the "src" attribute result missing.

Control the opacity of the header images in the inner pages

You can control the opacity of the header images via data attribute as the example below:	
	
.<div class="opacity-mask" data-opacity-mask="rgba(0, 0, 0, 0.5)">

Change the bakcground image in the inner pages


You can control the background image of the headers via data attribute as the example below:	

<div class="hero_single inner_pages background-image" data-background="url(img/hero_general.jpg)">

Change the primary color
The theme comes with 10 predefined colors.

How to change colors

Add this line on every head page after custom.css 
<link href="css/color-green.css" rel="stylesheet">

or simply copy the color styles (from example css/color-green.css) in css/custom.css 
so you don't need to edit every page

or play with SASS files variables

Address Autocomplete with Google API


IMPORTANT! It requires an API key (see the section Google Map API); locally the autocomplete does not works,
you should apply the api key on the footer page script then upload the site to see it working. 

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"></script>

Set up site launch page located in site_launch 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 GOOGLE MAPS works

Let's take as example the map used in grid-listing-filterscol-map.html. Open js/main_map_scripts.js.

'Marker': [
			{
type_point: 'Italian Food',
name: 'Restaurant Name',
location_latitude: 48.865633, 
location_longitude: 2.321236,
map_image_url: 'img/thumb_map_single_restaurant.jpg',
rate: 'Superb | 7.5',
name_point: 'Restaurant Name',
get_directions_start_address: '',
phone: '+3934245255',
url_point: 'detail-restaurant.html'
},

type_point = restaurant category
name = restaurant name
location_latitude= the latitude of Arc de Triomphe
location_longitude= the longitude of Arc de Triomphe
map_image_url: the thumbnail inside the infobox
rate= rate
name_point= the title in info box
get_directions_start_address= get directions start address (leave empty or specify the start address)
phone: phone number
url_point= the link in the button

The marker/pins are located in img/pins folder.

Leaflet OpenStreet Map + MapBox

The item comes with another Interactive Map Solution. It a bit different from the Google Map Api.
Leaflet + OpenStreetMap is totally free; the implementation with Mapox requires registration and an API access token key (free untill 750,000 user views/requests; more info at https://www.mapbox.com/pricing/)
	
Below we examine how it works, let's take as example tours-half-screen-map-leaflet.html file.

1) leaflet_half_screen_func.js

BELOW HOW TO CENTER THE MAP AND MAIN MAP SETTINGS
var map = L.map('map', {
        center: [48.865633, 2.321236],
        minZoom: 2,
        zoom: 13
    });

MAPBOX ACCESS TOKEN (https://www.mapbox.com/ and create your access token)
L.tileLayer( 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
     attribution: '',
	   tileSize: 512,
     maxZoom: 18,
     zoomOffset: -1,
     id: 'mapbox/streets-v11', 
     accessToken: 'Your Mapbox Access Token',
     subdomains: ['a','b','c']
    }).addTo( map );


2) leaflet_markers.js
In this file there are all the markers/points data:

"id":1, //ID to use in the html page to view the infowindow of the point from the list
"type_point":"Pizza", //Type Point
"location_latitude":48.865633, //Lat
"location_longitude":2.321236, //Long
"map_image_url":"img/thumb_map_single_restaurant.jpg", //Thumb 
"rate":"Superb | 7.5", //Rate
"name_point":"Restaurant Name", //Name Point
"get_directions_start_address":"", //directions start address (leave empty or specify the start address)
"phone":"+3934245255", //Phone
"url_point":"restaurant-detail.html" //Specific poin url page

3) How to use Leaflet + OpenStreetMap only
Just simply replace this line on footer 
<script src="js/leaflet_map/leaflet_half_screen_func.js"></script>

into
<script src="js/leaflet_map/leaflet_no_mapbox_half_screen_func.js"></script>

TOOL TO CREATE COORDINATES: https://www.latlong.net/convert-address-to-lat-long.html

REVOLUTION SLIDER
View complete documentation here

THE GRID
Please refer to this documentation Boostrap

THE WIZARD on submit rider page

Add one more step to the wizard
Each step is defined by a div, so simply duplicate one of them. Below an example of the structure:

<div class="step">
	your content....                
</div><!-- end step-->

Make an input field, select or radio/checkbox required or not.
Simply add or remove the class "required" to the element. To change the error message go to js/wizard/wizard_script.js and under the section jQuery Validation Plugin at line 1007 aprox.

Add one more questions with checkbox answer
Open the HTML page (let's take an example quotation-wizard-version.html). As you can see the name of the input has to be the same with at the end [], each one have a different value. in the example below we add 2 more checkbox questions: 

<h3>Question?</h3> 

<div class="form-group">
<label class="container_check version_2">Custom interface and layout
<input type="checkbox" value="Custom interface and layout" name="question_1[]" class="required" onchange="getVals(this, 'question_1');">
</label>
</div>

<div class="form-group">
<label class="container_check version_2">Web site design
<input type="checkbox" value="Web" name="question_1[]" class="required" onchange="getVals(this, 'question_1');">
</label>
</div>

$message .= "\n1) Question?\n" ;
foreach($_POST['question_1'] as $value) 
{ 
	$message .=   "- " .  trim(stripslashes($value)) . "\n"; 
};

Antispam protection:
Spam bots usually disable javascripts to avoid the jquery validation or automatically fill all the input fields and send the email. Now the php submission script link is removed from the html and placed inside the the js script. So if the js will be disabled, the form will be not processed. The js script check also if the hidden input field (id website) is filled by the spam bot...if filled the form will be not processed. 

LEAVE THE HIDDEN INPUT FIELD WEBSITE for the reason above
<input id="website" name="website" type="text" value="">

RTL Version:
Takes a reference the html_rtl folder. We adopedt this files structure (also to update easly the item the new versions), but if you prefer you can change it. Each single files are provided 

CSS 
<!-- BASE CSS -->
<link href="css/bootstrap-rtl.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- SPECIFIC CSS -->
<link href="css/home.css" rel="stylesheet">

<!-- ALL SPECIFIC RTL CSS -->
<link href="css/all_rtl.css" rel="stylesheet"> IT CONTAIN THE RTL STYLES FOR ALL PAGES

<!-- YOUR CUSTOM CSS -->
<link href="css/custom.css" rel="stylesheet">

JS
<!-- COMMON SCRIPTS -->
<script src="js/common_scripts_rtl.min.js"></script> IT CONTAIN ONLY THE MAIN RTL JS (in particular differ for Bootstrap_rtl.js)
<script src="js/common_func_rtl.js"></script> IT CONTAIN THE MAIN RTL JS FUNC
<script src="assets/validate.js"></script>

<!-- SPECIFIC SCRIPTS -->
<script src="js/sticky_sidebar.min.js"></script>
<script src="js/specific_listing_rtl.js"></script> IT CONTAIN THE SPECIFIC RTL FUNC FOR THAT PAGE

C) PHP files: Contact form - top

All the files you need are located in assets folder. If you need to change the allert messages open assets/validate.js. Below an example taken from contact.php; all the files are well commented.

Contact form
It's the same logic and script of check newsletter. If you doesn't recieve the email please first check:
1) Your spam folder
2) If you hosting requires special settings (SMTP Authentication is not supported by the script)
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

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 (or if you prefer you can find the same js in separate files in js folder). Each page could have specific js related to the page.

common_scripts.js content:

E) Sources and Credits - top

I've used the following images, icons or other files as listed. For the js listed below, you can find the more documentation on the relative sites.

Images are not included.

F) New Premium Templates - top

Maybe you are interested in:

G) Updates - top

v.2.4 18 January 2023
  1. Updated jQuery Libray
  2. Fixed a form text input alignment for the RTL version
HOW TO UPDATE FROM PREVIOUS VERSION

1) Update the following files:
- js/common_scripts.js 
- js/common_scripts.min.js

For the RTL Version same files but with the extension _rtl

2) Update the following files:
- css/style_rtl.css + css/all_rtl.css or add this style

.form-control{
	text-align: right;
}
v.2.3 12 October 2022
  1. Updated Bootstrap Libray
  2. Added Kenburns Slider
HOW TO UPDATE FROM PREVIOUS VERSION

1) Updated to Bootstrap Version. Update the following files:
- css/bootstrap.css 
- css/bootstrap.min.css 
- js/common_scripts.js 
- js/common_scripts.min.js

For the RTL Version same files but with the extension -rtl

2) Takes as reference index-16.html. Copy the folliwng files in the respective folders:
- css/vegas.css
- css/vegas.min.css
- js/vegas.js
- js/vegas.min.js

More info about futher settings and options https://vegas.jaysalvat.com/
v.2.2 1 July 2022
  1. Updated Parallax Jarallax Script
HOW TO UPDATE FROM PREVIOUS VERSION

Update the following files in js folder: js/jarallax-video.min.js, jarallax-video.js, jarallax.min.js, jarallax.js
v.2.1 8 March 2022
  1. Updated Bootsrap Library
  2. Removed "Wordwrap" and "Magic quotes" from the php forms
HOW TO UPDATE FROM PREVIOUS VERSION

1) Updated to Bootstrap Version. Update the following files:
- css/bootstrap.css 
- css/bootstrap.min.css 
- js/functions.js (//Footer collapse script)
- js/common_scripts.js 
- js/common_scripts.min.js

For the RTL Version same files but with the extension _rtl


NOTE: you have to apply some changes in the html code of the page since in BS5 there are small differences. Below a short  list or see here https://getbootstrap.com/docs/5.0/migration/ .
We suggest to use Google Developer Console to inspect the code or if needed this usefull tool to compare the files https://www.diffchecker.com/

MODALS
data-modal > data-bs-modal 
data-target > data-bs-target 
data-dismiss > data-bs-dismiss  
The code of te close button has been changed too. 

COLLAPSE AND TOGGLES
data-toggle=.. > data-bs-toggle=...
data-parent=... > data-bs-parent=...

CLASSES
.float-left > .float-start
.float-right > .float-end
.text-left > .text-start
.text-right > .text-end
.no-gutter > .g-0

MAIN CSS STYLES CHANGES
Update the following files: style.css, detail-page-delivery.css, modal-popup.css; or below a quick reference of the classes changed. There is als a great tool that help you to discover the differences https://www.diffchecker.com/

Style.css: hr, footer hr, .form-group, all the section "1.5 Drop down user logged" (note that the html of this element has been changed)
Detail-page-delivery: .table.cart-list td .dropdown-menu

OTHERS HTML CHANGES 
For all pages change the meta tags in the header

For all pages change the css Bootsrap Link into <link href="css/bootstrap.min.css" rel="stylesheet">

For all detail-pages versions: added a "position-relative" class to the div container where are the Wishlist and View photo buttons

2) Removed "Wordwrap" and "Magic quotes" from the php forms
Update the php files in the assets folder
v.2.0 15 February 2022
  1. Updated Documentation
v.1.9 25 October 2021
  1. Updated Documentation
v.1.8 10 June 2021
  1. Fixed a broken link on footer page.
  2. Added the functionality of header sticky for some pages. Note that for other pages, like listing or detail..etc..this can not be applicable due the structure of the page (page too short, main search bar, ...) or other features are already present (for example the sticky siderbar)..more relevant for those layouts.
HOW TO UPDATE FROM PREVIOUS VERSION
1) Copy the new class .margin_sticky in css/style.css under the section 3.1 Spacing
2) Takes as reference blog-sticky-header.html or confirm-sticky-header.html: the class on body (class="margin_sticky") and in the header class="header_in is_sticky clearfix".
v.1.7 18 May 2021
  1. Dismiss Instagram Feed (detail page 6). Due to the new Instagram restriction policies the Plugin stop to works and there aren't at the moment any stable alternative.
v.1.6 6 April 2021
  1. Updated jQuery library to 3.6
  2. Updated Google Font link in the head of the pages
  3. Added Revolution Slider
  4. Added Parallax Video/Images
  5. Added Text Rotator
  6. Fixed Coming soon issue error message
  7. Updated Instagram Feed Plugin
  8. Updated jQuery Library for the Admin section
  9. Updated Bootsrap Library for the Admin section
  10. Dismiss retina plugin for the Admin section
  11. Dismiss Selectbox plugin for the Admin section
HOW TO UPDATE FROM PREVIOUS VERSION

1) Update the following files: js/common_scripts.js + js/common_scripts.min.js

2)  On head pages change the Google font link

3) Copy the entire folder revolution-slider + takes as reference the new html pages

4) Update the following files: 
- css/home.css (new sections "Hero Parallax Video Background" + "Hero fullscren")
- update in css/home.css > section /* Home video background*/

5) Copy the new js files: js/typed.min.js + js/typed.js and takes as reference the new page

6) Update the html on coming_soon/index.html + update css/style.css

7) Update the following files: js/jquery.instagramFeed.js + js/jquery.instagramFeed.min.js

8) Update the following files: admin_section/vendor/jquery (folder)

9) Update the following files: admin_section/vendor/bootstrap (folder) + admin_section/js/admin.js (// Configure tooltips for collapsed side navigation) + css/admin.css (section 3.1 Forms > .form-control.search-top) + the html code on every page related the main left navigation

10) Update the following files: on footer pages remove this line <script src="vendor/retina-replace.min.js"></script>

11) Update the following files: on footer pages remove this line <script src="vendor/jquery.selectbox-0.2.js"></script> and css/admin.css ...section 3.5 Select
v.1.5 22 October 2020
  1. Mapbox Map Styles needs to be updated (Old Style has been removed)
HOW TO UPDATE FROM PREVIOUS VERSION

1) Update the following files js/leaflet_map/leaflet_func.js, js/leaflet_map/leaflet_half_screen_func.js
v.1.4 16 June 2020
  1. Fixed an issure for short names in top user logged (user-logged-1.html, user-logged-2.html)
  2. Updated Bootsrap Version
  3. Updated Jquery Version to 3.5
  4. Added Modal Advertise and Newsletter with Cookie Session
  5. Added a detail page with Instagram Feed
  6. Added RTL Version
  7. Added in Admin section Add listing with menu list
  8. Added in Admin section orders and edit order page
HOW TO UPDATE FROM PREVIOUS VERSION

1) in style.css aprox line 2927 for the class .dropdown.user .dropdown-menu change the min-width:ineriht  to min-width: 135px;

2) Update the following files css/bootstrap_customized.css, css/bootstrap_customized.min.css, js/common_scripts.js, js/common_scripts.min.js

3) Update js/common_scripts.js, js/common_scripts.min.js

4) Takes as reference these new files: modal-advertiste.html, modal-newsletter.html, css/modal_popup.css, js/modal_popup.js

5) Takes a reference detail-restaurant-6.html and the new script on footer page

6) New folder html_rtl

7,8) Takes as reference the new pages and in admin.css the section 2.1 + 2.2
v.1.3 16 MAY 2020
  1. Added Restaurant Detail page with menu thumbs
  2. Added Colors Variations
  3. Added User logged versions
  4. Added a detail restaurant page with contact form
  5. Added another booking delivery order summary page
  6. Added a submit rider page with wizard form submission
HOW TO UPDATE FROM PREVIOUS VERSION
1) Takes as reference detail-restaurant-4.html + new css in css/detail-page.css under the section /* Menu items with thumbs */ + in js/specific_detail.js this new section // Image popups menu

2) New colors files in css folder

3) Takes as reference the html in user-logged-1.html anduser-logged-2.html. Css styles are in style.css new section 1.5

4) Takes as reference new file detail-restaurant-5.html + assets/detail_contact.php. Update also this file assets/validate.js.
There are also new styles in detail-page.css aprox line 52 (.box_booking .form-group input, .box_booking .form-group textarea)

5) Takes as reference new file booking-delivery-2.html and new css in booking-sign_up.css aprox line 76 to 111

6) Takes as reference new files submit-rider.html, submit-rider.php, new folder in js/wizard and:
- new accordion script in js/common_func.js
- new style in css style section 3.9 (accordion)
v.1.2 19 FEB 2019 
HOW TO UPDATE FROM PREVIOUS VERSION

1) Added Leaflet Open Street Map (+Mapbox)
A) New css file css/leaflet.css
B) New Folder in js folder > leaflet_map
C) Copy the new html pages

2) Added Detail page with Fixed Booking
A) New section in css/detail-page.css > /*-------- Fixed Booking Panel--------*/
B) New section in js/specific_detail.js > // Reserve Fixed on mobile
C) New page detail-restaurant-3.html
v.1.1 29 November 2019 
HOW TO UPDATE FROM PREVIOUS VERSION

- Half Screen Map page
1) Takes as reference listing-map.html
2) Update the follwong css/sass files: bootstrap_customized.css + bootstrap_customized.min.css, listing.css

- Testimonials
1) Takes as reference index-2.html
2) Update css/home.css
3) Copy the 3 new avatar images

- Address Autocomplete
1) Takes as reference index-5.html (API Key required: view the section "Google Map API")

- Styled Select Drop Down
1) Update the following files: js/common_scripts.js + js/common_scripts.min.js, css/style.css (or only the section
/* Jquery select */)

2) Update js/common_func.js (or add only // Jquery select $('.custom_select select').niceSelect(); )

- Added Delivery/Takeaway variation
1) Takes as reference the follwing pages: index-7.html, grid-listing-filterscol-delivery.html, 	
detail-restaurant-delivery.html, booking-delivery.html, confirm-delivery.html.

2) New css files css/detail-page-delivery.css

3) Update the following files: css/style.css (new classes .take, .deliv), css/booking-sign_up.css,	
js/specific_detail.js.




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 form on my profile page with subject [ThemeForest Support] Template name, or use 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, we will check our availability; please don't forget to specify:

Ansonika

Go To Table of Contents