Labortech User Guide

On behalf of ThemeHt team, we would like to thank you for purchasing this item. Your support encourages us to build better items and continuously bring value to our products. This documentation file covers all the information needed to install and use this Template. You'll find everything you need to know to create a stunning and beautiful website in minutes.

Labortech Introduction

This documentation will give you an understanding of how Labortech template is structured and guide you in performing common functions.

If you want to customize, please contact us here: themeht23@gmail.com

Author: ThemeHt

Installation

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

  1. Open the ... /Template Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  3. Make sure you upload the required files/folders listed below:
    • html/css - Stylesheets Folder
    • html/fonts - Fonts Folder
    • html/images - Images Folder
    • html/js - Javacripts Folder
    • html/php - php Folder
    • html/index.html - (and All HTML files)
    The other files can be used according to your preferences.
  4. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Basic template Structure

The template has a responsive layout and is based on the Bootstrap V5 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>
<!-- page wrapper -->
<div class="page-wrapper">
<!-- preloader -->
<div id="ht-preloader"> [LOADER CONTENT] </div>
<!--preloader -->
<!--header -->
<header id="site-header" class="header">
<div id="header-wrap">
[MENU CONTENT]
</div>
</header>
<!--header -->
<!-- page content -->
<div class="page-content">
<!--Section 1 -->
<section>
[SECTION 1 CONTENT]
</section>
<!--Section 1 -->
<!--Section 2 -->
<section>
[SECTION 2 CONTENT]
</section>
<!--Section 2 -->
</div>
<!-- page content -->
<!--footer -->
<footer class="footer">
[FOOTER_CONTENT]
</footer>
<!--footer -->
</div>
<!-- page wrapper -->
[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: 

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

<!--== fonts -->
<link href="https://fonts.googleapis.com/css2?family=Livvic:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 

<!--== animate -->
<link href="css/animate.css" rel="stylesheet" type="text/css" />

<!--== line-awesome -->
<link href="css/line-awesome.min.css" rel="stylesheet" type="text/css" />

<!--== magnific-popup -->
<link href="css/magnific-popup.css" rel="stylesheet" type="text/css" />

<!--== owl.carousel -->
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css" />

<!--== lightslider -->
<link href="css/lightslider.min.css" rel="stylesheet" type="text/css" />

<!--== base -->
<link href="css/base.css" rel="stylesheet" type="text/css" />

<!--== shortcodes -->
<link href="css/shortcodes.css" rel="stylesheet" type="text/css" />

<!--== spacing -->
<link href="css/spacing.css" rel="stylesheet" type="text/css" />

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


Javascript Structure

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

<!-- theme  -->
<script src="js/theme.js"></script>

<!-- theme-plugin -->
<script src="js/theme-plugin.js"></script>

<!-- theme-script -->
<script src="js/theme-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: 

<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. 

<div id="ht-preloader">
  <div class="clear-loader d-flex align-items-center justify-content-center">
    <div class="loader">
     <span class="plus"></span>
    <span class="plus"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    </div>
  </div>
</div>

Logo Settings

The Logo Container can be found in the Header Container - Replace "logo-white.png" with your own logo image URL. 

<a class="navbar-brand logo" href="index.html">
  <img id="logo-img" class="img-fluid" src="images/logo.png" alt="">
</a>

Note Default height of logo is 50px. you can set height according to your logo type and your requirement.

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: 

<!-- Livvic font -->
<link href="https://fonts.googleapis.com/css2?family=Livvic:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet"> 

<!-- Barlow font -->
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

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="section-title">
  <h2 class="title">We Employ Latest Research Technology & Company</h2> 
  <p class="mb-0">We’re here to care for you and your entire family doctor will general health! Our doctors include highly qualified male and female practitioners who come from a range of backgrounds and bring a diversity of skills.</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="text-white">  
[YOUR TEXT CONTENT]
</div>

Note We include 6 color helper class in our template text-theme, text-hover, text-white, text-black, text-grey and text-rgba . you can add unlimited color class according to your needs.

Background color

You can use color in the background. simply add .theme-bg (or any color you want) class where you want to use. See example below: 

<div class="light-bg">  
[YOUR CONTENT]
</div>

Note We include 5 background color helper class in our template theme-bg, white-bg, dark-bg and light-bg You can add unlimited background color class according to your needs

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 style="background:url(Path); ">    
[YOUR CONTENT]
</div>

<div data-bg-image="Path" >    
[YOUR CONTENT]
</div>

Parallax

You can use an Parallax background. simply add .parallaxie class where you want to use. you can create your own Parallax. See example below: 

<div class="parallaxie">    
[YOUR CONTENT]
</div>

Text align

You can add this helper class to any element in your HTML code to set text-align

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

Sliders

  • Owl carousel
  • Light Slider

Owl carousel

This excellent carousel slider can be controlled using HTML5 data attributes.

Find the full online owl carousel Slider documentation .

light Slider

This excellent carousel slider can be controlled using HTML5 data attributes.

Find the full online light Slider documentation .

Shortcode

  • Blog Post
  • Counter
  • Featured Box
  • Price Table
  • Progress Bar
  • Team
  • Testimonials

Blog Post

Use the below code to display Post style: 

<!-- Blog Card -->
<div class="card post-card border-0 rounded-0 shadow-sm bg-transparent">
  <img class="card-img-top" src="images/blog/01.jpg" alt="Image">
  <div class="card-body px-4 pb-4 pt-0">
    <div class="mt-n3">
      <div class="d-inline-block white-bg px-2 py-1 text-black box-shadow">20 February</div>
    </div>
    <h2 class="h4 my-3">Equipping Researchers in the Developing World
      </h2>
    <ul class="list-inline mb-0 border-top border-bottom border-light py-2 mb-4">
      <li class="list-inline-item"> <a href="#" class="text-black"><i class="lar la-user-circle me-1"></i> Admin</a>
      </li>
      <li class="list-inline-item"> <a href="#" class="text-black"><i class="las la-eye me-1"></i> 275</a>
      </li>
      <li class="list-inline-item"> <a href="#" class="text-black"><i class="lar la-comments me-1"></i> 300</a>
      </li>
    </ul>
    <div class="d-flex justify-content-between align-items-center">
      <div><a class="px-3 py-2 light-bg text-black" href="#">Equipment</a>  <a class="px-3 py-2 light-bg text-black" href="#">Sass</a>
      </div> <a class="link-btn" href="blog-single.html"><i class="las la-long-arrow-alt-right"></i></a>
    </div>
  </div>
</div>
<!-- End Blog Card -->

Counter

Use the below code to display Counter style: 

<div class="counter d-flex">
  <div class="counter-icon me-3"> <i class="flaticon-medical-laboratory-1"></i>
  </div>
  <div class="counter-desc"> <span class="count-number text-black" data-to="24" data-speed="2000">24</span>
    <h6>Our Equipments</h6>
  </div>
</div>

Note You Want Other Style Of Counter, Please Go In HTML Folder And Check shortcode-counter.html Page

Feature Box

Use the below code to display Feature Box style: 

<div class="featured-item style-1">
  <div class="featured-icon"> <i class="flaticon-laboratory-1"></i>
  </div>
  <div class="featured-title">
    <h5>High-End Latest Technology</h5>
  </div>
  <div class="featured-desc">
    <p>Our firm is expert to create an efficient user interface that.</p>
  </div>
</div>

Note You Want Other Style Of Feature Box, Please Go In HTML Folder And Check shortcode-feature.html Page

Price table

Use the below code to display Price table style: 

<div class="price-table text-center dark-bg text-white" data-bg-img="images/pattern/02.png">
  <div class="price-title">
    <h3 class="text-white">Basic</h3>
  </div>
  <div class="price-value my-4">
    <h2 class="text-white">$33 <span class="text-light">/ month</span></h2> 
  </div>
  <div class="price-list">
    <ul class="list-unstyled">
      <li><i class="las la-check"></i> Free Equipment Use</li>
      <li><i class="las la-check"></i> Doctor Treatment</li>
      <li><i class="las la-check"></i> Medical Specialties</li>
      <li><i class="las la-check"></i> Care Solutions</li>
      <li><i class="las la-check"></i> 24/7 Customer Support</li>
    </ul>
  </div>
  <a class="btn btn-theme mt-5" href="#"> <span>Select Plan</span>
  </a>
</div>

Note You Want Other Style Of Price table, Please Go In HTML Folder And Check shortcode-pricing.html Page

Progress bar

Use the below code to display Progress bar style: 

<div class="ht-progress-bar mb-4">
  <h4>Environmental Testing</h4>
  <div class="progress" data-value="85">
    <div class="progress-bar">
      <div class="progress-parcent"><span>85</span>%</div>
    </div>
  </div>
</div>

Note You Want Other Style Of Progress bar, Please Go In HTML Folder And Check shortcode-progress-bar.html Page

Team

Use the below code to display Team:. 

<div class="team-member">
  <div class="team-images">
    <img class="img-fluid" src="images/team/01.jpg" alt="">
  </div>
  <div class="team-description">
    <h5><a href="team-single.html">Dr.Shiran Reni</a></h5>
    <span>Pathology Special</span> 
  </div>
  <ul class="team-social-icon list-inline">
    <li><a href="#"><i class="lab la-facebook-f"></i></a>
    </li>
    <li><a href="#"><i class="lab la-twitter"></i></a>
    </li>
    <li><a href="#"><i class="lab la-pinterest-p"></i></a>
    </li>
    <li><a href="#"><i class="lab la-linkedin-in"></i></a>
    </li>
  </ul>
</div>

Testimonial

Use the below code to display Testimonial:. 

<div class="owl-carousel no-pb" data-dots="false" data-items="1" data-autoplay="true" data-autoplay-timeout="8000">
  <div class="item">
    <div class="testimonial text-center">
      <div class="testimonial-img mb-2">
        <img class="img-fluid rounded-circle shadow-sm d-inline-block" src="images/testimonial/01.jpg" alt="">
      </div>
      <div class="testimonial-content">
        <div class="testimonial-caption mb-3">
          <h5 class="text-white">Andrew Rooney</h5>
          <label class="fst-italic d-block text-light">-Supervisor</label>
        </div>
        <p class="fst-italic text-light">[YOUR DESCRIPTION]</p>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="testimonial text-center">
      <div class="testimonial-img mb-2">
        <img class="img-fluid rounded-circle shadow-sm d-inline-block" src="images/testimonial/02.jpg" alt="">
      </div>
      <div class="testimonial-content">
        <div class="testimonial-caption mb-3">
          <h5 class="text-white">Andrew Rooney</h5>
          <label class="fst-italic d-block text-light">-Supervisor</label>
        </div>
        <p class="fst-italic text-light">[YOUR DESCRIPTION]</p>
      </div>
    </div>
  </div>
</div>

Note You Want Other Style Of Testimonial, Please Go In HTML Folder And Check shortcode-testimonial.html Page

Browser Support

Labortech supports all major Browsers like Google Chrome, Mozilla Firefox, Mac Safari, Opera, Microsoft Edge and above.

How to rate this item

If you like our theme and support, Please do not forget to rate it with 5 stars in your Downloads section and write a review in Comments as it will add more value to our services!

Kindly visit here: http://themeforest.net/downloads and find "Rate this item" below the download button and rate out the theme.

Advance Thanks in Anticipation!

Change Log

VERSION 2.0

- Update : Bootstrap 5.2.0 To Bootstrap 5.3.1
- Update : Jquery 3.6.1 To Jquery 3.7.0
- Update : coming-soon.html
- Update : theme.js
- Update : RTL File
- Update : Sass File

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.


Images



Scripts



CSS & Fonts



Note For questions on basic HTML, Javascript or CSS editing - please give your question a quick Google or visit W3Schools as template issues get top priority. You will need some knowledge of HTML/CSS to edit the template.