This document covers the installation and use of Hosteller HTML Template and often reveals answers to common problems and issues – read this document thoroughly if you are experiencing any difficulties.
- After unzipping the downloaded pack, you’ll find a HTML Folder with all the files.
- View this template in any browser, you can display or edit the Template without an internet connection.
- Use your hosting File Manager or FTP access to upload project files to your server.
- Once the files are done uploading, go to www.yourdomainname.com/index.html
All information within the main content area is nested within a body tag. The general template structure is pretty the same throughout the template. Here is the general structure of the main page (index.html).
<!doctype html> <html lang="en"> <head> <title>Hosteller</title> <link rel="stylesheet preload" as="style" href="css/example.css"> </head> <body> <header class="header d-flex"> ... </header> <main> <section class="hero section"> ... </section> </main> <footer class="footer accent"> ... </footer> <script src="js/common.min.js"></script> </body> </html>
To include some additional styles or scripts, add code fragments after the main styles and scripts of the template.
The main scripts are loaded in
To fine-tune the work of scripts, we recommend using a webpack. Combine all files into one JS and use it on all pages of the site if you need it.
Google Maps Integration
The plugin includes integration with Google Maps API. To use the full functionality of Google Maps, you need to Create a Project in Google Cloud Console and Get an API Key. When you get the API Key, paste it into the file located
const _KEY = '';
CSS and SCSS
The CSS styles are distributed in separate files to avoid loading unused code by a browser.
<link rel="stylesheet preload" as="style" href="css/preload.css"> <link rel="stylesheet preload" as="style" href="css/libs.css">
Font and Icon styles are loaded in the
preload.css file. And the styles of the main libraries are loaded in the
You can use and edit CSS files to flexibly customize the appearance of the template. However, our recommendation is to use the SCSS files for this, which you will find in the project folder in the scss directory.
To set color or font settings go to the file
/scss/base/_variables.scss and set new values for variables. To enable loading new fonts go to
By default, the template loads the free Google fonts, you can change the font with the one that suits you best. For headings and important text in the Barbercrop HTML Template is used Mulish, and for regular text and body text is used OpenSans font.
Under the terms of the license, images are not included in the package with the code. You can purchase the images you need from Envato Elements, links to all images can be found in the Hostel collection.