Documentation by “Ansonika” v3.6

“SPARKER - HTML Site template”

Created: 12 OCTOBER 2018
Last udpate: 13 December 2025
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

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 file is organized:

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

2. CONTENT
- 2.1 Home
- 2.2 About
- 2.3 Listing
- 2.4 Detail page
- 2.5 Login/register
- 2.6 Map styles
- 2.7 Contacts
- 2.8 404 page
- 2.9 Cart section
- 2.10 Media Gallery
- 2.11 Faq

3. COMMON
- 3.1 Misc
- 3.2 Accordion
- 3.3 List
- 3.4 Spacing
- 3.5 Block reveal
- 3.6 Cookie bar
- 3.7 Sing In Modal
- 3.8 Input Switcher
- 3.9 Datepicker
- 3.10 Styles Switcher

Note
Some pages required additional specific css in the header, for example in the blog page.
<!-- SPECIFIC CSS -->
<link href="css/blog.css" rel="stylesheet">
The item comes with SASS  files.

Change the logo
To change the logo, simply use your PNG24 file (suggested logo height is 36/40px). Below how is coded

<div id="logo">
	<img src="img/logo.svg" width="165" height="35" alt="" class="logo_normal">
	<img src="img/logo_sticky.svg" width="165" height="35" alt="" class="logo_sticky">
</div>

Change the address of Google map in contact page: open mapmarker_func.js and change with your latitude and longitude + your full address. You can change also your map marker (that has to be png24); you can use also the psd provided in the psd folder.

//set up markers 
		var myMarkers = {"markers": [
				{"latitude": "51.511732", "longitude":"-0.123270", "icon": "img/map-marker.png"}
			]
		};
		
		//set up map options
		$("#map").mapmarker({
			zoom	: 14,
			center	: 'Covent Garden London', //YOUR FULL ADDRESS 
			markers	: myMarkers
		});
COMMON ISSUE ON GOOGLE MAP (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 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 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)

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;}

Control the opacity of the header images

You can control the opacity of the header images via css, in css/style.css change the opacity here:	
	
.hero_in.hotels_detail .wrapper {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.6);
}
.hero_in.restaurant_detail .wrapper {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.6);
}
.hero_in.shops_detail .wrapper {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.6);
}

or for the home page
.hero_single.version_2 .wrapper {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.45);
}

Change the primary color
The theme comes with 12 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

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 MAPS works
Open js/map.js and find this line of code:

Let's take as example the map used in single_tour.html page. Open js/map_tours.js.

'Marker': [
			{
				type_point: 'Hotel',
				name: 'Hotel Concordia',
				location_latitude: 48.865633, 
				location_longitude: 2.321236,
				map_image_url: 'img/thumb_map_single_hotel.jpg',
				rate: 'Superb | 7.5',
				name_point: 'Hotel Concordia',
				get_directions_start_address: '',
				phone: '+3934245255',
				url_point: 'detail-hotel.html'
			},

type_point = category tour
location_latitude= the latitude
location_longitude= the longitude
map_image_url: the thumbnail inside the infobox
rate= rate
name_point= the title in info box
description_point= description
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.

CHANGE THE DEFAULT COLOR STYLE OF THE MAP
You can add you onw style for example in js/map.js...look for this line:

styles: []

inside of the square graphs, place you styles. You can find some nice premade styles 
here https://snazzymaps.com/.

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>

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 listing-map.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":"Hotel", //Type Point
"location_latitude":48.865633, //Lat
"location_longitude":2.321236, //Long
"map_image_url":"img/thumb_map_single_hotel.jpg", //Thumb 
"rate":"Superb | 7.5", //Rate
"name_point":"Hotel name", //Name Point
"get_directions_start_address":"", //directions start address (leave empty or specify the start address)
"phone":"+3934245255", //Phone
"url_point":"detail-hotel.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

Datepicker doc and generator
Please refer to this documentation

Menu Options
Takes as reference menu-options.html to view the different submenu positions and third level submenu.

THE GRID
Please refer to this documentation Boostrap

KenBurns Slider (index-8.html)
Please refer to this documentation

Jarallax(index-9.html, index-10.html)
Please refer to this documentation

Example of use 
<!-- Background YouTube Parallax --> 
<div class="jarallax" data-jarallax data-video-src="https://www.youtube.com/watch?v=ab0TSkLe-E0">   
Your content here... 
</div>

<!-- Background Vimeo Parallax --> 
<div class="jarallax" data-jarallax data-video-src="https://vimeo.com/110138539">   
Your content here... 
</div>

<!-- Background Self-Hosted Video Parallax --> 
<div class="jarallax" data-jarallax data-video-src="mp4:./video/local-video.mp4,webm:./video/local-video.webm,ogv:./video/local-video.ogv">   
Your content here... 
</div>

Note: self-hosted videos require 1 video type only, not necessarily using all mp4, webm, and ogv. This is only needed for maximum compatibility with all browsers.

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).

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 and Videos are not included. Envato for copyright rules, does not permit to include those assets in the downloadable file. They are only for demo purpose. Below the sources sites:

