Calmind's Documentation

This documentation will help you understand, customize, and integrate the Calmind HTML Template efficiently.

Getting Started

Edit HTML Files

You can edit all .html files using any text editor or IDE. We recommend lightweight and efficient code editors for a smoother workflow:

HTML Structure

This template is built using the Bootstrap 5 framework, ensuring a fully responsive and mobile-friendly layout. The basic HTML structure is organized into three main parts: Header, Main Content, and Footer.

  • Header: Contains the navigation menu, logo and top bar.
  • Main: The core content area of each page, placed inside the <main> tag.
  • Footer: Includes contact info, copyright, and social media links.
<header>
    <!-- Navigation, Logo, and Top Bar -->
</header>

<main>
   <section id="about">
       <div class="container">
           <div class="row">
               <div class="col-md-4">
                   Content Block 1
               </div>

               <div class="col-md-8">
                   Content Block 2
               </div>
           </div>
       </div>
   </section>
</main>

<footer>
    <!-- Footer Links and Copyright -->
</footer>
Create Columns

This template uses the Bootstrap 5 responsive 12-column grid system. Each .row can contain multiple columns, and the total width of all columns in a row should add up to 12. 

<div class="row">
    <div class="col-md-6">Half width (6/12)</div>
    <div class="col-md-6">Half width (6/12)</div>
</div>

<div class="row">
    <div class="col-md-4">One-third width (4/12)</div>
    <div class="col-md-8">Two-thirds width (8/12)</div>
</div>

You can also use responsive classes like .col-sm-*, .col-md-*, .col-lg-*, and .col-xl-* to control layout on different screen sizes.

Tip: For more detailed examples and advanced layout options, please refer to the official Bootstrap 5 Grid Documentation.

Enable RTL (Right-to-Left)

To support languages like Arabic or Hebrew, enable RTL mode by modifying the designesia.js configuration file: 

var enableRtl = 'on'; // on = enable RTL, off = disable

Note: Ensure your text direction in HTML also uses dir="rtl" when RTL mode is on.

Enable/Disable Preloader

To show or hide the preloader animation before your page loads, change the preloader variable in designesia.js: 

var preloader = 'on'; // on = enable, off = disable

Tip: Turn off preloader during development for faster testing.

Styling & Customization

Change Accent Color

The template includes several pre-made color schemes that control the overall accent color (such as buttons, icons, etc). You can easily change the accent color by editing the linked stylesheet in the <head> section of your HTML file — usually around line 20. 

<link id="colors" href="css/colors/scheme-01.css" rel="stylesheet" type="text/css">

Simply replace scheme-01.css with any of the other available color files. All color options are located inside the css/colors/ folder.

Tip: You can also create your own color scheme by duplicating an existing scheme-xx.css file, renaming it, and modifying the color variables inside.

Custom Background Color for Div/Section

You can easily apply a background color to any <div> or <section> without editing the CSS file. Simply use the data-bgcolor attribute and assign your preferred color value. 

<div data-bgcolor="#333333">
    Content here
</div>

The data-bgcolor attribute accepts any valid color format:

  • HEX: #ff0000
  • RGB: rgb(255, 0, 0)
  • RGBA: rgba(255, 0, 0, 0.8)
Custom Background Image for Div/Section

You can set a background image for any <div> or <section> using the data-bgimage attribute — no CSS editing required. 

<div data-bgimage="url(images/background/bg-1.jpg)">
    Content here
</div>

The data-bgimage attribute automatically applies the specified image as the element’s background. Make sure the image path is correct relative to your HTML file.

Parallax Background Image

The template uses the Jarallax library to create smooth parallax scrolling effects. Parallax allows background images to move at a slower speed than the page content, adding depth and a modern visual experience.

To add a parallax background image, wrap your section with the .jarallax class and include an <img> tag with the .jarallax-img class inside. 

<section data-speed="0.2" class="jarallax">
    <img class="jarallax-img" src="images/bg.jpg" alt="">
    <div class="container">
        <h2>Your Content Here</h2>
        <p>Add text, images, or buttons above the parallax background.</p>
    </div>
</section>
  • data-speed – Controls the parallax movement speed (range: 0.1 to 1.0). Lower values = slower movement (more subtle effect).
  • images/bg.jpg – Path to your background image file.

Tip: Use large, high-quality background images (min. 1920×1080) for best results.

Parallax Background Video

Jarallax also supports video backgrounds from YouTube, Vimeo, or local MP4 files. This feature is great for hero sections or landing pages that need dynamic visuals.

