Milenia - Hotel & Resort
Website Template
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to contact us via Ticksy Support System. Thanks so much!
The template has 62 HTML files:
-
blog_classic_v1.html
-
blog_classic_v2.html
-
blog_classic_v3.html
-
blog_grid_v1.html
-
blog_grid_v2.html
-
blog_grid_v3.html
-
blog_grid_v4.html
-
blog_list_v1.html
-
blog_list_v2.html
-
blog_masonry_v1.html
-
blog_masonry_v2.html
-
blog_masonry_v3.html
-
blog_masonry_v4.html
-
blog_single_post_v1.html
-
blog_single_post_v2.html
-
elements_accordions_toggles.html
-
elements_alert_boxes_buttons.html
-
elements_banners.html
-
elements_blog_posts.html
-
elements_booking_forms.html
-
elements_call_to_actions.html
-
elements_counters_progress_bars.html
-
elements_dividers_paginations.html
-
elements_dropcaps_blockquotes.html
-
elements_gallery_sliders.html
-
elements_gallery_sliders.html
-
elements_highlights_tooltips_listings.html
-
elements_icon_info_boxes.html
-
elements_rooms_carousels.html
-
elements_rooms_list.html
-
elements_tables_pricing_tables.html
-
elements_tabs_tour_sections.html
-
elements_team_members_partners.html
-
elements_testimonials.html
-
events_by_month.html
-
events_list.html
-
events_masonry.html
-
events_single.html
-
home_beach_resort.html
-
home_boutique_hotel.html
-
home_city_hotel.html
-
home_youth_hostel.html
-
index.html
-
pages_404.html
-
pages_about.html
-
pages_coming_soon.html
-
pages_contact_v1.html
-
pages_contact_v2.html
-
pages_special_offers.html
-
portfolio_classic_2_columns.html
-
portfolio_gallery_4_columns.html
-
portfolio_gallery_4_columns.html
-
portfolio_instagram_gallery.html
-
portfolio_masonry_fullwidth.html
-
portfolio_single_post_v1.html
-
portfolio_single_post_v2.html
-
rooms_layout_v1.html
-
rooms_layout_v2.html
-
rooms_layout_v3.html
-
rooms_layout_v4.html
-
rooms_single_room_page_v1.html
-
rooms_single_room_page_v2.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--================ Basic page needs ================-->
<!--================ Mobile specific metas ================-->
<!--================ Favicon ================-->
<!--================ Google web fonts ================-->
<!--================ Vendor CSS ================-->
<!--================ Theme CSS ================-->
<!--================ Vendor JS ================-->
</head>
<body>
<!--================ Hidden Sidebar ================-->
<!--================ Hidden Sidebar Header ================-->
<!--================ End of Hidden Sidebar Header ================-->
<!--================ Hidden Sidebar Content ================-->
<!--================ Navigation ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ Sub Menu ================-->
<!--================ End of Sub Menu ================-->
<!--================ End of Navigation ================-->
<!--================ End of Hidden Sidebar Content ================-->
<!--================ Hidden Sidebar Footer ================-->
<!--================ End of Hidden Sidebar Footer ================-->
<!--================ End of Hidden Sidebar ================-->
<!--================ Search Modal ================-->
<!--================ Search Form ================-->
<!--================ End of Search Form ================-->
<!--================ End of Search Modal ================-->
<!--================ Header ================-->
<!--================ Section ================-->
<!--================ Column ================-->
<!--================ End of Column ================-->
<!--================ Column ================-->
<!--================ End of Column ================-->
<!--================ Column ================-->
<!--================ Languages List ================-->
<!--================ End of Languages List ================-->
<!--================ End of Column ================-->
<!--================ End of Section ================-->
<!--================ End of Header ================-->
<!--================ Slider Revolution ================-->
<!--================ Slide 1 ================-->
<!--================ End of Slide 1 ================-->
<!--================ Slide 2 ================-->
<!--================ End of Slide 2 ================-->
<!--================ Slide 3 ================-->
<!--================ End of Slide 3 ================-->
<!--================ End of Slider Revolution ================-->
<!--================ Content Section ================-->
<!--================ End of Content Section ================-->
<!--================ Content Section ================-->
<!--================ End of Content Section ================-->
<!--================ Content Section ================-->
<!--================ Entities (Style 1) ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ End of Entities (Style 1) ================-->
<!--================ End of Content Section ================-->
<!--================ Content Section ================-->
<!--================ Icon Boxes ================-->
<!--================ Icon Box ================-->
<!--================ End of Icon Box ================-->
<!--================ Icon Box ================-->
<!--================ End of Icon Box ================-->
<!--================ Icon Box ================-->
<!--================ End of Icon Box ================-->
<!--================ Icon Box ================-->
<!--================ End of Icon Box ================-->
<!--================ Icon Box ================-->
<!--================ End of Icon Box ================-->
<!--================ Icon Box ================-->
<!--================ End of Icon Box ================-->
<!--================ End of Icon Boxes ================-->
<!--================ End of Content Section ================-->
<!--================ Content Section ================-->
<!--================ Tabs ================-->
<!--================ Tabs Navigation ================-->
<!--================ End of Tabs Navigation ================-->
<!--================ Tabs Container ================-->
<!--================ Tab ================-->
<!--================ Tabbed Carousel ================-->
<!--================ Entities (Style 15) ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ End of Entities (Style 15) ================-->
<!--================ Thumbnails ================-->
<!--================ End of Thumbnails ================-->
<!--================ End of Tab ================-->
<!--================ Tab ================-->
<!--================ Tabbed Carousel ================-->
<!--================ Entities (Style 15) ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ End of Entities (Style 15) ================-->
<!--================ Thumbnails ================-->
<!--================ End of Thumbnails ================-->
<!--================ End of Tab ================-->
<!--================ Tab ================-->
<!--================ Tabbed Carousel ================-->
<!--================ Entities (Style 15) ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ End of Entities (Style 15) ================-->
<!--================ Thumbnails ================-->
<!--================ End of Thumbnails ================-->
<!--================ End of Tab ================-->
<!--================ Tab ================-->
<!--================ Tabbed Carousel ================-->
<!--================ Entities (Style 15) ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ End of Entities (Style 15) ================-->
<!--================ Thumbnails ================-->
<!--================ End of Thumbnails ================-->
<!--================ End of Tab ================-->
<!--================ Tab ================-->
<!--================ Tabbed Carousel ================-->
<!--================ Entities (Style 15) ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ End of Entities (Style 15) ================-->
<!--================ Thumbnails ================-->
<!--================ End of Thumbnails ================-->
<!--================ End of Tab ================-->
<!--================ End of Tabs Container ================-->
<!--================ End of Tabs ================-->
<!--================ End of Content Section ================-->
<!--================ Content Section ================-->
<!--================ Testimonials ================-->
<!--================ Testimonial ================-->
<!--================ End of Testimonial ================-->
<!--================ Testimonial ================-->
<!--================ End of Testimonial ================-->
<!--================ Testimonial ================-->
<!--================ End of Testimonial ================-->
<!--================ End of Testimonials ================-->
<!--================ End of Content Section ================-->
<!--================ End of Content Section ================-->
<!--================ Content Section ================-->
<!--================ Entities (Style 4) ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ Entity ================-->
<!--================ End of Entity ================-->
<!--================ End of Entities (Style 4) ================-->
<!--================ End of Content Section ================-->
<!--================ Content Section ================-->
<!--================ Awards ================-->
<!--================ End of Awards ================-->
<!--================ End of Content Section ================-->
<!--================ Content Section ================-->
<!--================ Gallery ================-->
<!--================ End of Gallery ================-->
<!--================ End of Content Section ================-->
<!--================ Footer ================-->
<!--================ Footer row ================-->
<!--================ Widget ================-->
<!--================ End of Widget ================-->
<!--================ Widget ================-->
<!--================ End of Widget ================-->
<!--================ Widget ================-->
<!--================ End of Widget ================-->
<!--================ End of Footer row ================-->
<!--================ Footer row ================-->
<!--================ Widget ================-->
<!--================ End of Widget ================-->
<!--================ Widget ================-->
<!--================ End of Widget ================-->
<!--================ Widget ================-->
<!--================ End of Widget ================-->
<!--================ Widget ================-->
<!--================ End of Widget ================-->
<!--================ End of Footer row ================-->
<!--================ Footer row ================-->
<!--================ End of Footer row ================-->
<!--================ End of Footer ================-->
</body>
</html>
We use Google fonts
https://fonts.google.com/specimen/Playfair+Display
For sure you can change fonts. Select needed fonts, and copy embed code on our pages
You can see commented code
<!-- Google Web Fonts
================================================== -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i,700|Open+Sans:200,300,400,400i,600,600i,700,700i,800,800i|Playfair+Display:400,400i,700,700i,900,900i">
Replace our code with yours
After open css/style.css and make auto-replace
font-family: "Open Sans", sans-serif;
font-family: "Old Standard TT", serif;
font-family: "Playfair Display", serif;
with your font
Create a logo with logo-white.png or other logo and replace it at images folder. For better view see my logo width
If you open your site locally and see such error
Don't worry. if you are testing on local server you need to include extensions of revolution slider (you do not need to include on live server).
Add this after revolution slider script (at the bottom of page)
<script type="text/javascript" src="vendors/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="vendors/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="vendors/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="vendors/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
This template uses 7 css files:
-
animate.css
-
bootstrap.min.css
-
fontawesome-all.min.css
-
linearicons.css
-
milenia-icon-font.css
-
rtl.css
-
style.css
The main style.css has such structure:
/* ----------------------------------------
Stylesheet Guide
------------------------------------------
1. Base
2. Layout
3. Components
4. Pages
5. Media Queries
This template includes 38 Javascript files.
-
milenia.app.js
-
milenia.alert-box.js
-
milenia.contact-form.js
-
milenia.events-calendar.js
-
milenia.isotope.js
-
milenia.link-underliner.js
-
milenia.newsletter-form.js
-
milenia.sidebar-hidden.js
-
milenia.sticky-header-section.js
-
milenia.tabbed-grid.js
-
handlebars-v4.0.5.js
-
instafeed.min.js
-
instafeed.wrapper.js
-
isotope.pkgd.min.js
-
jquery-3.3.1.min.js
-
jquery.easing.1.3.js
-
jquery.parallax-1.1.3.js
-
mad.customselect.js
-
maplace-0.1.3.min.js
-
modernizr.js
-
monkeysan.accordion.js
-
monkeysan.counters.js
-
monkeysan.jquery.nav.1.0.js
-
monkeysan.sameheight.js
-
monkeysan.tabs.js
-
monkeysan.validator.min.js
-
jquery.arcticmodal-0.3.min.js
-
jquery.countdown.js
-
jquery.fancybox.js
-
jquery-ui.js
-
mediaelement-and-player.js
-
moment.js
-
monkeysan-jquery-tooltip.js
-
jquery.nicescroll.js
-
owl.carousel.js
-
jquery.themepunch.revolution.min.js
-
select2.js
-
tweetie.min.js
If you want to change slider settings, for example, you want switch on/off autoslideshow or change time delay you can find all slider settings here js/script.js
We use Revolution slider. How to adjust this slider you can read here https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/
For carousels we use OwlCarousel. Full Documentation you can find here https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html
For example you want to change speed on Revslider. Open my jyour html and search code
<!--================ Slide 1 ================-->
<li data-transition="fade" data-speed="300" data-delay="9000"><img src="images/slide-01.jpg"
Delay: 9000 means 9 seconds per slide. If you want 8 seconds, write 8000.
If you are looking for global slider settings open js/milenia.app.js and search
/* ------------------------------------------------
Revolution slider
------------------------------------------------ */
var $revSlider1 = $('#rev-slider-1'),
$revSlider2 = $('#rev-slider-2'),
$revSlider3 = $('#rev-slider-3'),
$revSlider4 = $('#rev-slider-4');
if($revSlider1.length && $.fn.revolution) {
$revSlider1.show().revolution({
fullScreenOffsetContainer: ($(window).width() > 767 && $(window).height() > 600) ? '#milenia-header:not(.milenia-header--transparent-single)' : '',
sliderLayout: 'fullscreen',
dottedOverlay: 'milenia',
disableProgressBar: "on",
spinner: 'spinner3',
gridwidth:[1400, 1024, 813, 580],
responsiveLevels: [1400, 1024, 813, 580],
parallax: {
type: 'mouse+scroll',
origo: 'slidercenter',
speed: 400,
levels: [5,10,15,20,25,30,35,40,45,46,47,48,49,50,51,55],
disable_onmobile: 'on'
},
navigation: {
keyboardNavigation: 'on',
keyboard_direction: 'horizontal',
onHoverStop: 'false',
arrows: {
enable: false,
},
Arrows:{ Enable:false means that hide arrows. Replace with true and you show arrows. All parameters you can find in offisial documentations. Links are above
When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. Read more here: http://imulus.github.io/retinajs/
If you want to switch on/off sticky menu, remove class from header element "milenia-header-section--sticky-xl"
At the end of string you can control resolutions where sticky menu will work xs, sm, md, lg, xl, xxl, xxxl
if you want to remove preloader, open your HTML and remove <div class="milenia-preloader"></div>
If you want to connect Instagram to the template open js/milenia.app.js and search
/* ------------------------------------------------
Instagram
------------------------------------------------ */
if(window.InstafeedWrapper) {
var instafeeds = document.querySelectorAll('.milenia-instafeed > .milenia-grid'),
galleryInstafeeds = document.querySelectorAll('.milenia-instafeed-gallery');
InstafeedWrapper.setUsersSecureOptions({
'customer': {
userId: 314754609,
accessToken: '314754609.a85626a.dbe04117a894440ebb2586a385685451',
clientId: '686d7a7385cf43ebb9518774734459da'
}
});
Open js/js/milenia.app.js and search
/* ----------------------------------------
Google Maps
---------------------------------------- */
App.modules.GoogleMaps = {
config: {
map_options: {
zoom: 16,
scrollwheel: false
},
locations: [
{
lat: 40.7707307,
lon: -74.0210859,
icon: 'images/marker.png',
title: 'Main office'
}
],
generate_controls: false,
controls_on_map: false,
view_all: false
},
Change coordinates. You can generate new coordinates here
https://www.gps-coordinates.net/
I've used the following scripts:
-
-
jquery-ui.min.js - a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library
-
jquery.modernizr.js - a small piece of JavaScript code that automatically detects the availability of next-generation web technologies in your user's browsers
-
retina.min.js - an open source script that makes it easy to serve high-resolution images to devices with retina displays
-
milenia.app.js - custom js with plugin's settings
-
audioplayer.js - Responsive and Touch-Friendly audio player
-
-
jquery.countdown.min.js - jQuery plugin that sets a div or span to show a countdown to a given time
-
jquery.nicescroll.js - Animated anchor navigation made easy with jQuery
-
-
owl.carousel.min.js - Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider
-
jquery.fancybox.js - a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page
-
jquery.themepunch.revolution.min.js - the highly acclaimed slide-based displaying solution, thousands of businesses, theme developers and everyday people use and love!
-
-
select2.js - Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
-
-
mediaelement-and-player.js - HTML5 <audio> or <video> player with support for MP4, WebM, and MP3 as well as HLS, Dash, YouTube, Facebook, SoundCloud and others with a common HTML5 MediaElement API, enabling a consistent UI in all browsers.
-
moment.js - Parse, validate, manipulate, and display dates and times in JavaScript.
Clipart for the preview was bought from http://depositphotos.com and https://unsplash.com/
IMPORTANT: clipart is not included in the stock file.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting http://velikorodnov.ticksy.com and asking your pre-sale question in the "Item Discussion" section.
Monkeysan