E) Updates - top

Version 3.6 13 December 2025

HOW TO UPDATE FROM PREVIOUS VERSION:
Update the following folder/files:
- css/style.css
- css/vendors.css
- js/functions.js
- js/common_scripts.js

Update the HTML new menu structure (copy under the comments on code > MAIN MENU-->)

Version 3.5 16 September 2025

HOW TO UPDATE FROM PREVIOUS VERSION:
Update the following folder/files:
- css/bs-icon-font
- css/vendors.css

Version 3.4 11 June 2025

Version 3.3 18 Febraury 2025

Version 3.2 5 November 2024

Version 3.1 17 September 2024

Version 3.0 18 June 2024

HOW TO UPDATE FROM PREVIOUS VERSION:
1) Update the following files: css/bootstrap.css, css/bootstrap.min.css, js/common_scripts.js

Version 2.9 15 March 2024

HOW TO UPDATE FROM PREVIOUS VERSION:
1) Copy and paste css/bs-icon-font folder
2) Update the following files: css/vendors.css + css/vendors.unminified.css
3) Update the HTML code for #social section in every footer pages

Version 2.8 11 December 2023

Version 2.7 6 September 2023

HOW TO UPDATE FROM PREVIOUS VERSION

Updated jQuery Library to 3.7.1
Update the following file: js/common_scripts.js (same for the rtl version)

Version 2.6 10 May 2023

HOW TO UPDATE FROM PREVIOUS VERSION

1) Updated Bootstrap Library to 5.2.3
Update the following files: css/bootstrap.css, css/bootstrap.min.css, js/common_scripts.js (same for the rtl version)

2) Updated jQuery Library to 3.6.4
Update the following file: js/common_scripts.js (same for the rtl version)

Version 2.5 30 January 2023

  1. Updated Jquery Library to 3.6.3
  2. Fix an opacity issue on index-2.html
  3. Added Kenburns Slider
  4. Added Jarallax Video Hero (Youtube/Vimeo/Self Hosted Video)
HOW TO UPDATE FROM PREVIOUS VERSION

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

2) Update the following files: css/style.css or update the class at line 1704 .header-video video 

3) Takes as reference index-8.html. Copy the folliwng files in the respective folders: 
- css/vegas.css 
- css/vegas.min.css 
- js/vegas.js 
- js/vegas.min.js
- img/kenburns_slider

Update css/style.css or copy the new section /* Home Kenburns and Jarallax */

More info about futher settings and options of the slider https://vegas.jaysalvat.com/ 

4) Takes as reference index-9.html + index-10.html. Copy the folliwng files in the respective folders: 
- js/jarallax.js
- js/jarallax.min.js
- js/jarallax-video.js
- js/jarallax-video.min.js
- video/new video files

Version 2.4 8 November 2022

HOW TO UPDATE FROM PREVIOUS VERSION

Updated Bootstrap Library to 5.2.2
1) Update the following files: css/bootstrap.css, css/bootstrap.min.css, js/common_scripts.js (same for the rtl version)

Version 2.3 8 August 2022

HOW TO UPDATE FROM PREVIOUS VERSION

