Version: 2.0 | Dated: 15 Feb 2021

ThisOne - Documentation

introduction

Before setting up the theme, it is imperative to realize it's capabilities, scope and potential usage.

While developing this theme our main focus was to make it user friendly and easy to use for non-technical users requiring their less input or otherwise minimal expertise.

This theme is 100% (highly) customizable, each block is portable and can be moved to another page hence producing a new design/layout.

Also by simply adding classes in code, user can get variations in styles.

We have optimized the code for load speed and extensively used CSS for effects etc.

The code is 100% bug free and follows W3C standards.

We have used latest tools for development e.g., HTML5/CSS3, BootStrap that will give you powerful and innovative experience for your projects. The theme is fully responsive and retina ready, compatible with all browsers and mobile-devices.

It has passed highest standards of Quality Assurance, giving you freedom and enjoyment of a well-managed, error free code that you can use in any project.

ThisOne is a multipupose Template that has following feature

Home & Inner Pages
  • 25+ Home Pages
  • 25+ Sliders
  • 03 About Us Section
  • 03 Services Section
  • 04 Blog Section
  • 01 Portfolio Section
  • 01 Contact Us
Some Extra Feature
  • 15+ Revolution Slider Headers

Setting up ThisOne - Theme

Follow these guide lines below to get started with your Site:

  1. Open the ThisOne - /HTML 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/index.html - Index File/Homepage
    • HTML/assets/css - Required css files
    • HTML/process.php - Required PHP file
    • HTML/assets/lib/revolution - Revolution Slider
    • HTML/assets/imgs - Required images files
    • HTML/assets/js - Required Javacripts files
    • HTML/assets/lib/fontawesome - Required fonts files
    • The other files can be used according to your requirement.
  4. After adding all these folder on server you're now good to go..! just add your Content and you will have awesome Template.

HTML Structure

We have Developed ThisOne - with a simple coding structure. here is the sample:

<!doctype html>
<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

	<title>Hello, world!</title>
	</head>
	<body>
	<h1>Hello, world!</h1>

	<!-- Optional JavaScript; choose one of the two! -->

	<!-- Option 1: Bootstrap Bundle with Popper -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

	<!-- Option 2: Separate Popper and Bootstrap JS -->
	<!--
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
	-->
	</body>
</html>/code>

Changing Fonts

Changing Fonts in ThisOne - is very easy. By default, ThisOne - uses Karla & Lato from the Google Fonts Library.

1- Add this code to your website, "css/all-stylesheets.css" file.

<Font Poppins >
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

2- Integrate the fonts into your CSS:

font-family: 'Poppins', sans-serif;

Main Navigation

You can start using the Menu. Try using the Following code:

	<nav id="navigation" class="navbar navbar-expand-lg navbar-light fixed-top bg-light">
    <div class="container-fluid">
        <a class="navbar-brand white-logo" href="#"><img src="assets/imgs/logo-white.png" class="img-fluid" alt=""></a>
        <a class="navbar-brand black-logo" href="#"><img src="assets/imgs/logo.png" class="img-fluid" alt=""></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="nav navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#home">Home </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about" >About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#portfolio">Portfolio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#team">team</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#pricing">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#blog">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
            <span class="ps-3 d-none d-lg-block">
            <a href="https://themeforest.net/item/this-one-one-page-responsive-website-template/7236268?ref=alia" class="btn btn-primary" target="_blank">BUY NOW</a>
            </span>
        </div>
    </div>
</nav>

Page Titles

ThisOne - has following base HTML structure for page title.

Images classes, inner-banner-style, banner-img-01 

<div class="inner-banner-style banner-img-01" id="top">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="info text-center">
					<h6 class="shuffletext">/ Standard Blog</h6>
					<h2>
						We Move The Digital<br class="d-none d-md-block" />
						Industry Forward
					</h2>
				</div>
			</div>
		</div>
	</div>
</div>

Columns & Grid

Bootstrap Grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-2
.col-md-6
.col-md-6
.col-md-1
.col-md-11
.col-md-2
.col-md-10
.col-md-3
.col-md-9
.col-md-4
.col-md-8
.col-md-5
.col-md-7

