Thank you for purchasing the Tourly template! I hope you enjoy the template and make something beautiful from it.
Please read all the documentation below and feel free to email me if you have any further questions.
Before setting up the template, please make sure you have the following tools and basic knowledge:
sudo npm i gulp -g
To get started, unzip the Tourly files contents into an appropriate location.
Open Git Bash for Windows or Terminal on Mac or Linux and
cd into the Tourly template location.
After you're in the working directory, run
npm install and wait for all the packages to install.
Once the packages have installed, run the command
gulp and Tourly should automatically launch in a new browser window.
When you go into the Tourly project, you should see 2 folders:
During development, all work and modifications are to be made in the
src/ (short for source) folder.
The final website is compiled into the
dist/ (short for distribution) folder.
Note: You can run
gulp clean in the terminal to remove the dist folder and run
gulp build to republish your project in the dist folder.
Tourly is built on top of Base – a minimal HTML/CSS framework similar to Bootstrap and Foundation, but a lot more lightweight.
It includes normalize, resets, typography, lists, blockquotes, code blocks, forms and a 12 column responsive grid. If you would like a better understanding of what's in the framework, please check out the Base Docs
To get started, open terminal and
cd into the
Inside the project, run the command
Your web browser should launch with the Tourly website loaded.
You can know open the folder with Sublime text editor and start making changes to files within the
If you require a new banner image, it is recommended you have an optimised image with the dimensions:
1200px wide by 780px+ high.
Put your new banner image in
src/img/ and restart your website (CTRL + C in terminal and re-run the
Once your website is re-running, you will need to modify the banner SCSS file:
If you have saved your new banner image as a new name, you will need to modify line 38 and update the banner image name.
In order to wire up your gallery, you will need 2 sets of photos.
A set of thumbnails with a minimum recommended size of
600px wide by 380px+.
A set of full sizes images with a minimum recommended size of
800px wide by 530px+.
The caption below the lightbox uses the
title attribute set on the
<a title="A beautiful picture" href="img/photo-1.jpg" class="gallery-item-link">
To update the map location, you will need to find out the Latitude and Longitude coordinates.
To do this, open https://www.google.com.au/maps and type on the place you would like the map to start (eg: The Breezes Hotel).
When the search returns a result, the geo coordinates will be returned in the address bar of your browser.
Copy the coordinates and open the default.js file in Sublime text editor.
Jump to lines 45 and 53 and replace the geo coordinates with your new ones as required.
To change the email in the booking form, open index.html in Sublime text editor
Modify the form spree URL.
To change the subscription URL for the newsletter, you will need a MailChimp account.
Follow the MailChimp guide for setting up the initial form.
When you get the HTML for the embeddable form, grab the following 2 values from all the code:
<input>name value for the form bots
Once you have these values, open the
Replace the form action URL (line 317) and form bot input value (line 329) with your own.
Thank you for your support and if you have any further questions, please feel free to email me.