Update the following files (same for the RTL version): assets/contact.php + contact_detail.php or delete the following lines of code 

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

Version 2.2 4 May 2022

HOW TO UPDATE FROM PREVIOUS VERSION

Updated Bootstrap Library to 5.1.3
1) Update the following files: css/bootstrap.css, css/bootstrap.min.css, js/common_scripts.js (same for the rtl version)
v.2.1 14 January 2022
  1. Updated Documentation
v.2.0 17 August 2021
  1. Updated jQuery Library
  2. Updated to Boostrap 5 the main site
  3. Updated to Boostrap 4.6 the Admin section (at the moment we can upgrade to BS5 due some application are still not supported...in Particular Summernote visual text editor).
  4. Date range picker added "Disabled past dates" feature.
HOW TO UPDATE FROM PREVIOUS VERSION

1) Updated jQuery Library (Please update js/common_scripts.js)

2) Updated to Boostrap 5 the main site. Update the following files: 
- css/bootstrap.css
- css/bootstrap.min.css
- css/style.css (classes updated aprox: .form-group, .form-control, .custom-search-input-2.inner, hr, .strip.list_view figure a img, .strip.list_view .wrapper)
- js/functions.js (//Footer collapse script)
- js/common_scripts.js 

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 of the changes related to the template or see here with more details https://getbootstrap.com/docs/5.0/migration/ 
We suggest to use the find and replace function (carefully) of your html editor.   

MODALS
data-modal > data-bs-modal
data-target > data-bs-target
data-dismiss > data-bs-dismiss

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

UTILITIES 
.float-left > .float-start 
.float-right > .float-end 
.text-left > .text-start 
.text-right> .text-end 
.no-gutter > .g-0
.pr > .pe
.pl > .ps

META TAGS (only necessary below)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

3) Updated to Boostrap 4.6 the Admin section

- Remove data parent from the main nav
- Update the following folder: vendor/bootstrap
- Update js/admin.js (// Configure tooltips for collapsed side navigation)

4) Date range picker added "Disabled past dates" feature.
Takes as reference one of the page tha use the picker and see the new property added in the footer script:"minDate:new Date(),"
v.1.9 6 March 2021
  1. Fixed 2 broken/wrong links in the listing page (layout switch buttons).
v.1.8 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_single_func.js, js/leaflet_map/leaflet_func.js, js/leaflet_map/leaflet_half_screen_func.js
v.1.7 2 September 2020
  1. Updated Bootstrap Version
  2. Updated Jquery Version to 3.5x
  3. Updated Owl Carousel Script
HOW TO UPDATE FROM PREVIOUS VERSION

1) Update the following files css/bootstrap.css, css/bootstrap.min.css, js/common_scripts.js

2) Update js/common_scripts.js, and js/functions.js in detail those sections:
// Forgot Password + // Search Mobile horizontal + // Account switch client type

3) Update js/common_scripts.js, css/vendors.css, css/vendors.unminified.css
v.1.6 6 May 2020
  1. Updated Bootstrap Library
  2. Added Google Address Autocomplete
  3. Added OpenstreetMap
  4. Updated Google font string
  5. Fixed header menu third level last child border
  6. Added RTL Version
  7. Added 2 more detail page
HOW TO FIX FROM PREVIUOS VERSIONS

1) Updated BootStrap Library > 	
Update the following files: bootstrap.css + bootstrap.min.css + common_scripts.js

2) Added Google Address Autocomplete >	
New section in css/style.css > 2.14 Autocomplete Address Search + takes a reference index-7.html (in particular the footer script)

3) Added Leaflet Open Street Map (+Mapbox) >	
A) New section in css/style.css > 2.16 OpenStreet Map 
B) New Folder in js folder > leaflet_map

4) Updated Google font string >
On each HTML file (with your editor use find and replace function) replace this line 
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">

into
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">	

5) Fixed header menu third child >
New style in style.css aprox line 252

.main-menu ul ul ul li:last-child a {
  border-bottom: none !important;
}

6) RTL version >
Take as reference the html_rtl folder. It's the same of the ltr folder except for dedicated css/js files
(bootstrap-rtl.min.css, style_rtl.css, main_rtl.js) and some pages with js on footer changes..example the pages with datepicker.

