Getting Started

Thank you for purchasing MyBiz theme!

Before you get started, please be sure to always check out this documentation. MyBiz HTML version provides a full set of pages to start your booking business. If you want more than presentation pages and you need actual booking functionality, then you will have to implement it using a programming language. If you are unable to find your answer here in our documentation, we encourage you to perform a Search for your answer.

It is most probable that your question or issue have been already asked and the answer is waiting to be found. If you are unable to find an answer then you can always post a new ticke. Please be sure to include your site URL as well. Thank you, we hope you will enjoy using MyBiz!

Installation

Follow the steps below to get started with your Site Template:

Open the downloaded main files package .zip and extract it.
In the HTML Folder you will find all the Templates Files
Choose a demo from HTML folder. Upload these files to your Web Server using FTP in order to use it on your Website.
Make sure you upload the required files/folders listed below:
- all the .html files
- /assets folder - contains required CSS & Javascript files
  - HTML/images - Images Folder
  - HTML/js - Javacripts Folder
- All good now. You can start adding your Content and customize it for your own needs.

What's Included

When you purchase our theme from Themeforest, you need to download the theme files from your Themeforest account. Navigate to your downloads tab on Themeforest and find MyBiz. Click the download button to see the two options. The All Files and documentation contains everything, the License certificate & purchase code contains your purchase code and license certificate.

Below is a full list of everything that is included when you download the main files, along with a brief description of each item.

Documentation - Theme documentation
HTML - here you will find all the files and full demos as seen on our site. Here are the HTML pages, CSS, LESS and Javascript assets

Right now we provide 5 demos, each one has it's own set of assets l ike Less, Css, Images and Javascript and you will find them under the HTML folder:

myBNB
myBoat
MyCar
MyHotel
MyTent

HTML Structure


<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
	<!-- Standard Meta - Your Stylesheets, Scripts & Title -->
	...
</head>
<body>
	<!-- The Main Wrapper -->
	<div id="page-wrapper">

		<!-- Header -->
		<header class="header-section">
			...
		</header>

		<!-- Site Content -->
		<div class="ui layout">

			<div class="ui grid container">
				...
			</div>

		</div>

		<!-- Footer -->
		<footer id="footer">
				...
		</footer>

	</div>

</body>
</html>
</div>

Compiling LESS Files to CSS

For the ease of changing theme styling we have added the LESS files, that when compiled will result the actual CSS files loaded by the browser

Step 1:

Change the CSS links in your <head> tag from .css to .less:

<link rel="stylesheet" href="assets/less/theme.css" type="text/css" />

Like this:

<link rel="stylesheet/less" href="assets/less/theme.less" type="text/less" />

Step 2:
Add this line with LESS Script just after the js/plugins.js Script Linking in your <head> Tag:
```
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>
```
Step 3:
Open assets/less/variables.less file and edit the general styling values according to your needs.
Each module has its own set of variables and it is found under assets/less/components and it can be edited also to change module settings.
If you need more advanced customizations then you can edit the module less files yourself from the less folder.

It is advised to only to include the Required LESS Files you need to minimize the amount of CSS & including only the modules you need. This can be setup in your theme.less file.

Changing Fonts

In our theme we are using Google Fonts. You can see all available fonts here.
To change a font, just browse and select a different font family you like. For example myBNB demo uses 'Lato' as the main font and 'Antic Slab' and the secondary font.

You can easily change the used fonts on your site by editing assets/less/variables.less.
Here you need to change @fontName and @secondFontName variables with the font family from Google Fonts.

Vector Icons

MyBiz uses IcoMoon for Vector icons.
To see the icons that are included, follow the next steps:
1. Go to the main package downloaded from Themeforest.
2. Go to Assets/Fonts folder and open demo.html

To extend the fonts you can put your own icomoon files and replace "style.css" and "fonts" folder found inside the assets/icon folder.

Loading custom vector icons

You can import additional font icons like this:
1. Go to https://icomoon.io/app/
2. Click on 'Import Icons' on the top left.

3. Go to Main package downloaded from Themeforest - Assets/Icomoon Fonts and select selection.json
4. Select yes to the prompt.
5. Now you will see the icons added in the theme and you can select additional icons.
6. When you are done just press "Generate Font" button from the right bottom.
7. Now the font package it's generated and ready for download, just click Download from right bottom.
8. Extract the archive pack inside the theme in assets/icons to replace existing style.css and fonts folder
9. That is all.

Optimization

A great website also needs to be fast and not just beautiful. Here we will share some techniques to speed up your site.

gZip Compression & Browser Caching

This is a very Important Technique you should implement in order to optimize up your Website Loading Speed.

gZip Compression is used to compress files that are delivered to your browser when it is loading the site. Files can be from HTML, Images, Videos, CSS, Javascript, Font Files to other miscellaneous text files.

Browser Caching it is used to save the Static Data in your Browser so that when you open the the site again, the content does not get downloaded again, making the Website load faster.