HTML Pixel - Documentation

Thank you for purchasing our template. This guide will help you install and customize the template easily.

Table of Contents

1. Installation
2. File Structure
3. Customization
4. Contact Form setting
5. Credits
6. Support

1. Installation

Unzip the downloaded package. You’ll find the following folders:

• form – PHP file to send email from contact form
• assets – CSS, JS, images, scss and webfonts
• documentation – This documentation file
• plugins – All plugins folder and files
• package.json – All needed package

Make sure you have already Node Js installed on you machine. Open cdm and go to unzip folder and then run command npm install.

2. File Structure

your-template/
│
├── theme-one-light.html
├── theme-one-dark.html
├── theme-two-bg-home.html
├── theme-two-light-home.html
├── assets/
│   ├── css/
│   ├── scss/
│   ├── webfonts/
│   ├── js/
│   └── images/
└── documentation/
    └── index.html

3. SCSS Customization

This template uses SCSS to manage styles and color themes in a modular and maintainable way.

4. Contact Form Setting

Open file from /form/contact.php and change htmlpixel3@gmail.com email id with your email id

Folder Structure

scss/
├── fontawesome/
├── theme-one-light/
│   └── light-theme.scss
├── theme-one-dark/
│   └── dark-theme.scss
├── theme-two-bg/
│   └── theme-two-bg.scss
├── theme-two-light/
│   └── theme-two-light.scss

How to Customize Colors

To change global colors like primary, secondary, background, or text colors, open the _variables.scss file:

// _variables.scss

$primary: #007bff;
$secondary: #6c757d;
$body-bg: #ffffff;
$body-color: #333333;

Update the color values to match your branding. After making changes, recompile the SCSS to generate the new style-light.css file.

Compiling SCSS

You can compile SCSS manually using:

sass scss/theme-one-light/light-theme.scss assets/css/style-light.css

How to Run SCSS Build & Watch Commands

For more efficient workflow, use the built-in NPM scripts:

✅ One-Time SCSS Build

npm run build-css:theme-one-light
npm run build-css:theme-one-dark
npm run build-css:theme-two-bg
npm run build-css:theme-two-light

🔁 Watch SCSS for Live Changes

Use these commands to automatically recompile SCSS on changes:

	npm run watch-css:theme-one-light
	npm run watch-css:theme-one-dark
	npm run watch-css:theme-two-bg
	npm run watch-css:theme-two-light

💡 Tip:

• Make sure you have Node.js installed.
• Run npm install once before using the scripts to install dependencies.

Important Notes

• Don’t edit the compiled style-light.css, style-dark.css, theme-two-bg.css, theme-two-light.css directly.
• Make changes only in SCSS files and recompile.

Changing Logo

Replace the logo-light.svg and logo-dark.svg file in assets/images/.

Editing Navigation Menu

Open theme-one-light.html and look for the <nav> section.

5. Credits

Images and libraries used in this template:

• Bootstrap – https://getbootstrap.com
• Google Fonts – https://fonts.google.com
• Unsplash (images) - Unsplash
• Owl Carousel - https://owlcarousel2.github.io/OwlCarousel2/ (MIT License)
• jQuery Validate - https://jqueryvalidation.org/ (MIT License)
• Font Awesome icons - Font Awesome icons
• Video placeholder - https://www.videoplaceholder.com/

📌 Image Licensing Note

Demo images used from Unsplash are for **preview purposes only** and are not included in the final download package.

Images and videos used in Demo pages are demo purpose only and not included in the downloadable file. All images are replaced with placeholders. This is an HTML5 Template and NOT a WordPress Theme.

All rights for images belong to their respective authors. You can download the same images directly from unsplash.com.

6. Support

If you have any questions, feel free to contact us: htmlpixel3@gmail.com