6 Ways to Customise a Canvas HTML Template Without Coding
Most people assume customising a professional HTML template requires a developer on speed dial — but with the right approach, you can reshape the Canvas HTML Template to match your brand without writing a single line of complex code.
1. Change Your Brand Colour in One Place
Canvas stores its primary colour as a CSS custom property, which means you can update your entire site’s accent colour by editing a single value. Open your style.css file (or add an inline <style> block inside your page’s <head>) and override the variable:
:root {
--cnvs-themecolor: #e63946;
--cnvs-themecolor-rgb: 230, 57, 70;
}Every button, link highlight, icon, and UI accent that references –cnvs-themecolor will immediately reflect that change. You do not need to hunt through individual component styles. The –cnvs-themecolor-rgb variable is used wherever Canvas needs a colour with opacity, so always update both together. This single edit typically covers 80–90% of what clients call a “rebrand” on a Canvas project.
2. Swap Fonts Without Touching Font Files
Canvas uses two CSS variables to control typography across the entire template: –cnvs-primary-font for body text and –cnvs-secondary-font for headings. To switch to a Google Font, load it in the <head> of your HTML, then override the variables:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&family=Lora:wght@600;700&display=swap" rel="stylesheet">
<style>
:root {
--cnvs-primary-font: 'Plus Jakarta Sans', sans-serif;
--cnvs-secondary-font: 'Lora', serif;
}
</style>Because Canvas is built on Bootstrap 5 and applies these variables consistently, the font change cascades through headings, paragraphs, navigation labels, and form fields automatically. For a SaaS or tech product site, this typographic shift alone can elevate a generic-looking template into something that feels purpose-built — a principle covered in more depth in the post on SaaS website design for B2B homepages.
3. Control Logo Size Using Canvas Variables
A common mistake is targeting #logo img with a custom width rule, which breaks on sticky headers and mobile viewports. Canvas provides dedicated variables for this:
:root {
--cnvs-logo-height: 48px;
--cnvs-logo-height-sticky: 36px;
}–cnvs-logo-height controls the logo in the standard header state. –cnvs-logo-height-sticky controls it once the sticky header kicks in on scroll. Using these variables ensures your logo scales correctly across all header states without any JavaScript overrides or media query duplication. Simply drop your logo image into the designated logo container in the Canvas markup and let the variables do the sizing work.
4. Rearrange and Remove Sections by Editing HTML Order
Canvas layouts are built as stacked, self-contained sections. Each section is an independent HTML block — typically a <section> or <div> with Canvas-specific classes. To reorder your page, you can cut and paste entire section blocks without breaking styles or scripts, because each block carries its own class-based styling.
For example, to move a testimonials section above a pricing section, you simply swap the two blocks in the HTML. There is no CSS grid dependency to rewire or JavaScript initialisation order to worry about. If you want to remove a section entirely, delete the block. Canvas does not have inter-section JavaScript dependencies that would cause errors.
If you are building a landing page and need guidance on which sections to include and in what order, the post on 10 Canvas HTML Template sections every landing page needs is a practical reference.
5. Adjust Spacing and Layout With Bootstrap 5 Utility Classes
Because Canvas is bundled with Bootstrap 5, you have access to the full Bootstrap spacing, flexbox, and grid utility system directly in your HTML attributes. No new CSS required. To increase the top padding on a hero section, add a utility class:
<section class="py-6 py-lg-8">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-lg-6">
<h2 class="display-4 fw-bold">Your Headline Here</h2>
<p class="lead mt-3">Supporting copy that explains your value proposition.</p>
<a href="#" class="button button-large button-rounded mt-4">Get Started</a>
</div>
<div class="col-lg-5">
<img src="images/hero.png" alt="Product preview" class="img-fluid">
</div>
</div>
</div>
</section>The Bootstrap grid classes (col-lg-6, col-lg-5) control the two-column split on large screens. The spacing utilities (py-6, mt-4) handle vertical rhythm. You never need to write a single bespoke CSS rule for layout adjustments like these. The Bootstrap Grid Calculator can help you plan column splits before you commit them to the HTML.
6. Customise CTA Buttons With Canvas Button Classes
Canvas ships with a rich button system that goes well beyond Bootstrap’s default buttons. You can mix Canvas modifier classes to change size, shape, and fill style without writing any CSS. The classes follow a predictable pattern:
- button — base class required on every Canvas button
- button-large / button-small — size modifiers
- button-rounded — applies border-radius for a pill-like shape
- button-border — renders an outlined/ghost variant
- button-light — switches to a light colour scheme for use on dark backgrounds
<a href="/signup" class="button button-large button-rounded">Start Free Trial</a>
<a href="/demo" class="button button-large button-rounded button-border button-light">Watch Demo</a>Combining these classes gives you multiple distinct button styles that stay visually consistent with your brand colour (set via –cnvs-themecolor) without any additional stylesheet work. For a deeper look at what makes CTAs convert, the post on CTA button design tips backed by science covers hierarchy, contrast, and copy principles worth applying alongside these Canvas classes.
Frequently Asked Questions
Do I need to know CSS to customise the Canvas HTML Template?
For the majority of common changes — colours, fonts, logo size, spacing, and button styles — you only need to edit a handful of CSS variable values or swap Bootstrap utility class names in your HTML. A basic understanding of what a CSS property looks like is helpful, but no programming knowledge is required.
Will editing Canvas CSS variables affect every page in my project?
Yes. When you set a variable like –cnvs-themecolor on the :root selector, it applies globally across every page that loads your stylesheet. This is one of the most efficient aspects of the Canvas variable system — a single edit propagates everywhere.
Can I add Bootstrap CDN to Canvas to get extra components?
No — you should never load Bootstrap via CDN when using Canvas. The template already bundles Bootstrap 5 inside js/plugins.min.js and css/style.css. Loading a second Bootstrap instance would cause style conflicts and unpredictable behaviour.
How do I customise Canvas without breaking future updates?
The safest approach is to confine all your changes to CSS variable overrides in a separate stylesheet loaded after style.css, and to avoid modifying the core Canvas CSS or JS files directly. This way, you can replace the core files when a new version is released without losing your customisations.
What is the fastest way to generate a Canvas layout before customising it?
Using an AI-powered layout generator built specifically for Canvas saves significant time. Rather than manually copying sections from the demo files and stripping unwanted content, you can describe the page you need and receive a structured Canvas-compatible HTML layout ready to drop into your project and then personalise using the techniques described in this post.
If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.