Get 45% OFF on any of our products, Limited Time Offer. Ending Soon!

Docbase – Knowledgebase & Documentation HTML Template

Introduction #

First of all, Thank you so much for purchasing this template and for being my loyal customer. You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn the basics here, here, and here.

  • Item Name : Docbase – Knowledgebase & Documentation HTML Template
  • Item Version : V 1.0.0
  • Author : Egens Lab
  • License : Un License

Docbase is an html template about various types of knowledge and documentation. This template can be used for different types of purposes. It can be a very useful template for any kind of knowledge base campaign or various types of documentation presentations. Any type of entrepreneur can use this template for their forum. This template is powered by Bootstrap5 with SAAS files and completely SEO optimized with clean codes. It has also W3 validation markup. The design of this template is very unique and easy to customize that’s why for any kind of knowledge campaign this template surely helps a lot.

Features #

  • 2 Unique Home Pages Pages
  • Multi-Purpose Design
  • Build with Bootstrap v5 and SCSS
  • Unlimited variant image
  • Modern & Clean Design
  • Sticky Header
  • Smooth Scroll
  • Google Fonts
  • Bootstarp Icons
  • W3C Validated
  • Clean & Professional Code
  • PageSpeed Optimized
  • Fully Responsive
  • Easy to customize
  • SEO Friendly
  • Free Update
  • Cross Browser Support
  • A/B Grade GTMatrix and Google Page Speed
  • Easy Documented
  • No console error

HTML Structure #

<!-- BEGIN: service-area -->
<div class="service-area mt-90">
   <div class="container">
      <div class="text-contain">
         <h3>Are You Ready To Enjoy? Get This Perfect Theme Now!</h3>
         <p>It is a long established fact that a reader will be distracted</p>
         <div class="button-contain">
            <button>Start Trial Free</button>
         </div>
      </div>
   </div>
</section>

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following :

.text-contain h3 { color: #some_color; }

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.

.service-area .text-contain h3 { color: #some_color; }

So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.

CSS Files and Structure #

This theme imports many Css files:

  • boxicons.min.css
  • bootstrap-icons.css
  • owl.carousel.min.css
  • slick.css
  • magnific-popup.css
  • nice-select.css
  • bootstrap.min.css
  • animate.css
  • style.css
  • responsive.css

I’m using two CSS files in this theme. The first one is a Style file. Many browsers interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work around this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for the page. The file is separated into sections using :

/*=========================== 1. Global CSS ============================*/
 
   some code
 
/*=========================== 2.Bootstrap CSS ============================*/
 
   some code
 
/*=========================== 3.Top Bar CSS ============================*/
 
   some code, etc.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

JavaScript #

This theme imports many Javascript files and TypeScript Files:

  • jquery-3.6.0.min.js
  • bootstrap.bundle.min.js
  • owl.carousel.min.js
  • slick.min.js
  • jquery.nice-select.js
  • jquery.magnific-popup.min.js
  • jquery.mixitup.min.js
  • wow.min.js
  • main.js
  • jqueryis a Javascript library that greatly reduces the amount of code that you must write.
  • javaScriptMost of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.
// ==== Loading Page ==== //
$(window).on('load', function () {
   'use strict';
   $('body .loading-screen').fadeOut(1000);
   $('html').css('overflow-y', 'visible');
}); // This function is used to hide the loading section
  • Bootstrapis a free and open-source front-end framework (library) for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional.
  • Popperis a positioning engine, its purpose is to calculate the position of an element to make it possible to position it near a given reference element. The engine is completely modular and most of its features are implemented as modifiers (similar to middlewares or plugins).

Sources and Credits #

I’ve used the following images, icons, or other files as listed :

1. Images #

2. CSS Files #

3. JavaScript Files #

4. Fonts #

Template Customization #

Once again, thank you so much for purchasing this theme. As I said at the beginning, I’d be glad to help you if you have any questions relating to this theme. No guarantees, but I’ll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the “Item Discussion” section.

Login to your account