Documentation

DomainX - Domain for Sale Html Template

Thank you for purchasing DomainX - Domain for Sale Html Template on ThemeForest.

Version: 1.2
Created by: Harnish Design

If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.

Installation

Follow the steps below to setup your site template:

Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
Below is the folder structure and needs to be uploaded to your website or localhost root directory:
- HTML/css - Stylesheet files
- HTML/images - Image files
- HTML/js - Javacript files
- HTML/php - PHP file for Contact form
- HTML/sass - Sass files
- HTML/vendor – All external libs.
You should upload all or specific HTML files as per your need.
You're now good to go..!

HTML Structure

DomainX follows a simple and easy to customize coding structure. Here is the sample for your reference:
The template is based on Bootstrap Framework

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Your Stylesheets, Scripts & Title
============================================= -->
</head>
<body>

<!-- Preloader -->
<div class="preloader">
  ....
</div>
<!-- Preloader End --> 

<!-- Document Wrapper
=============================== -->
<div id="main-wrapper">
  <div class="container">
    .......
  </div>
</div>
<!-- Document Wrapper End --> 

<!-- Script --> 
</body>
</html>

If you need more information, please visit bootstrap site: https://getbootstrap.com/docs/4.5/layout/grid/

Changing Fonts

DomainX template use fonts: Poppins from the Google Fonts Library. You can change the fonts from page head in HTML files (as following code).

<!-- Web Fonts
============================================= -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900' type='text/css'>

then change fonts name in stylesheet.css file. You have generated & use css/stylesheet.css

If you want to use self hosted fonts other than Google fonts then here is an example of Self Hosted Fonts.

Icons

Font Awesome icon sets are used in this template.

<i class="fas fa-mobile-alt"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-credit-card"></i>
<i class="fas fa-phone"></i>
......

NotePlease go to their official documentation pages for a full list of icons: Font Awesome

Sass

We have added SASS .scss files in template. If you know how to use SASS you can change sass files and compile the css as well. You can find sass file here - HTML/sass

Open the sass/_variables.scss and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder. It is completely at your discretion only to include the Required .scss Files you need to minimize the amount of CSS & including only the Styles of the Blocks you need. This can be setup in your stylesheet.scss File.

Color Schemes

You can change your Website's Color Scheme in an instant. We have build 8 Color css file for change template primary color.

color-cyan.css - Cyan Color
color-green.css - Green Color
color-orange.css - Orange Color
color-indigo.css - Indigo Color
color-purple.css - Purple Color
color-red.css - Red Color
color-teal.css - Teal Color
color-yellow.css - Yellow Color

Simply add Color CSS file link it in the Document <head>.
Make sure you add the css/color-blue.css stylesheet in your head after the css/stylesheet.css file linking from above mentioned color css file.

For Example:

<head>
<!-- Stylesheet
============================================= -->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

<!-- Here goes your Colors Css -->
<link rel="stylesheet" type="text/css" href="css/color-orange.css" />
</head>

Theme Customization

We have include a Custom CSS File in the css Folder so that you can better handle your Customizations for New Styles or Overwriting Default Theme Styles. Simply add all your Custom CSS Codes in the css/custom.css File and link it in the Document <head> after the css/stylesheet.css Linking. Also make sure that this is the Last Linked CSS File in the Document <head> so that your Custom CSS Styles are Overwritten properly.

<!-- Stylesheet
============================================= -->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

<!-- Here goes your custom.css
============================================= -->
<link rel="stylesheet" type="text/css" href="css/custom.css" />

Helper Classes

We have created some really useful helper classes for you. Here are a few of them. also, You can refer other default bootstrap helper classes here: Bootstrap Documentation

.text-0 - Changes the Font size to 11px.
.text-1 - Changes the Font size to 12px.
.text-2 - Changes the Font size to 14px.
.text-3 - Changes the Font size to 16px.
.text-4 - Changes the Font size to 18px.
.text-5 - Changes the Font size to 21px.
.text-6 - Changes the Font size to 24px.
.text-7 - Changes the Font size to 28px.
.text-8 - Changes the Font size to 32px.
.text-9 - Changes the Font size to 36px.
.text-10 - Changes the Font size to 40px.
.text-11 - Changes the Font size to 44px.
.text-12 - Changes the Font size to 48px.
.text-13 - Changes the Font size to 52px.
.text-14 - Changes the Font size to 56px.
.text-15 - Changes the Font size to 60px.
.text-16 - Changes the Font size to 64px.
.text-17 - Changes the Font size to 72px.
.text-18 - Changes the Font size to 80px.
.text-19 - Changes the Font size to 84px.
.text-20 - Changes the Font size to 92px.

Font Weight:

.font-weight-100 - For font weight of 100.
.font-weight-200 - For font weight of 200.
.font-weight-300 - For font weight of 300.
.font-weight-400 - For font weight of 400.
.font-weight-500 - For font weight of 500.
.font-weight-600 - For font weight of 600.
.font-weight-700 - For font weight of 700.
.font-weight-800 - For font weight of 800.
.font-weight-900 - For font weight of 900.

Background Color:

.bg-transparent - For background color of transparent
.bg-light - For background color of light gray
.bg-light-1 - For background color of more light gray
.bg-light-2 - For background color of more light gray
.bg-light-3 - For background color of more light gray
.bg-light-4 - For background color of more light gray
.bg-dark - For background color of dark
.bg-dark-1 - For background color of dark gray
.bg-dark-2 - For background color of more dark gray
.bg-dark-3 - For background color of more dark gray
.bg-dark-4 - For background color of more dark gray

