Thank you for purchasing Star Travel template! We truly hope that it will serve you up to your expectations.
This documentation will give you an understanding of how Star Travel is structured and guide you in performing common functions. This guide assumes a basic knowledge of HTML and CSS. If you need further assistance, please contact me at hello@iamabdus.com
You will see the following folder structure inside Star Travel. If you want to build simple HTML and CSS based website, use Static HTML version. This folder contains all the .html files and the assets folder that contains the following folders:
Dev Environment folder contains SCSS files, if you want to use Sass as a css preprocessor to build your app. There are two folders: one for Gulp and another one is for Koala . Both contain the necessary files for setting up the environment, the .html files and an assets folder that contains the following folders
SCSS folder is located in the assets folder. Inside the SCSS folder you will find a file named Star.scss. We have imported the variables, bootstrap.scss file and all the components files for Star Travel here. You can easily edit these SCSS files for any customization. We have also provided a brief overview of SCSS customization in the SCSS Customization section
scss ├── Star │ └── utilities │ └── badges.scss │ └──(other components) └── _variables.scss └── Star.scss
You can simply use HTML / CSS / JS to customize Star Travel. But for advanced users we have provided professional Front-End toolsets like Koala and Gulp to speed up the development process.
To build a simple HTML and CSS based website simply copy the Static HTML version. You can then start Customizing according to you need by editing the HTML and CSS.
Step-1: Download Node.js and install into
your computer.
Step-2: Open terminal in the project root directory.
Step-3: Then run the following command accordingly into terminal:
//install gulp-cli globally
$ npm install gulp-cli -g
//install devDependencies
$ npm install
//run project
$ gulp
- this will fire default gulp task which includes: launching BrowserSync, build all html files, javascript
minification, sass compilation and lanching watch task. BrowserSync will create dev server and sync your browser
with your code editor.
There are 2 basic ways to customize this template.
If you want to use Star Travel as it is, or only need limited customization, feel free to simply include the compiled Star.css or Star.min.css file located in the dist/assets/css directory.
This is more versatile and sustainable way to customize Star Travel . The 2 major benefits of this
strategy are using variable overrides (_variables.scss) to easily customize theme styles, plus you
never have to touch Bootstrap source, meaning future updates will be much, much, simpler. For more information, please
see the official Bootstrap theming.
// Colors variable
$primary: #0074d9;
$secondary: #ff4136;
//Modify map
$theme-colors: (
(
"primary": $primary,
"secondary": $secondary
)
);
This part of the documentation will explain how to change the current Color Scheme of your site, You simply need
to include an existing color scheme or change the HEX Color Code in the css/Star.css and include
inside <head>
<head>
<link rel="stylesheet" href="css/Star.css" id="option_style">
</head>
To change the color Scheme, go to this foldercss/Star.css and open Star.css.Change
the HEX Color Code to whatever you want like: color: #ec5598;
You will find 4 more existing color schemes in css directory. To use them just replace css/Star.css
with css/Star-color1.css or css/Star-color2.css or css/Star-color3.css
or css/Star-color4.css inside <head>.
You can use all available color
options in the same way shown below:
<head>
<link rel="stylesheet" href="css/Star-color1.css" id="option_style">
</head>
If you wish to add/change the site's fonts, please take a look in the top of html
file of the website and replace this line And go _variables.scss to change variable $font-family-base
/* GOOGLE FONT */
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" rel="stylesheet">
/* CSS */
body {
font-family: 'Montserrat', sans-serif;
}
/* SCSS Variable */
$font-family-base: 'Montserrat', sans-serif
Font awesome (4.7) icons have been used in the Star Travel template. You can place Font Awesome icons just about anywhere very easily using a style prefix and the icon’s name. These icons automatically inherit CSS size and color. This means they blend in with text inline wherever you put them. Font Awesome tries not to be too opinionated, and sets just the basic styling rules icons need to render properly in context. You can learn more About the usage and styling from their official documentation.
Star Travel supports both Wide & Boxed Layout style.
This is the default option. No need to add extra class to the <body>
<body class="">
<body> and
layout style will be changed to boxed version.
<body class="boxed">
There are five different patterns available in Star Travel template with the classnames
"default", "pattern-01", "pattern-02", "pattern-03" & "pattern-04".
To use pattern background in the Boxed version, add any of the above classnames to the <body>
like this:
<body class="boxed pattern-01">
Star Travel has three different header styles. This part of documentation will guide you to customize and switch between each header styles.
Star Travel has Scroll up header as default. This header hides as you keep on scrolling down but appears again as soon as you start scrolling up.
This Header type will work when<body> containes the class up-scroll and <nav> element contains navbar-scrollUp
<body class="up-scroll">
<nav class="navbar-scrollUp navbar-sticky">
This header styles keeps the header fixed on top as you scroll down the page. To get Fixed header, you have to remove the class up-scroll from the <body>. Make sure navbar-sticky class is added in the <nav> element.
Static header option will make header disappear as you scroll down to the page. For static header you need to add static class in the <body> element
<body class="static">
RTL direction is available in Star Travel.
To use rtl direction set the dir='rtl' in <html> and replace assets/css/Star.css with css/Star.css with css/Star.rtl.css inside <head>.
<html dir="rtl">
<head>
<link rel="stylesheet" href="css/Star.rtl.css">
</head>
This part of the documentation will help you to customize preloader
Underneath the <body> tag you can find preloader mark-up. You can apply any custom styles of preloader as you want by customizing CSS in style.css. You can also use gif images.
Follow the steps below to apply preloader
Step-1: Add preloader markup.
<body id="body" class="">
<div id="preloader" class="smooth-loader-wrapper">
</div>
Step-2: Copy the following javascript code in custom.js
$(window).on('load', function () {
$('#preloader').fadeOut(500);
});
To use Slider Revolution locally add these scripts just before the closing </body> tag.
<script src="assets/plugins/revolution/js/extensions/revolution.extension.actions.min.js"></script>
<script src="assets/plugins/revolution/js/extensions/revolution.extension.carousel.min.js"></script>
<script src="assets/plugins/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
<script src="assets/plugins/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="assets/plugins/revolution/js/extensions/revolution.extension.migration.min.js"></script>
<script src="assets/plugins/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
<script src="assets/plugins/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
<script src="assets/plugins/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
<script src="assets/plugins/revolution/js/extensions/revolution.extension.video.min.js"></script>
To use the Maps JavaScript API you must have an API key. The API key is a unique identifier that is used to authenticate requests associated with your project for usage and billing purposes. To learn more about API keys please visit Get api key.
Go to Map Style and click CREATE A STYLE button. Select any theme and modify based on your requirement then click the FINISH button. Copy the JSON data and replace the value of var mapStyles in your map.js file in the js folder with the JSON you copied earlier.
var mapStyles = [];