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.
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.
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
You can open and edit the files by Sublime Text or Notepad++ or any other code editors.
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>
If you want to add a favicon, then use the following line in the "head" section:
<link href="website/images/favicon.ico" rel="icon">
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>
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.
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]">
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>
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>
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.
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.
Bootstrap “fixed-top” class allows fixed top navigation bar.
<nav class="fixed-top"> </nav>
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]; }
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.
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.
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.
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.
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.