NOTE
We have updated for both folder (html+html_rtl) the common_script.js and the vendors.css to make the site compatible for RTL direction.
v.1.5 8 February 2020
  1. Updated Documentation
v.1.4 7 May 2019
  1. Rewrite Footer Collapse (Fixed Issue on mobile)
HOW TO UPDATE FROM PREVIOUS VERSION

1) In js/functions.js replace the old script with this one
//Footer collapse
	var $headingFooter = $('footer h3');
	$(window).resize(function() {
        if($(window).width() <= 575) {
      		$headingFooter.attr("data-toggle","collapse");
        } else {
          $headingFooter.removeAttr("data-toggle","collapse");
        }
    }).resize();
	$headingFooter.on("click", function () {
		$(this).toggleClass('opened');
	});

2) In css/style.css replace the /* Footer */ section from line 1015 to 1067

3) In the html replace the old html code with the new one, below an example of a new column div
<div class="col-lg-3 col-md-6 col-sm-6">
<h3 data-target="#collapse_ft_1">Quick Links</h3>
<div class="collapse dont-collapse-sm" id="collapse_ft_1">
	<ul class="links">
	<li><a href="#0">About us</a></li>
	<li><a href="#0">Faq</a></li>
	<li><a href="#0">Help</a></li>
	<li><a href="#0">My account</a></li>
	<li><a href="#0">Create account</a></li>
	<li><a href="#0">Contacts</a></li>
	</ul>
</div>
</div>
v.1.3 19 Febraury 2019
  1. Rewrite Quantity field script for the detail pages forms
  2. Minor Css changes for the social share buttons 
HOW TO UPDATE FROM PREVIOUS VERSION

1.1 Update js/input_qty.js + copy the new images plus.svg/minus.svg
1.2 Update in style.css the /* Booking form */ + /*Quantity incrementer input*/ sections
1.3 Update the html code in the details pages
1.4 Update js/functions.js (Replaced the Dropdown panel(deleted) with a Bootsrtap version)

2 Update in style.css the entire class ul.share-buttons
v.1.2 6 November 2018
  1. Fixed an issue related to the mobile menu close functionality when scroll to bottom page (Files affected: account.html, about.html, blog.html, blog-post.html, booking.html, checkout.html, confirm.html, contacts.html, contacts-2.html, faq.html, help.html, media-gallery.html, pricing-tables.html, whishlist.html)
  2. Fixed an issue related to the mobile menu on faq.html page.
HOW TO UPDATE FROM PREVIOUS VERSION
1.1 HTML
Add the class "menu_fixed" here <header class="header_in is_sticky menu_fixed">
Add the class "sticky_header" here <div class="sub_header_in sticky_header">

1.2 CSS
Open css/style.css and update this class

header.header_in.is_sticky.sticky {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

become

header.header_in.is_sticky {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
} 

1.3 Add these styles
.sub_header_in.sticky_header {
  margin-top: 58px;
}
@media (max-width: 991px) {
  .sub_header_in.sticky_header {
    margin-top: 48px;
  }
} 

1.4 Open js/functions.js and delete this script
// Sticky nav inner
$(window).on('scroll', function () {
if ($(this).scrollTop() > 1) {
$('.header_in.is_sticky').addClass("sticky");
} else {
$('.header_in.is_sticky').removeClass("sticky");
}
});


2) Open js/functions.js and move this script in the new location as you can see in the updated file

// Faq section
	$('#faq_cat').theiaStickySidebar({
		additionalMarginTop: 100
	});
v.1.1 16 October 2018
  1. Added a Bookings summary page (bookings.html)
  2. Added some color schemes
HOW TO UPDATE FROM PREVIOUS VERSION

1) Copy from css/style.css the entire styles under the section 2.13 Bookings
2) Copy the new files from the css folder (color-beige.css, color-gray.css, .....)

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 (business days) GMT +1. Note that Elements customers doesn't have support or updates notification included; to get them please purchase the item from Themeforest.

Need customization or availability for freelance projects?

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

Ansonika

Go To Table of Contents