Documentation

Emprise - Tour Travel HTML Template

Thank you so much for purchasing our item from themeforest.

Version: 1.1
Author: waituk

Created: 16 April, 2022
Update: 16 April, 2022

If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.

Getting started

Once you have downloaded the item from themeforest, unzip the emprise-ux-package.zip to find three main folders inside.

documentation Contains all documentation including this file
emprise-ux Contains all template files, styles, js and assets

Quick template view

Navigate to emprise-ux > html > index.html and double click it to open in your browser, and you will find the working template. I sincerely hope that that brings smile to you.

File Folder Structure

- html
  - assets - Contains images, fonts and asset files.
  - js - Javacript files
  - styles - CSS files
  - vendors – All external plugins.
  - html files - All html pages
As shown above, you will find all the files and folders properly organized as per the conventions.
You can make changes directly to any of the files and upload the contents of html folder to your server if you are working directly with HTML/CSS rather than using the frontend development framework/node.
Should you prefer working with SASS, you should only work in the src folder and leave the html untouched. Here is a breakdown of src folder contents:

src

assets

emprise-font-icons
images
svg
favicon.ico

js

frontend.js
navigation.js
others
main.js import file for all javascript

styles

abstract
base
components

accordion
autocomplete
avatar
badge
banner
...
all compinent folders

layouts
pages
main.scss import file for all scss
plugins.scss import third party scss

vendors- third party plugins
html files

HTML Structure

Emprise template follows a simple and easy to customize HTML structure based on popular BEM class naming convention.
The layout grid is based on Bootstrap Framework and nearly all the components are custom developed to acehive the unique look and feel. This makes this template highly. Additionally, the custom classes are prefixed with rlr- to avoid class name conflicts with other plugins and bootstrap.

If you need more information, please visit bootstrap site: https://getbootstrap.com

Customize Using Sass or Vanilla CSS

Sass files along with gulp settings are included with this template to make CSS customization super easy and interactive. Please read more about Sass here. Sass

Customize CSS with Sass

Using sass gives you ultimate control over editing the site template. You can switch color schemes, typography etc. site wide in seconds, often editing one line of code. To use this method, you should have node and gulp installed in your system and ensure that your local server is running.

If you already have it installed, follow the steps below:

Open emprise-ux folder in your IDE and/or terminal
Ensure you are inside the folder that has package.json and open terminal
npm install - Once this is complete, you will have a new folder in your theme folder called “node_modules”.
npm run dev - Your template will automatically open in your browser and you will be able to see your changes to template files live.
Custom CSS: To make it easier to make updates, you should create a new file in styles folder, e.g. custom.scss and then copy the code blocks from scss files here to make overrides. And you will need to call the custom.css in your HTML files after main.css for these changes to override the main.css

If you have any issues, here are the links to help with your environment:

Customize plain CSS

If you would like to edit the CSS directly, you will find all CSS in one single file css >> main.css

Go to html >> styles and create a custom.css file
Now, go to html >> styles >> main.css. The file is properly labelled with main css blocks. To go to individual section, just search for it alongwith the number, eg. 5.5 Badge will take you to section with badge rules. Copy the element you would like to customize and place it in your custom.css
To allow for even easier customization, the .map files are included so that you can use Chrome or Firefox browser inspector, and then find the corresponding line number matching the rule.
Now call the custom.css file in your HTML files just below the main.css call.

Now you will see your changes take effect in your template.

Color Schemes

Changing the entire color scheme of your site is a breeze, be it vanilla CSS or Sass. Additionally, we have included two ready made color variations if that takes your fancy. To use them, simply replace main.css with main-red.css or main-yellow.css in your html files.

Change color without Sass

Go to html > styles > main.scss
Search for 3.2 Settings and you will find full list of colors.
To quickly change the main colors, replace the value of --brand for brand color and under that, body and heading colors, to change the text colors for body and heading texts.

your color hsl, rgb or hex value
This will change the main brand color of the template.
Ideally, you should have 10 variations of brand color from light to dark and change them in this file. See screenshot below:
You can leave other colors as is since they are variations of grays and success, error and warning colors or change them as you please.
If you are copying it to your custom.css you should copy the entire :root block and make changes.
Now you should have your entire site pages reflect the chosen colors!

Change color with Sass

Navigate to src > styles > abstracts > _settings.scss and you can find the color scheme at the very top of this file, then follow the same steps as "Change color without Sass"

Prebuilt color schemes: We have included red and yellow colors with the theme, which you can see in the demo home page variations. If you want to use these, you can simply add body class rlr-body--red to html pages.

Typography

The template supports Google font family and you can add any other custom font as desired.

Change the font family

Get your chosen font from Google Fonts.
Place the @import rule (excluding style) in your custom.css file.
Apply the ruly below to change your entire font family rule.


/* Custom CSS */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600&display=swap");

body {
  font-family: "Roboto Mono", monospace;
}

Now, you can see the changes in your site.

Change heading and body typography colors.

Within the body tag above, you can add following 3 lines to change body, heading and neutral colors used in the site:


/* Custom CSS */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600&display=swap");

body {
  --heading-color: red;
  --body-color: pink;
  --neutral-color: yellow;

  font-family: "Roboto Mono", monospace;
}
}

