🛠️Website Customization Guide

This guide will help you understand how to customize your website's design, content, and layout. It includes how to change colors, headers, footers, images, and homepage content section-by-section.

🎨 1. Global Website Color

File to edit: assets/js/js.js

What to change:

  • Look for javascript variables let colorAllWeb = "#----" color values like #ff5733, #ffffff, etc.

  • Modify primary colors, background, text, and button colors here.

let colorAllWeb = "#ff5733"; // Change this to your desired color 

document.documentElement.style.setProperty('--primary-change-color', colorAllWeb);
document.documentElement.style.setProperty('--primary-change-light-color', colorAllWeb + 21);

🧩 2. Logo Customization

Files to edit:

  • header.html – controls the website's top navigation

  • footer.html – controls the bottom section

Change logo in letter

  • Need change logo use letter.

  • header.html in use step 1.

  •    <a class="navbar-brand" href="index.html">
            <!-- step 1 : use letter format -->
            Invoice <br><small>Generator</small>
            <!-- step 2 : use image -->
            <!-- <img src="logo image part" alt="image"  /> -->
    </a>

  • footer.html in use step 1.

  •  <!-- step 1 : use letter format -->
      <h5 class="footer-invoice-invoice" onclick="window.location.href='invoice.html'" >Invoice </h5>
      <p class="footer-invoice-generator" onclick="window.location.href='invoice.html'" >Generator</p>
 <!-- step 2 : use image -->
      <!-- <img src="logo image part" alt="image"  /> -->

Change logo in Image

  • Need change logo use image.

  • header.html in use step 2.

  •    <a class="navbar-brand" href="index.html">
            <!-- step 1 : use letter format -->
            <!-- Invoice <br><small>Generator</small> -->
            <!-- step 2 : use image -->
            <img src="logo image part" alt="image"  /> 
    </a>

  • footer.html in use step 2.

  •  <!-- step 1 : use letter format -->
      <!-- <h5 class="footer-invoice-invoice" onclick="window.location.href='invoice.html'" >Invoice </h5> -->
      <!-- <p class="footer-invoice-generator" onclick="window.location.href='invoice.html'" >Generator</p> -->
 <!-- step 2 : use image -->
      <img src="logo image part" alt="image"  />

🔝 3.Header Customization

File: header.html Sections:

  • Heading Banner (Top notice)

  • Navigation Menu

✅ 1. Top Heading Banner

<p class="heading-p">Unlimited apps and integrations | explore connections →</p>

To Customize:

  • Update banner text as per your brand messaging.

  • To remove the banner, delete or comment out the entire <div class="Heading">...</div> block.

Close Button Icon:

  • Located at: assets/image/heading/heading-Close.svg

  • You can replace the image with your own close icon.

✅ 2. Brand Name or Logo

<a class="navbar-brand" href="index.html">
    Invoice <br><small>Generator</small>
    <!-- OR use logo image -->
    <!-- <img src="logo image part" alt="image" /> -->
</a>

To Customize:

  • Option 1: Keep letter-based branding. Modify the text.

  • Option 2: Replace with a logo by uncommenting the <img> tag and updating the src.

✅ 3. Navigation Menu Links

Each menu item is defined as a <li class="nav-item">.

<a class="nav-link" href="invoice.html">Invoice Generator</a>

To Customize:

  • Change link text or destination URL.

  • Add or remove menu items as needed.

  • To reorder, just rearrange the <li> elements.

✅ 4. Dropdown Menus

There are three dropdowns: Documents, History, Business Tools.

Each is controlled using this pattern:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" ...>Documents</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="invoice.html">Invoice Generator</a></li>
    ...
  </ul>
</li>

To Customize:

  • Add/remove items in the <ul class="dropdown-menu">.

  • Update labels and destination files accordingly.

✅ 5. Night Mode Toggle

<input type="checkbox" id="nightModeToggle" ... />

This enables light/dark mode. You can style it via CSS or remove it if not needed.

✅ 6. Google Translate Widget

<div id="google_translate_element"></div>

To disable language translation, simply delete this line.

🖼 4. Section 8 (Homepage Highlight)

File: index.html Section: Section 8

✅ 1. Section Background

<div class="row sec-8" style="background-image: url('assets/image/section 8/black-bg.svg');">

To Customize:

  • Replace the image file or URL to set a new background.

  • You can also change background color directly with CSS.

✅ 2. Section Content

<h2 class="sec-8-h2">Generate unlimited invoices & PDF download</h2>
<p class="sec-8-p">The intuitive all-in-one solution...</p>
<button onclick="window.location.href='invoice.html'" class="btn sec-8-btn">Create Free Invoice Now</button>

To Customize:

  • Edit heading text <h2>, paragraph <p>, and button text/link as per your product description.

  • Button link should go to your main invoice generator or CTA page.

🔻 5. Footer Customization

File: footer.html Sections:

  • Branding section

  • Product, Support, Resources, Company columns

✅ 1. Branding Area

<h5 class="footer-invoice-invoice">Invoice</h5>
<p class="footer-invoice-generator">Generator</p>

To Customize:

  • Replace the text or use an image logo by enabling this:

<!-- <img src="logo image part" alt="image" /> -->

Branding Tagline:

<p class="footer-invoice-p">Streamline inventory management and order fulfillment.</p>

Update as per your tagline or business pitch.

✅ 2. Footer Link Sections

Each column includes a title and list:

<h5 class="footer-invoice-title-h5">Support</h5>
<ul class="list-unstyled">
    <li class="footer-li">Help center</li>
    ...
</ul>

To Customize:

  • Replace the titles: "Product", "Support", etc.

  • Add/remove links under each list as needed.

  • These are static text, but can be turned into <a href="#">...</a> if needed.

🔝 Back to Top Button

<button id="backToTop">
    <i class="fas fa-chevron-up"></i>
</button>

To Customize:

  • Icon uses FontAwesome.

  • Style the button via CSS or remove it by deleting this block.

📁 Files & Folders You Might Edit

Purpose
File/Folder

Header layout & links

header.html

Footer content

footer.html

Section 8 / Home sections

index.html

Images used

assets/image/...

Styles

assets/css/style.css

JavaScript

assets/js/...

📌 Developer Tips

  • Use a code editor like VS Code for easier file navigation and editing.

  • Keep backups of original files before making big changes.

  • Clear browser cache to see updates when editing CSS or images.

  • Mobile responsive? Test your changes on small screen sizes.

PreviousDirectory StructureNextHome Page Customization

Last updated