To use a video background, simply include the data-video-src attribute inside your .jarallax container: 

<div class="jarallax" data-jarallax data-video-src="https://www.youtube.com/watch?v=ab0TSkLe-E0">
    <div class="container text-center text-light">
        <h2>Stunning Parallax Video</h2>
        <p>Overlay your content directly above the video background.</p>
    </div>
</div>
  • data-video-src – Accepts YouTube, Vimeo, or local video URLs (e.g. mp4:videos/bg.mp4).
  • data-jarallax – Initializes the video parallax effect.
  • .jarallax – Main container that applies the parallax logic.

Typography Customization

Change Font Family

The template uses Google Fonts. You can change the font by editing the font import at the top of style.css or by updating the CSS variable. 

/* Example: change font to "Poppins" */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --body-font: "Poppins", Helvetica, Arial, sans-serif;
    --heading-font: "Poppins", Helvetica, Arial, sans-serif;
}

Tip: Always include fallback fonts (e.g., Helvetica, Arial) for better browser compatibility.

Adjust Font Weight

Font weights define how bold or light the text appears. You can adjust them by editing the following CSS variables: 

:root {
    --body-font-weight: 400;
    --heading-font-weight: 600;
}

Common weight values: 300 (light), 400 (normal), 500 (medium), 600 (semi-bold), 700 (bold).

Change Font Color

You can easily update the default text and heading colors by modifying these variables: 

:root {
    --body-font-color: #888888;
    --heading-font-color: #181D24;
}

Tip: Use --body-font-color-bg-dark and --heading-font-color-bg-dark for text displayed on dark backgrounds.

Change Font Size

Each text level has its own variable for font size. Update the size values as needed: 

:root {
    --body-font-size: 17px;
    --h1-font-size: 60px;
    --h2-font-size: 48px;
    --h3-font-size: 26px;
}

Note: Adjusting --body-font-size affects all paragraph text sitewide.

Letter Spacing

Letter spacing controls the space between characters. Edit these variables to adjust the spacing for headings or text: 

:root {
    --h1-letter-spacing: -0.02em;
    --h2-letter-spacing: -0.02em;
    --h3-letter-spacing: 0;
}

Use small values (e.g., 0.05em or -0.02em) for subtle effects.

Line Height

Line height defines the vertical spacing between lines of text. Adjust these variables to improve readability or text compactness: 

:root {
    --h1-line-height: 1.15em;
    --h2-line-height: 1.2em;
    --h3-line-height: 1.5em;
}

For body text, use a value between 1.5em and 1.8em for optimal legibility.

Bottom Margin

The bottom margin controls the space below headings. Adjust these values for tighter or looser layout spacing: 

:root {
    --h1-margin-bottom: 20px;
    --h2-margin-bottom: 25px;
    --h3-margin-bottom: 10px;
}

Tip: Keep consistent spacing across heading levels for a clean visual rhythm.

Animations & Effects

Animate Objects on Scroll

The template integrates WOW.js and Animate.css to easily trigger animations when elements enter the viewport while scrolling. 

<h1 class="wow fadeIn" data-wow-delay=".2s" data-wow-duration=".5s">
    Animate Text
</h1>
  • Add the .wow class to any element you want to animate.
  • The fadeIn class defines the animation type. You can explore more animation options from Animate.css.
  • Use data-wow-delay to set how long to wait before the animation starts (e.g., .2s).
  • Use data-wow-duration to control how long the animation lasts (e.g., .5s).

Forms

Change Contact Form Recipient's Email

Open file contact.php then change value for $to

$to = 'email@your-domain.com';
Change Contact Email Subject

Open file contact.php then change value for $subject

$subject = 'New Contact Message';
Change Booking Form Recipient Email

To change where booking form submissions are sent, open the booking.php file and update the recipient email address: 

$to = 'email@your-domain.com';

Replace email@your-domain.com with your actual email address. Ensure it uses a valid domain (for example, join@yourwebsite.com).

Tip: After updating, test your form to ensure emails are delivered properly. If you experience delivery issues, consider using SMTP email configuration for reliability.

Change Booking Email Subject

To customize the subject line of join form emails, open the booking.php file and edit the following line: 

$subject = 'New Visit Request';

The subject appears in the email header you receive when a user submits the form.

Need More Help?

If you can’t find the answer you’re looking for, feel free to reach out to us directly through the item page.

We also welcome your suggestions, feedback, and feature requests. Your input helps us make the product even better.