Slider Types & their Options

ThisOne - includes 2 Unique Sliders & Pre-Built Slider Templates for you to be used on any Page with 10s of Options. The List of all the Sliders included are mentioned as follows:

  • Revolution Slider
  • Owl Slider


Revolution Slider

You can find the Revolution Slider related Documentation here.

Read Revolution Slider Docs



Blog Setup

ThisOne - Blog Post. Use the Code Sample below:

Blog post

<div class="col-12 col-md-6">
    <div class="blog-post pb-md-2">
        <div class="pic pb-4">
            <img src="assets/imgs/blog/1.jpg" class="img-fluid" alt="" />
        </div>
        <h4><a href="#">/TECHNOLOGY</a></h4>
        <h2><a href="single-blog-post-left-sidebar.html">3 Four-Star Resorts Bolster Costa Rica’s Luxury Reputation</a></h2>
        <p>
            Cepteur sint occaecat cupidatat proident, taken possession
            of my entire soul, like these sweet mornings of
            springCepteur sint occaecat cupidt proident, taken
            possession of my entire soul ...
        </p>
        <ul class="meta">
            <li>
                <a href=""><i class="las la-user-alt"></i> John</a>
            </li>
            <li>
                <a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
            </li>
            <li>
                <a href=""><i class="lar la-comment"></i> 3</a>
            </li>
            <li>
                <a href=""><i class="lar la-eye"></i> 5.5K</a>
            </li>
        </ul>
    </div>
</div>

Portfolio Setup


ThisOne - provides a very elegant way to showcase your work.


Setting up Portfolio Item:

Following block of code is for all categories All, webdesign, branding & Videos, you can remove any category by removing its class.


<figure class="item webdesign">
    <div class="picture">
        <img src="assets/imgs/portfolio/dev-3.jpg" alt=""/>                       
        <!-- Picture Overlay Starts -->													
        <div class="text-overlay">
            <div class="category">webdesign</div>
            <h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/dev-3.jpg" title="Product Name">Product Name</a></h1>
        </div>
        <div class="icon-overlay">
            <div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/dev-3.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
        </div>
        <!-- Picture Overlay Ends -->
    </div>
</figure>

Toggles & Accordions

You can use Tabs, Toggles & Accordions in Various Styles and with Different Options to display Below the Fold content.

Accordion

Use this code to display accordion:

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Accordion Item #1
        </button>
      </h2>
      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Accordion Item #2
        </button>
      </h2>
      <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingThree">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Accordion Item #3
        </button>
      </h2>
      <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
        </div>
      </div>
    </div>
  </div>

Note: Make sure you add unique IDs for each Tab Container and Tab Items.

Lightbox

Setting up Lightboxes:

Adding a .lightbox class to any Link or Button will turn it into a Lightbox Element. You can use different Types of Lightbox with an Easy Setup:

Single Image:
<a class="image-popup-vertical-fit" href="http://dummyimage.com/480x330" title="Pellentesque habitant morbi"></a>
Images Gallery
<ul class="popup-gallery">
	<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
	<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
	<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
	<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
	<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
	<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
	<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
	<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
	<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
</ul>
Videos:
<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto"><i class="las la-expand-arrows-alt"></i></a>
<<a class="popup-vimeo" href="https://vimeo.com/45830194"><i class="las la-expand-arrows-alt"></i></a>

Note: It is recommended that you use only this Format http://www.youtube.com/watch?v=kuceVNBTJio for Youtube Videos.

Google Maps

You can add Embedded Google Maps iframe to any Page using the following setup:

Add a section which will contain your Google Map:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25215.625657884106!2d144.956637!3d-37.81456500000001!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4e793770d3%3A0x9e44d6ad0d76ba7c!2s121+King+St%2C+Melbourne+VIC+3000%2C+Australia!5e0!3m2!1sen!2sus!4v1435061406583" height="400" allowfullscreen><iframe>

Contact AJAX Form Setup

Update email address. Please open “process.php” update your email address in line#2.
$adminemail = "youremailhere@googlemail.com";

Release V2.0

Released on 15 Feb 2021

Initial Release V1.0

Released on 27 Mar 2014