StreamLab - User Documentation

General Information

  1. Theme Version: 1.0.0
  2. Created: 25 Jun 2020
  3. Latest update: 25 Jun 2020

Thank you for choosing our theme. We hope you enjoy building your project with us. It is a powerhouse of great features and powerful functionalities that would take months to develop. The theme is fully responsive and be rest assured your project looks absolutely stunning on any types of screens.

Theme Installation

Follow the steps below to get started with your Site Template:
  1. Open ... /Template/html/frontend/ Folder to find all the Templates Files
  2. You'll have to upload these file using a FTP on your server
  3. Make sure you maintain the structure while uploading the required files/folders:
    • HTML/css - Stylesheets Folder
    • HTML/fonts - Fonts Folder
    • HTML/images - Images Folder
    • HTML/js - Javacripts Folder
    • HTML/index.html - Index File/Homepage
    Other files can be used according to your convenience.
  4. Now that you have followed these steps your basic installation is complete and ready to flaunt your site to the world.

Basic template Structure

The template has a responsive layout and is based on the Bootstrap V4 Framework . Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Click Here to know more about Bootstrap.


HTML Structure

The general HTML structure is the same throughout the template. Here is the general HTML structure of the template: 


<!DOCTYPE html>

<html lang="en">

<head>

[Page meta, page css, page title etc...]

</head>

<body>


<!--header -->

<header id="gen-header" class="gen-header-default">

[MENU CONTENT]

</header>

<!--header -->

<!--Section 1 -->

<section>

[SECTION 1 CONTENT]

</section>

<!--Section 1 -->

<!--Section 2 -->

<section>

[SECTION 2 CONTENT]

</section>

<!--Section 2 -->


<!--footer -->

<footer id="gen-footer">

[FOOTER_CONTENT]

</footer>

<!--footer -->

[PAGE JAVASCRIPTS HERE]

</body>

</html>

CSS Structure

The general CSS structure is the same throughout the template. Here is the general CSS structure of the template: 

<!-- CSS bootstrap-->
<link rel="stylesheet" href="css/bootstrap.min.css" />

<!--  Style -->
<link rel="stylesheet" href="css/style.css" />

<!--  Responsive -->
<link rel="stylesheet" href="css/responsive.css" />

Javascript Structure

The general CSS structure is the same throughout the template. Here is the general Javascript structure of the template: 

<!-- js-min -->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/asyncloader.min.js"></script>
<!-- JS bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- owl-carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- counter-js -->
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<!-- popper-js -->
<script src="js/popper.min.js"></script>
<script src="js/swiper-bundle.min.js"></script>
<!-- Iscotop -->
<script src="js/isotope.pkgd.min.js"></script>

<script src="js/slick.min.js"></script>

<script src="js/streamlab-core.js"></script>

<script src="js/script.js"></script>

Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.

You can add a Favicon to your Website using the following code: 

<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico" />

Page Loading Transitions

Page Loading Transitions are enabled by default. If you wish to disable the page loading transitions you can simply delete the below section. 

<!--=========== Loader =============-->
<div id="gen-loading">
   <div id="gen-loading-center">
      <img src="images/logo-1.png" alt="loading">
   </div>
</div>
<!--=========== Loader =============-->

Logo Settings

Page Loading Transitions are enabled by default. If you wish to disable the page loading transitions you can simply delete the below section. 

 <!--=============== Navbar-brand ==================-->
 <a class="navbar-brand" href="#">
   <img class="img-fluid logo" src="images/logo-1.png" alt="streamlab-image">
</a>
<!--=============== Navbar-brand  ==================-->

Changing Fonts style

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in top of the HTML in all HTML file. See example below: 

<link href='https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap'/>

In order to change the fonts, you will need to edit the above links with your custom font, You can easily use Google Web Font Services if you plan to use a Google Font or remove it completely. If you plan to use a self hosted font, here is an Example of using Self Hosted Fonts

Helper Classes

We have created some really useful helper classes for you. These classes help you to quick position elements without writing new CSS rules. These classes are generic helper classes predefined in the CSS pages, here is quick view what they can do


Section title

You can use this code for your page section title to maintain title style. 

<div class="gen-section-title-1 text-center">
  <h5 class="gen-section-title">StreamLab Best Features </h5>
  <p>It is a long established fact that a reader Lorem Ipsum is simply dummy will page when looking be
     distracted by the readable content of a page when looking at its layout.</p>
</div>

Text color

You can use color in the Text. simply add .text-white ( or any color you want) class where you want to use. See example below: 

<div class="gen-section-title-1 gen-section-title-1-color-white text-center">
    <h5 class="gen-section-title text-white">Stream Your site</h5>
    <p class="gen-section-description text-white">Lorem Ipsum is simply dummy will page when looking be
    distracted by the readable content of a page when looking at its layout. </p>
</div>

Background Image

You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below: 

<div class="gen-movie-img">
   <img src="images/background/asset-5.jpeg" alt="owl-carousel-video-image">
</div>

Text align

You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:

Class Description
.text-left which means text-align: left;
.text-center which means text-align: center;
.text-right which means text-align: right;

Shortcode

You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:

  • Buttons
  • carousel movies style 1
  • carousel movies style 2
  • carousel movies style 3
  • Progress Bar
  • Team
  • Testimonials

Button

You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below:

Class Code Description Result
.gen-button 
<a href="single-movie.html" class="gen-button">
   <i aria-hidden="true" class="fas fa-play"></i><span class="text">PlayNow</span>
</a>
Button Theme
Play Now
.gen-button .gen-button-flat 
<a href="single-movie.html" class="gen-button gen-button-flat">
   <i aria-hidden="true" class="fas fa-play"></i> <span class="text">PlayNow</span>
</a>
Button Flat
Play Now

Browser Support

ITsolve supports all major Browsers like Google Chrome, Mozilla Firefox, Mac Safari, Opera, Internet Explorer 10 and above.