If you are working with sass, ensure you compiler is running and then make changes to file and code as shown below in your custom.scss or overrite it here:

To change the body and headings color:

This changes the typography colors shown below, which you should leave as is for easier management and future upgrades.

Logo Settings

The Logo Container can be found in the - <header>

First, place your logo image inside the assets folder
Now in your html files, search for Header and Navigation block
Now, edit the href and src attributes to match your logo and URLS to point logo to.

As shown in screenshot above, 1 and 2 are for logos, and 3 is for the mobile nav toggler which is for mobile. 3 doesn't need to be changed unless you want different nav toggler for mobiles.

Favicon Settings

You can generate favicon using sites like Favicon IO

First, place your favicon.ico image inside the assets folder
Now in your html files, within the head tag, replace favicon.ico file name with your file name if you have called it by different name, else, it will work automatically.

As shown in screenshot above, 1 and 2 are for logos, and 3 is for the mobile nav toggler which is for mobile. 3 doesn't need to be changed unless you want different nav toggler for mobiles.

Layouts: Grid and Columns

The template utilizes Bootstrap 5 grid framework to easily position your components within 12 col grid system. This link will

You should place all your content in sections and containers etc.(depending on the context) as shown below:
To give another example, this is how the sidebar and the blog listings are laid out inside row consisting of two columns, one 4 col and another 8 col

Depending on the column and row you need for your layout, you can use .row and .col inside the container. Here, you will find detailed usage instructions of Bootstrap Columns that you can use anywhere inside sections of our template or create new layouts.
Beyond the default Bootstrap breakpoints we have added additional breakpoint to show the layout in 1600px width for Extra large monitors like 1920 and above. You can find and control these as shown below:

This makes the the container take max-width of 1600px when you resize browser to beyond 1680px.

CSS Structure

A properly organized sass structure divided into multiple folders for development while creating one single CSS file for production has been our top priority. Hence you will find every component in its own sass file for ease of customization. After making all the changes - just run "npm run build" for minified css output that you can upload directly. If you want to edit the css instead of sass, chose the template that you want to work with, and you will find it labelled with each block. Now you can easily jump to specific block by searching for, lest say, "5.10 Form control" in your code editor. At the very top of the css file, you will find the list of the blocks along with the numbers.

Similarly, for sass, you will find all form elements inside the aptly named folder style > components > forms > _form-control.scss

JavaScript Structure

The theme uses vanilla JS for all its components. The main js file is located inside js folder named main.js which calls all js modules used along with plugins.js which calls all plugins used in the template.

Just like with CSS, you will find all JS files for components inside the specific styles > components folder itself. For example, if you wanted to change the behaviour of popover, you would head to styles > components > popover > popover.js

We would also recommend creating custom.js to edit and add your JS changes and calling it below the main.js

We are using Vanilla JS and jquery is not required except for revolution slider pages in our template. If you wish to include jquery, you can and you will find local jquery inside vendors folder.

Carousel Settings

Go to components > carousel > carousel.js and here you can edit and control the carousel, autoplay, speed of carousel etc. We have used Splide JS for carousel and you can find multitude of options and examples on that link to further customize the slides and carousels.

Please remember to complile you JS with npm run dev and save.

Icons - Fonts and/or SVG

Go to components > icon-fonts > _icon-fonts.scss and you can add your icon fonts here.

We have used Flaticon with commercial license. Here is how to add your own icons from flaticons

Go to assets > emprise-font-icons and locate backup.txt
In your browser, go to Flaticon
Once logged in, upload the backup.txt file which will load all emprise icons
Now, find and add icons to this collections
Download all as font-icons
unzip and place the contents of this folder inside emprise-font-icons folder
Open flaticon.scss or flaticon.css file and copy the content of this file to components > icon-fonts > _icon-fonts.scss
Now, you can use any of the fonts by simply adding it as shown below:

where flaticon-menu is the name of the icon font.

Vesctor SVG icons

All custom vector icons are located inside assets >> svg folder and you can use it in code as shown below. You can add as many svg as you like to this folder and call it directly in your HMTL within span tag and/or CSS via svg file path.

Upgrading to New Release

If its the first time you have purchased and downloded this item, please ignore this section. BUT If you have previously downloaded the template and have made customization, you should have all your scss and/or css customizations in a separate file you have created. If not - please strictly follow the instructions below:

BACKUPPlease backup your files before making any changes - so that you have somewhere to look and compare if something goes wrong.
CSSPlease add a blank file called custom.css to styles folder. And then place all your customized code inside this file. After that, link this file in your htmls. Please remember to place this link after all other css links in header. Similarly, if you are working with scss, place all your scss in custom.scss and call it after the main.scss
JSSame way as with CSS - you should place all your js code in custom.js file and call this file after main.js
VendorsYou shold keep a backup and compare it with the new vendors folder of our release and add/replace as required.
HTMLHere, you should not overwrite your existing file - pleae copy the code block you want and replace it in your file.

Source & Credits

Support

If this documentation doesn't answer your questions, please send us Email via Item Support Page or post in our support forum at https://support.waituk.com/

We are located in GMT +5:45 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

Please don’t forget to Rate this template if you like it!

Please Add your Review (Opinion) for Our template. It would be a great support for us.
Go to your Themeforest Profile > Downloads Tab > & then You can Rate & Review for our template.
Thank You.