Box Shadow

.shadow-none - For No shadow to elements with box-shadow utilities.
.shadow-sm - For Small shadow to elements with box-shadow utilities.
.shadow - For Regular shadow to elements with box-shadow utilities.
.shadow-md - For medium light shadows to elements with box-shadow utilities.
.shadow-lg - For Larger shadows to elements with box-shadow utilities.

Opacity

.opacity-1 - For 10% opacity.
.opacity-2 - For 20% opacity.
.opacity-3 - For 30% opacity.
.opacity-4 - For 40% opacity.
.opacity-5 - For 50% opacity.
.opacity-6 - For 60% opacity.
.opacity-7 - For 70% opacity.
.opacity-8 - For 80% opacity.
.opacity-9 - For 90% opacity.

Border Radius

.rounded-top-0 - No Border Radius for top.
.rounded-bottom-0 - No Border Radius for bottom.
.rounded-left-0 - No Border Radius for left.
.rounded-right-0 - No Border Radius for right.

Borders, Sizing, Spacing (margin & padding) and also much more....

NoteYou can refer for use other default bootstrap helper classes here - https://getbootstrap.com/docs/4.5/utilities/

Contact Form

Contact us form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.

Open the php/mail.php File to make the following changes:

Receiving Form Responses

Add your Email Address to receive Email Responses by using the following code below:

/*--------------------------------------------
	// Receiver's Email
---------------------------------------------*/

$toEmail = "your-email@website.com"; // Replace Your Email Address

Sender/Company Email to send Emails

Add a Sender Email by using the following code below:

/*--------------------------------------------
	// Sender's Email
---------------------------------------------*/

$fromEmail = "no-reply@website.com";  // Replace Company's Email Address (preferably currently used Domain Name)
$fromName = "Company Name"; // Replace Company Name

NoteSome Web Hosting services enforce you to use the same Domain Name in your Email Address as your Hosting Account, to prevent SPAM. So make sure that @website.com above is same as your Domain’s Hosting Account.

Add Your Domain Name

Find the following code in the php/mail.php File and Replace YourSite.com with your Domain Name:

Using SMTP (Optional)

Some Hosting Servers disable the use of PHP mail() Function to prevent SPAM. So you can use the SMTP Functionality to Send Emails. Simply add the following code after the $mail = new PHPMailer(true); Line of Code:

$mail->isSMTP();
$mail->SMTPDebug = 0;
$mail->Host = 'mail.yourdomain.com';
$mail->SMTPAuth = true;
$mail->Username = "yourname@yourdomain.com";
$mail->Password = "yourpassword";
$mail->SMTPSecure = 'tls';
$mail->Port = 587;

Google reCaptcha

if you want to use Google reCaptcha for Contact Form Protection. then follow below details.

To setup reCaptcha Form Protection, you will need to obtain a Set of Site/Secret Keys from the Google reCaptcha Website. Then follow the Steps below to Setup the Keys for your Form:

Google reCaptcha v2

Add the following code to your Form and replace YOUR-RECAPTCHA-SITE-KEY-HERE with your reCaptcha site key:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div id="recaptcha-v2" data-sitekey="YOUR-RECAPTCHA-SITE-KEY-HERE" class="g-recaptcha" ></div>

Like the image below:

Find the following code in the php/mail.php File and add your Secret Key:

/* --------------------------------------------
  // reCaptcha Secret
  --------------------------------------------- */

// Add this only if you want to use Google reCaptcha with your Contact Forms.
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY'; // Your Google reCaptcha Secret

Google reCaptcha v3

Add the script of Google Recaptcha v3 on footer of document and replace YOUR-RECAPTCHA-SITE-KEY-HERE with your reCaptcha site key.
```
<script id="google-recaptcha-v3" src="https://www.google.com/recaptcha/api.js?render=YOUR-RECAPTCHA-SITE-KEY-HERE"></script>
```
Like the image below:

Find the following code in the php/mail.php File and add your Secret Key:

/* --------------------------------------------
  // reCaptcha Secret
  --------------------------------------------- */

// Add this only if you want to use Google reCaptcha with your Contact Forms.
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY'; // Your Google reCaptcha Secret

Source & Credits

Fonts:

Google Fonts - https://fonts.google.com/
Icons Font-face - https://fontawesome.com/

Scripts:

jQuery - http://www.jquery.com/
Bootstrap 4 - http://getbootstrap.com/
PHPMailer - https://github.com/PHPMailer/PHPMailer

Support

If this documentation doesn't answer your questions, So, Please send us Email via Item Support Page

We are located in GMT +5:30 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

Don’t forget to Rate this template

Please Add your Review (Opinion) for Our template. It would be a great support for us.
Go to your Themeforest Profile > Downloads Tab > & then You can Rate & Review for our template.
Thank You.

Changelog

For Future Updates Follow Us @themeforest / @facebook / @twitter / @Dribbble

The best way is to use a compare tool for update template, like this one: http://kdiff3.sourceforge.net/ – and use it to compare the folders (your current website and the new version). Updating HTML templates requires manual work.

v1.2

Added Google reCaptcha v2 and v3 for Contact form.
Updated Contact form updated with PHPMailer.
Updated Documentation Information with New Docs Design

v1.1

Fixed Fix Some minor php Mail Issue.
Updated Improvement in Documentation

v1.0

Initial Release