Documentation

  • Introduction
  • Software Requirements
  • Unzip the Theme
  • Installation
  • Files Structure
  • How to Edit HTML, CSS and JS Files
  • How to Edit Texts
  • How to Add a Favicon
  • How to Edit Logos
  • How to Edit Images
  • How to Edit SVGs
  • How to Edit Videos
  • How to Edit Links
  • How to Edit PSD Files
  • Contact Form
  • Fixed Top Navbar
  • Google Fonts
  • Font Awesome
  • Owl Carousel
  • Parallax
  • Counter Up
  • Support

Introduction

Thanks a ton for purchasing the theme.

This theme is a landing page based on Bootstrap4, HTML5, CSS3 and jQuery. It looks good on any device, like mobile, tablet and laptop. Fabtheme is simple, modern, clean and ready-to-use landing page template. It is well documented, easily customizable and time saving. It also has sliders and smooth animation effects. Responsiveness, Cross-Browser Compatibility and Mobile Friendliness are the core features of it. It is suitable for all types of agency Landing Page, startup landing page and more.

Software Requirements

  • WinZip(For Windows) or StuffitExpander(For MAC) or any other unzipping software
  • Sublime Text or Notepad++ or any other code editors
  • Adobe Photoshop(If you want to edit the theme with Photoshop)
  • Internet Connection for all the icons, placeholder images, videos, css and js CDN files

Unzip the Theme

You have to unzip the "Purchased ZIP File" first.

You can do it by using WinZip(For Windows), StuffitExpander(For MAC) or any other unzipping software.

Installation

  • Go to cPanel.
  • File Manager > Open > Click "public_html" folder
  • Delete all the Sample Files from that folder.
  • Upload > Select File > [Choose Purchased ZIP File]
  • Purchased ZIP file should be in "public_html" folder now.
  • Extract it and then the installation will be done.

Files Structure

  • documentation

    • documentation.html

  • screenshots

    • all the screenshots of this Theme

  • sources

    • psd (All the PSD files)

    • favicon

  • website

    • bat (contact.php)

    • credits (credits.html)

    • css (main_style.css)

    • images (All the Images)

    • js (script.js)

    • videos (All the Videos)

  • colourNames.txt

  • fontsInfo.txt

  • index.html

  • readme.txt

How to Edit HTML, CSS and JS Files

You can open and edit the files by Sublime Text or Notepad++ or any other code editors.

How to Edit Texts

You can edit any text in code editor by just replacing them with your own text.

For example:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

If you want to replace them with "This is sample text", then the code will be as follows:

<p>This is sample text</p>

How to Add a Favicon

If you want to add a favicon, then use the following line in the "head" section:

<link href="website/images/favicon.ico" rel="icon">

How to Edit Logos

If the logo is an image, then use the following line in the "nav" section under the "navbar-brand" class:

<img src="website/images/logo.jpg" alt="logo">

If the logo is simply text, then use the following line:

<a class="navbar-brand" href="index.html">FABTHEME</a>

How to Edit Images

To use an image in your website, you must include "img" tag as follows:

<img src="website/images/image-1.jpg">

You can change it as follows:

<img src="website/images/[CHANGE-IMAGE-HERE]">

Here, "website/images" is the path where you have kept all the images. If you change the name of the path, then it must be changed in all the needed place also.

For example: You have a image path named "user/site/img". Then, the image path should be as follows:

<img src="user/site/img/image-1.jpg">

The path rule is the same for SVGs and Videos also.

How to Edit SVGs

To use a svg in your website, you must include "img" tag as follows:

<img src="website/images/svg-1.svg">

You can change it as follows:

<img src="website/images/[CHANGE-SVG-HERE]">

How to Edit Videos

To use a video in your website, you must include "video" tag as follows:

<video>
	<source src="website/videos/video.mp4">
</video>

You can change it as follows:

<video>
	<source src="website/videos/[CHANGE-VIDEO-HERE]">
</video>

How to Edit Links

To use a link in your website, you must include "a" tag as follows:

<a href="index.html">fabtheme</a>

You can change it as follows:

<a href="[CHANGE-LINK-HERE]">[CHANGE-LINK-NAME-HERE]</a>

How to Edit PSD Files

PSD files are divided into layers which means if you want to change any part of the theme, you can change it easily. All the layers are named properly, like "header" section starts with "Header", "about" section starts with "About", and so on.

Contact Form

To use form in your website, you must include a "form" tag as follows:

<form method="post" action="website/bat/contact.php">
</form>

Open your php file and locate the line:

$mail_to = 'example@gmail.com';

Replace this sample Email Address("example@gmail.com") with your original Email Address and it will be done.

Fixed Top Navbar

Bootstrap “fixed-top” class allows fixed top navigation bar.

<nav class="fixed-top">
</nav>

Google Fonts

Open your html file and locate this line:

<link href="https://fonts.googleapis.com/css?family=Varela+Round&display=
swap">

You can change font by changing the font name as follows.

<link href="https://fonts.googleapis.com/css?family=[CHANGE-FONT-NAME-HERE]&display=swap">

Open css file and locate this line:

#fabtheme-body{
    font-family: 'Varela Round', sans-serif;
}

Change it as follows:

#fabtheme-body{
    font-family: '[CHANGE-FONT-NAME-HERE]', [CHANGE-FONT-FAMILY-HERE];
}

Font Awesome

To use Font Awesome icons in your website, you have to choose a icon related to your topic first and then copy the code that they would give and paste it in your code. For example, I chose a "star icon" on the topic "rating". Then, I copied and pasted the code as follows:

<i class="far fa-star"></i>

You will get all the social icons there also.

Owl Carousel

In order to implement owl carousel, you have to select an html element first and then apply it to an html class named "owl-carousel" as follows.

<div class="fabtheme-owl-1 owl-carousel">
</div>

"owl-carousel" class is a must for owl carousel sliders. Here, "fabtheme-owl-1" is also a class name and is used to differentiate from other owl carousel sliders.

$(".fabtheme-owl-1").owlCarousel({
	[CHANGE-ANIMATING-SLIDES-HERE]
});

If you change the class name(without "owl-carousel" class) in html file, you must change it to the js file as well, otherwise it will have no effect.

Parallax

In order to implement parallax effect to an image, you have to select an html element first and then apply it to an html class as follows.

<header class="fabtheme-parallax-1">
</header>

Here, "header" is an html element and "fabtheme-parallax-1" is an html class name.

Open css file and locate this line:

.fabtheme-parallax-1{
    background-image: url("../images/home.jpg");
}

Change it as follows:

.fabtheme-parallax-1{
    background-image: url("../images/CHANGE-PARALLAX-IMAGE-HERE");
}

If you change the class name in html file, you must change it to the css file as well, otherwise it will have no effect.

Counter Up

In order to implement Counter Up, you have to insert the class name "fabtheme-counter-up" in desired element you want to show it as follows.

<h2 class="fabtheme-counter-up">300</h2>

You can edit the animation of count in js file.

$('.fabtheme-counter-up').counterUp({
	[CHANGE-ANIMATING-COUNT-HERE];
});

If you change the class name(without "fabtheme-counter-up" class) in html file, you must change it to the js file as well, otherwise it will have no effect.

Support

The theme will be updated and there will be newer versions coming soon which will add extra features to it.

Any type of questions about the theme will be answered as soon as possible.

If you need any help, please feel free to contact me via my profile.

FABTHEME © 2020.