Crossbrowser Compatible with Edge, IE9+, Firefox, Safari, Opera, Chrome
Premium Layer Slider
W3 Valid
Retina ready
Font Awesome 400+ icons
Flat icons uses
Powered with Bootstrap 4
Pixel Perfect Responsive
Smooth animation
Working PHP contact form with validation
Poperty View Google Maps
Google Maps easy to setup via data attributes
Responsive video
Well documented
Third party credits
We are extremely grateful for the people working on the projects below. These guys are making our lives much easier, thus we can focus on building high quality products.
The most popular jQuery popup and photo gallery plugin.
Including resource files
To get started you need to copy the necessary resource files to your assets folder and include them to your pages as illustrated in the example below. You need to insert these lines in the <head> section of your site.
Make sure to enter the corrent path for these files. The folder structure used by your site can differ from our example and you may need to change them accordingly.
jQuery and GreenSock are external libraries. Make sure to not insert a duplicate version if your site already uses them.
What is Elements and How It Work?
Elements is the single part or small part of a page or design. In the template we devide each of the section or design in single element, so that you can create a new page or design by own, using the single part of element.
Example
We include several button style, If you use the bottom code this button will appear
As a header and header style we create several type of header and it's all of the headers and it's source code includes here. All of the header system followed the bootstrap header configuration. Listed all the header in a table and it's class, that all are negosiated with the Bluebird template.
Header Name
Class Name
Header Name
Class Name
Default Header
.default-header
Transparent Header Modern
.transparent-header-modern
Devide Header
.devide-header
Transparent Header
.transparent-header
Standard Header
.standard-header
Default Header
We include several header style in the template. At the bottom of the text, display preview design and also source code under the preview. It's main class is class .default-header with <header> tag.
We include several header style in the template. At the bottom of the text, display preview design and also source code under the preview. It's main class is class .default-header with <header> tag.
We include several header style in the template. At the bottom of the text, display preview design and also source code under the preview. It's main class is class .devide-header with <header> tag.
We include several header style in the template. At the bottom of the text, display preview design and also source code under the preview. It's main class is class .transparent-header with <header> tag.
We include several header style in the template. At the bottom of the text, display preview design and also source code under the preview. It's main class is class .transparent-standard with <header> tag.
We include several header style in the template. At the bottom of the text, display preview design and also source code under the preview. It's main class is class .full-header with <header> tag.
Preview the thumbnail block and the useable source code bottom. To use the thumbnail just copy and past the source code.
1
Discussion and make a deal with each other where notedown all about the project
<div class="thumb-numbering mb-4">
<i class="flaticon-contract flat-medium text-primary"></i><span class="h1 text-gray pl-4">1</span>
<p>Discussion and make a deal with each other where notedown all about the project</p>
</div>
The source code of top thumbnail design
Thumbnail Zooming
Preview the thumbnail block and the useable source code bottom. To use the thumbnail just copy and past the source code.
Mollis lorem posuere porta class sociis rhoncus primis ornare. Suscipit risus volutpat varius eget. Elementum mauris tempor at class nullam.
<div class="thumb-modern-border p-4 mb-5">
<i class="flaticon-insurance flat-medium text-primary bg-gray d-table"></i>
<h5 class="my-3"><a href="#">Business Insurance</a></h5>
<p>Mollis lorem posuere porta class sociis rhoncus primis ornare. Suscipit risus volutpat varius eget. Elementum mauris tempor at class nullam.</p>
</div>
The source code of top thumbnail design
Thumbnail Basic
Preview the thumbnail block and the useable source code bottom. To use the thumbnail just copy and past the source code.
Special Oil Massage
Tempor ridiculus nonummy potenti ultrices sodales senectus accumsan Commodo ac justo. Nec dis maecenas elit aliquam. Class congue fringilla luctus mattis. Odio, venenatis montes tellus blandit a semper enim nunc.
All the pricing table design and source code include, you can preview the design from and copy the source code and make the design by own.
Pricing Classic Design
Preview the thumbnail block and the useable source code bottom. To use the thumbnail just copy and past the source code. View the design in template Click Here
Preview the thumbnail block and the useable source code bottom. To use the thumbnail just copy and past the source code. View the design in template Click Here
All the fact counter and and counting animation styles are include here.
Simple Counting
Preview the counting block and the useable source code bottom. To use the counter just copy and past the source code. View the design in template Click Here
All of the inout from styles, demo and source are added. Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more
Simple Form
Simple form design demo off white background and small border raduis. Demo overview and it's source code under it.
Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
Simple form design demo off white background and flat icon right side. Demo overview and it's source code under it.
Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
Simple form design demo off white background and flat icon right side. Demo overview and it's source code under it.
Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
Include owl carousel plugin to slide text, images, element and other. Carousel preview and source code here, if you want to make any custom design just copy past the source code from hre.
Single Image Carousel
Single image carousel, it's mostly use in single service page and single portfolio page.
To change the list content color you can use this class with <ul> tag and all the list text under <li> tag even <a> tag will change it's color following the class.
Class Name
Description
.list-color-primary
list ancor color under li and a tag will change color.
.list-color-white
list ancor color under li and a tag will change color.
.list-color-general
list ancor color under li and a tag will change color.
.list-color-secondary
list ancor color under li and a tag will change color.
.list-text-hover-primary
list ancor color under li and a tag will change color when mouse over.
List Width and Floating
List content column variation, sometime it's need to keep the list content in different column. It easy to arrange call the bottom listed class with <ul> tag.
Class Name
Description
.list-full-width
use this class with <ul> tag list will full width.
.list-half-width
use this class with <ul> tag list will half width.
.list-three-fold-width
use this class with <ul> tag list will 3 fold divide
List Styles Variations
We coded the several type of list style, to do it you don't need to change the css. Just put the or call the class name with <ul> tag.
Class Name
Description
.list-bullate
list style will bullate, use with <ul> tag.
Layer and Element Position
Class variation of layer or element positioning, to make the effect just use the class with the tag.
Layer Position
Class Name
Description
.top-0
If you make a element position absolute, and use the class to make the layer top 0 position.
.left-0
If you make a element position absolute, and use the class to make the layer left 0 position.
.right-0
If you make a element position absolute, and use the class to make the layer right 0 position.
.bottom-0
If you make a element position absolute, and use the class to make the layer bottom 0 position.
.xy-center
layer middle position of the box top, left, right, bottom. Make the element position relative or absolute before do it.
.x-center
layer middle position of the box left, right. Make the element position relative or absolute before do it.
.y-center
layer middle position of the box top, bottom. Make the element position relative or absolute before do it.
Configuring Navigation
To configure the main navigation and change the style use those classes with <nav> tag.
Nav Active
Class Name
Description
.nav-line-active
Downline style with active nav item, use this class with nav tag.
.nav-border-active
Border around with active nav item, use this class with nav tag.
Nav Dropdown Color
Class Name
Description
.nav-dropdown-white
Navigation dropdown white color.
.nav-dropdown-primary
Navigation dropdown primary color.
.nav-dropdown-secondary
Navigation dropdown secondary color.
Nav Hover
Class Name
Description
.nav-primary-hover
Nav text change color when houver or active, use with nav tag.
.nav-secondary-hover
Nav text change color when houver or active, use with nav tag.
.nav-dark-hover
Nav text change color when houver or active, use with nav tag.
Top Navigation
Class Name
Description
.nav-bar-top.left
Use it with top nav ul and left class for left float and margin.
.nav-bar-top.right
Use it with top nav ul and right class for right float and margin.
Form Configure
Changing the form style use the listed class before the form tag.
Form Change Class
Class Name
Description
.form-icon-right
To use the icon with input, use this class before form tag or with form.
.border-light-form
Form input style lighr border and transparent background.
Hover Effect
Listed varius class for hover effect and it's description.
Hover Effect Class
Class Name
Description
.hover-bg-white
Use to change white background color.
.hover-bg-primary
Use to change primary background color.
.hover-text-white
All the text element under it's becomes white color when hover.
.hover-text-secondary
All the text element under it's becomes secondary color when hover.
.img-hover-border
Active border around when mouse hover on image, use class with image tag. To see the preview Click Here and go to gallery image.
.img-hover-up
Image jump up slow when mouse over, use class with image tag. To see the preview Click Here and go to gallery image.
Miscellaneous Styles
miscellaneous class variation to use different purpose, class are listed and provide the descriptions.
Miscellaneous Class
Width Responsive
Class Name
Description
.w-md-100
Element width 100% when max width 1199px from 0px
.w-sm-100
Element width 100% when max width 991px from 0px
.w-xs-100
Element width 100% when max width 767px from 0px
Display Responsive
Class Name
Description
.md-mx-none
Display none max width 1199px from 0px
.sm-mx-none
Element display none when max width 991px from 0px
.xs-mx-none
Element display none when max width 767px from 0px
Spacing Responsive
Class Name
Description
.md-ml-0
Margin left 0 in max width 1199px from 0px
.sm-ml-0
Margin left 0 in max width 991px from 0px
.sm-m-0
Margin 0 in max width 991px from 0px
.sm-mb-30
Margin bottom 30px when max width 991px from 0px
.sm-pl-0
Padding left 0 in max width 991px from 0px
.sm-pl-0
Padding left 0 in max width 991px from 0px
.sm-p-0
Padding 0 in max width 991px from 0px
.sm-p-30
Padding 30px in max width 991px from 0px
.sm-pt-0
Padding top 0px in max width 991px from 0px
.sm-px-0
Padding left 0px and padding right 0px in max width 991px from 0px
Class Name
Description
.transation
Transation all 300 ms, use in any tag to set the transation time effect.
.box-100px
To set any tag 100px width and height.
.letter-spacing-1
Letter spacing 0.5rem
.3col-divider
Use for divide the thumbnail specially transparent thumbnai use this tag with parent child Click for Preview see the service section
.nav-tab-line
tab navigation style hole under a line and active down angle arrow Click for Preview see the tab menu section.
.sm-ml-0
Element padding left none when max width 991px from 0px
.sm-p-30
Element padding 30px when max width 991px from 0px
.sm-mb-30
Element margin bottom 30px when max width 991px from 0px
.sm-m-0
Element margin 0px when max width 991px from 0px
.sm-bg-img-none
Element background image none when max width 991px from 0px
.md-bg-img-none
Element background image none when max width 1199px from 0px
.sm-pt-0
Element padding top 0 when max width 991px from 0px
.underline
Text element underline
.xs-text-center
Text center when max width 767px from 0px
.xs-mx-auto
Margin left and right auto when width max 767px from 0
.sm-img-max-auto
Image width 100% from 991 px to 0 but if you use this class, still display maximum image width.
About jQery Options
Bluebird's javascript options is very simple and easy to customize. All the options and control system keeps in custom.js file. Each of the option in this file there have keeps comments and note about the settings and it's work.
Setup Options
All the source code of javascript options keeps in custom.js file. File location is templates > assets > js > custom.js. All the seetings are keepet in a main function and top of the settings, there keeps selectors of each options.
For reference, here is a quick example initializing a selectors. And how to start the function. and all the option will have to keep under this function.
Example of jQery options configuration, all the options set in this function.
Configuring jQery Settings
All the javascript settings are listed part by part and describe how it work and customize.
Navigation options
There have few part of navigation configure option. In the Bluebird template the navigation use auto active system by jquery. If you remove this js the nav manu item will not active in the visited page. Here the quick example the source code.
// Auto active class adding with navigation
$window.on('load', function () {
var current = location.pathname;
var $path = current.substring(current.lastIndexOf('/') + 1);
$('#navbarSupportedContent li a').each(function (e) {
var $this = $(this);
// if the current path is like this link, make it active
if ($path == $this.attr('href')) {
$this.parent('li').addClass('active');
}
else if ($path == '') {
$('.navbar-nav li:first-child').addClass('active');
}
})
})
Configuration the nav dropdown in mobile version.
// dropdown submenu on hover in desktopand dropdown sub menu on click in mobile
$navigation.each(function() {
$dropdown.on('click', function(e){
if($window.width() < 1100){
if($(this).parent('.dropdown').hasClass('visible')){
// $(this).parent('.dropdown').children('.dropdown-menu').first().stop(true, true).slideUp(300);
// $(this).parent('.dropdown').removeClass('visible');
window.location = $(this).attr('href');
}
else{
e.preventDefault();
$(this).parent('.dropdown').siblings('.dropdown').children('.dropdown-menu').slideUp(300);
$(this).parent('.dropdown').siblings('.dropdown').removeClass('visible');
$(this).parent('.dropdown').children('.dropdown-menu').slideDown(300);
$(this).parent('.dropdown').addClass('visible');
}
e.stopPropagation();
}
});
$('body').on('click', function(e){
$dropdown.parent('.dropdown').removeClass('visible');
});
$window.on('resize', function(){
if($window.width() > 991){
$('.dropdown-menu').removeAttr('style');
$('.dropdown ').removeClass('visible');
}
});
});
Auto Taking Header Space
Some time header height extends and it have to keep top position or up to the slider. And when page scroll it's seems active top. So the header need position from first stage, when you keep the header in it's position the bottom section jump up. So this jQery option count the header height and give the actual space of bottom section of the header. So to do it there have to use 2 different class.
One is .nav-on-top it use if you want to keep the header top position of the page.
Another is .nav-on-banner it use if you want to keep the header on the banner and transparent background.
//Put slider space for nav not in mini screen
if(document.querySelector('.nav-on-top') !== null) {
var get_height = jQuery('.nav-on-top').height();
if(get_height > 0 && $window.width() > 991){
jQuery('.nav-on-top').next().css('margin-top', get_height);
}
$window.on('resize', function(){
var get_height = jQuery('.nav-on-top').height();
if($window.width() < 991){
jQuery('.nav-on-top').next().css('margin-top', '0');
}
else {
jQuery('.nav-on-top').next().css('margin-top', get_height);
}
});
}
if(document.querySelector('.nav-on-banner') !== null) {
var get_height = jQuery('.nav-on-banner').height();
if(get_height > 0 && $window.width() > 991){
jQuery('.page-banner').css('padding-top', get_height);
}
$window.on('resize', function(){
var get_height = jQuery('.nav-on-banner').height();
if($window.width() < 991){
jQuery('.page-banner').css('padding-top', '0');
}
else {
jQuery('.page-banner').css('padding-top', get_height);
}
});
}
Layer Slider Options
Calling slider jQery and active the Bluebird, basic examle and bottom of the jquery there have listed Bluebird options and values of slider variation.
The layout mode for sliders. See fullSizeMode and other options for additional settings and customization options. Read the Slider layouts section for more information.
responsiveUnder
<num>
–
Starts scaling down your sliders under the specified slider width value in full-width sliders. Omit this option to let the slider automatically scale itself.
fullSizeMode
'normal 'hero' 'fitheight'
'normal'
Select the sizing behavior of your full size sliders (e.g. hero scene).
fitScreenWidth
true false
true
If enabled, the slider will always have the same width as the viewport, even if a theme uses a boxed layout, unless you choose the "Fit to parent height" full size mode.
allowFullscreen
true false
true
Visitors can enter OS native full-screen mode when double clicking on the slider.
Other settings
maxRatio
<num>
–
The slider will not enlarge your layers above the target ratio. For example, the value 1 will keep your layers in their initial size, without any upscaling.
Move your slider to a different part of the page by providing a jQuery DOM manipulation method & selector for the target destination.
insertSelector
'<selector>'
–
clipSlideTransition
'disabled' 'enabled' 'x' 'y'
'disabled'
Choose on which axis (if any) you want to clip the overflowing content (i.e. that breaks outside of the slider bounds).
preventSliderClip
true false
true
Ensures that the site template cannot clip parts of the slider when used in a boxed layout.
Mobile
Properties
Values
Defaults
Description
hideOnMobile
true false
false
Hides the slider on mobile devices, including tablets.
hideUnder
<num>
–
Hides the slider when the viewport width goes under the specified value.
hideOver
<num>
–
Hides the slider when the viewport becomes wider than the specified value.
slideOnSwipe
true false
true
Ignore selected slide transitions and use sliding effects only when users are changing slides with a swipe on mobile devices.
optimizeForMobile
true false
true
Enable optimizations on mobile devices to avoid performance issues (e.g. fewer tiles in slide transitions, reducing performance-heavy effects with very similar results, etc).
Slideshow
Properties
Values
Defaults
Description
Slideshow behavior
firstSlide
<num> 'random'
1
The slider will start with the specified slide. You can also use the value "random".
autoStart
true false
true
Slideshow will automatically start after page load.
startInViewport
true false
true
The slider will start when it enters into the viewport.
pauseOnHover
'disabled' 'enabled' 'layers' 'looplayers'
'enabled'
Decide what should happen when you move your mouse cursor over the slider. Do nothing, pause slideshow only, pause slideshow and layer transitions (with loop optionally).
pauseLayers
true false
false
If you enable this option, layer transitions will not start playing until the slideshow is in a paused state.
hashChange
true false
false
Updates the hash in the page URL when changing slides based on the deeplinks you've set to your slides. This makes it possible to share URLs that will start the slider with the currently visible slide.
Slideshow navigation
keybNav
true false
true
You can navigate through slides with the left and right arrow keys.
touchNav
true false
true
Gesture-based navigation when swiping on touch-enabled devices.
Play by Scroll
playByScroll
true false
false
Play the slider by scrolling your mouse wheel.
playByScrollStart
true false
false
Instead of freezing the slider until visitors start scrolling, the slider will automatically start playback and will only pause at the first keyframe.
playByScrollSpeed
<num>
1
Set the playing speed of Play by Scroll.
playByScrollSkipSlideBreaks
true false
false
Enable this option to eliminate the stop between slide changes. Visitors would no longer need to scroll at the end of slides, instead the slider will only stop at the keyframes you specify.
Cycles
cycles
<num>
–
Number of cycles if slideshow is enabled.
forceCycles
true false
true
The slider will always stop at the given number of cycles, even if the slideshow restarts.
Other settings
twoWaySlideshow
true false
false
Slideshow can go backwards if someone switches to a previous slide.
shuffleSlideshow
true false
false
The slideshow will proceed in random order.
Appearance
Properties
Values
Defaults
Description
Slider appearance
skin
'<skin_name>'
'v6'
You can change the skin of the slider. The 'noskin' skin is a border- and buttonless skin. Custom skins can also be specified.
skinsPath
'<skins folder path>'
'/Bluebird/skins/'
You can change the default path of the skins folder. Make sure to append a trailing slash at the end of your path.
sliderFadeInDuration
<num>
350
The duration of the fade transition (in ms) when the slider is showing up for the first time on page load.
Slider global background
globalBGColor
'<css value>'
–
Global background color of the slider. Slides with non-transparent background will cover this one. You can use all CSS methods such as HEX or RGB(A) values.
globalBGImage
'<url>'
–
Global background image of the slider. Slides with non-transparent backgrounds will cover it. This image will not scale in responsive mode.
globalBGRepeat
'no-repeat' 'repeat' 'repeat-x' 'repeat-y'
'no-repeat'
Global background image repeat.
globalBGAttachment
'scroll' 'fixed'
'scroll'
Choose between a scrollable or fixed global background image.
globalBGPosition
'<css value>'
'50% 50%'
Global background image position of the slider. The first value is the horizontal position and the second value is the vertical.
globalBGSize
'auto' 'cover' 'contain' '<css value>'
'auto'
Global background size of the slider. You can set the size in pixels, percentages, or constants: auto | cover | contain
Navigation Area
Properties
Values
Defaults
Description
Show navigation buttons
navPrevNext
true false
true
Disabling this option will hide the Prev and Next buttons.
navStartStop
true false
true
Disabling this option will hide the Start and Stop buttons.
navButtons
true false
true
Disabling this option will hide slide navigation buttons or thumbnails.
Show buttons on hover
hoverPrevNext
true false
true
Show the buttons only when someone moves the mouse cursor over the slider. This option depends on the previous setting.
hoverBottomNav
true false
false
Slide navigation buttons (including thumbnails) will be shown on mouse hover only.
Slideshow timers
showBarTimer
true false
false
Show the bar timer to indicate slideshow progression.
showCircleTimer
true false
true
Use circle timer to indicate slideshow progression.
showSlideBarTimer
true false
false
You can grab the slidebar timer playhead and seek the whole slide real-time like a movie.
Thumbnail Navigation
Properties
Values
Defaults
Description
Appearance
thumbnailNavigation
'disabled' 'hover' 'always'
'hover'
Type of the thumbnail navigation. Make sure to enable navButtons to work properly.
tnContainerWidth
'<percentage>%'
'60%'
The width of the thumbnail container relative to the slider size.
Thumbnail dimensions
tnWidth
<num>
100
The width of the thumbnails in pixels.
tnHeight
<num>
60
The height of the thumbnails in pixels.
Thumbnail appearance
tnActiveOpacity
0 - 100
35
Opacity in percents of thumbnail of the active slide.
tnInactiveOpacity
0 - 100
100
Opacity in percents of thumbnails of the inactive slides.
Videos
Properties
Values
Defaults
Description
autoPlayVideos
true false
true
Video & audio will be automatically started on the active slide.
autoPauseSlideshow
'auto' true false
'auto'
The slideshow can temporally be paused while videos are playing. You can choose to permanently stop the pause until manual restarting.
The automatically fetched preview image quality for YouTube videos when you do not set your own. Please note, some videos do not have HD previews, and you may need to choose a lower quality.
YourLogo
Properties
Values
Defaults
Description
yourLogo
'image_url' false
false
A fixed image layer can be shown above the slider that remains still throughout the whole slider. Can be used to display logos or watermarks.
yourLogoStyle
'<css properties>'
'left: -10px; top: -10px;'
CSS properties to control the image placement and appearance.
yourLogoLink
'<url>' false
false
Enter a URL to link the YourLogo image.
yourLogoTarget
'self' '_blank'
'_blank'
Choose whether you want to open the link in the current or on a new tab.
Default Options
The following settings are inheritable by certain options and can be set globally if they choose to use inheritance.
Properties
Values
Defaults
Description
Slide background defaults
slideBGSize
'auto' 'cover' 'contain'
'cover'
The default slide background image size. This will be used as a default on all slides, unless you choose to explicitly override it on a per slide basis.
slideBGPosition
'<css value>'
'50% 50%'
The default slide background image position. This will be used as a default on all slides, unless you choose the explicitly override it on a per slide basis.
Parallax defaults
parallaxSensitivity
<num>
10
Increase or decrease the sensitivity of parallax content when moving your mouse cursor or tilting your mobile device.
parallaxCenterLayers
'center', 'top'
'center'
Choose a center point for parallax content where all layers will be aligned perfectly according to their original position.
parallaxCenterDegree
<num>
40
Provide a comfortable holding position (in degrees) for mobile devices, which should be the center point for parallax content where all layers should align perfectly.
parallaxScrollReverse
true false
false
Your parallax layers will move to the opposite direction when scrolling the page.
Misc
preferBlendMode
true false
false
Enable this option to avoid blend mode issues with slide transitions. Due to technical limitations, this will also clip your slide transitions regardless of your settings.
forceLayersOutDuration
<num>
750
The animation speed in milliseconds when the slider forces remaining layers out of scene before swapping slides.
Misc
Properties
Values
Defaults
Description
allowRestartOnResize
true false
false
Certain transformation and transition options cannot be updated on the fly when the browser size or device orientation changes. By enabling, the slider will automatically detect such situations and will restart the current slider to preserve its appearance.
useSrcset
true false
true
The srcset attribute allows loading dynamically scaled images based on screen resolution. It can save bandwidth and allow using retina-ready images on high resolution devices. If not configured correctly, srcsets might also cause blurry images in some edge cases.
Examples Demos
Template Demo – Great for beginners
Those demo or example of the template. It's very easy to customer to view the demo from PC and understand the categorys.
Bluebird is built on standard web technologies like HTML, CSS, and Javascript, and offers a way to extend the capabilities of the plugin through the Bluebird Template. Please note, this requires programming skills and web development experience, thus we cannot recommend it to users without the necessary knowledge.
Font Api
In the Bluebird template every where we use the google fonts api. We have use diffrent fonts for each category. All the fon's api links and it's used category we link bottom. The comments on top of the api link is the category. Link of google fomnt apni Google Fonts you can create your own apni from here.
Google map developers provide the map API key. We have use the free google map API key. We generate the API from our own account. If you want to create your own API key then you have create it from Map Developer Tools there have all instruction of how to create the google map api and link.
We also use different map style, it looks very colorful. The map style configured in map.script.js file. If you want to change the map style, just choose the map style and API from snazzymaps.com you can customize the map from here and copy the created map source code past it into the map.script.js file under it's style paramiter.
First Release Bulebird - Multipurpose HTML Template.
2 Home page and 65 Inner Template
Support
Before reporting an issue
Always use the latest version We're constantly working on fixing issues and improving the template in every way. Make sure that you're using the latest version, as the issue you're experiencing might have already been solved.
Try to find the source of the problem If the template does not appear there might be a Javascript error on the page. Check your browser's Javascript console, as the error message can be extremely helpful finding issues. You can also try to temporarily remove other scripts from the page to test compatibility issues.
Try to find a solution A lot of times issues occur due to incorrect settings. It's always a good idea to quickly review your javascript settings, source links and try to find a solution in the documentation or emailing at: unicoder16@gmail or support@unicoderbd.com
How to contact us
Again, thank you for purchasing this Template!
If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/unicoder ).
We aim to answer all questions within 24 hours . In some cases the waiting time can be extended to 48 hours.
