You bought the Canvas HTML Template, you have a clear vision for your site, but the idea of digging into code feels like a barrier. The good news is that a large proportion of meaningful customisation can be achieved without touching a single line of JavaScript or complex CSS.
1. Change the Theme Colour with One CSS Variable
Canvas stores its primary brand colour as the custom property –cnvs-themecolor. Every button, link highlight, and accent element in the template references this variable, so overriding it in a small stylesheet block rebrands the entire template without editing any of Canvas’s own files.
Create a <style> block in your page’s <head> after Canvas’s own style.css link, or add it to a separate custom.css file:
:root {
--cnvs-themecolor: #e63946;
--cnvs-themecolor-rgb: 230, 57, 70;
}
Always update both variables together. The –cnvs-themecolor-rgb companion is used wherever Canvas applies transparency to the theme colour, and missing it produces broken semi-transparent states on buttons and overlays. That single pair of overrides propagates to progress bars, icon colours, and every component that inherits the accent. For a deeper look at what Canvas variables control, the complete guide to Canvas HTML Template features and best practices covers all the major tokens in one place.
2. Swap Fonts Using Canvas Font Variables
Canvas controls typography through two CSS custom properties: –cnvs-primary-font for body text and –cnvs-secondary-font for headings. No need to hunt down individual element selectors. Load your chosen Google Font in the <head> and override the variables:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600&family=Playfair+Display:wght@700&display=swap">
<style>
:root {
--cnvs-primary-font: 'DM Sans', sans-serif;
--cnvs-secondary-font: 'Playfair Display', serif;
}
</style>
Canvas cascades these variables throughout the template, so every heading, paragraph, and navigation label updates automatically. This is far safer than overriding individual selectors, which can break when Canvas receives an update.
3. Use Bootstrap 5 Utility Classes Directly in HTML
Canvas is built on Bootstrap 5, which is bundled inside the template. Do not load the Bootstrap CDN separately alongside Canvas: it causes style conflicts. The utility classes are already available on every page.
You can control spacing, background colours, text alignment, borders, and display behaviour entirely through HTML class attributes, no CSS file required:
<section class="py-6 bg-light text-center">
<div class="container">
<h2 class="fw-bold mb-3">Simple. Fast. Effective.</h2>
<p class="text-muted col-md-6 mx-auto">
A concise value proposition goes here.
</p>
<a href="#" class="btn btn-primary mt-4">Get Started</a>
</div>
</section>
Responsive column widths, flex alignment, and gap spacing all follow the same pattern. If you want to verify precise grid structures before committing them to your HTML, the Bootstrap Grid Calculator lets you visualise column layouts without guessing. For a full breakdown of how the Bootstrap grid works inside Canvas, the Bootstrap 5 grid system guide is worth reading before you restructure any major section.
4. Swap Pre-Built Section Blocks
Canvas ships with hundreds of pre-built section demos covering heroes, feature grids, testimonials, pricing tables, FAQs, and more. Each section is a self-contained HTML block. The lowest-friction way to restructure a page is to find the section type you want, copy its markup from the Canvas demo files, and paste it in place of the existing section in your layout.
Keep the structural wrapper classes intact. A Canvas content section typically follows this pattern:
<section id="content">
<div class="content-wrap">
<div class="container">
<div class="row col-mb-50">
<div class="col-md-4">
<!-- Feature card content here -->
</div>
<div class="col-md-4">
<!-- Feature card content here -->
</div>
<div class="col-md-4">
<!-- Feature card content here -->
</div>
</div>
</div>
</div>
</section>
Preserve the content, content-wrap, and Bootstrap grid structure and you can mix sections from different Canvas demos without breaking spacing or JavaScript functionality. Strip those wrappers and things start misbehaving quickly.
5. Adjust Logo Size and Header Appearance
A common point of confusion: Canvas logo sizing is controlled by CSS variables, not by targeting #logo img directly. The correct variables are –cnvs-logo-height for the standard header state and –cnvs-logo-height-sticky for the sticky header. Targeting the image element directly produces inconsistent results across sticky and transparent header states.
:root {
--cnvs-logo-height: 48px;
--cnvs-logo-height-sticky: 36px;
--cnvs-header-bg: #ffffff;
--cnvs-header-sticky-bg: rgba(255, 255, 255, 0.96);
}
You can also set –cnvs-primary-menu-color and –cnvs-primary-menu-hover-color here to control navigation link colours without touching Canvas’s own stylesheet. Keep all of this in a separate custom.css file loaded after style.css and your overrides will survive Canvas version updates.
6. Generate Layout HTML with an AI Layout Tool
Canvas Builder is designed specifically for the Canvas HTML Template. You describe the section or page structure you need, and it outputs production-ready HTML using correct Canvas classes, proper Bootstrap 5 grid structure, and the right wrapper hierarchy.
This removes the need to copy-paste from demo files and reverse-engineer which classes do what. The output already conforms to Canvas’s expected DOM structure, so Canvas’s own JavaScript initialises correctly on page load. If you are building a specific type of site, posts like the product launch landing page guide show how these sections fit together into a complete page.
The practical workflow:
- Choose your Canvas base demo (single page, multi-page, or a specific niche layout).
- Use Canvas Builder to generate the section HTML for any custom blocks you need.
- Paste the generated HTML into your file and override –cnvs-themecolor and font variables to match your brand.
- Add Bootstrap 5 utility classes directly in the HTML to adjust spacing and alignment.
- Test on mobile using Bootstrap’s responsive column classes already present in the markup.
Frequently Asked Questions
Do I need to know CSS to customise the Canvas HTML Template?
For basic colour and font changes, you only need to override two or three CSS variables in a :root block. Pasting a few lines into a <style> tag in your HTML file is the extent of it. More advanced layout changes can be handled through Bootstrap 5 utility classes directly in the HTML, which requires no CSS knowledge at all.
Is it safe to override Canvas CSS variables in a separate file?
Yes, and it is the recommended approach. Keeping your overrides in a separate custom.css file loaded after style.css means Canvas updates will not overwrite your changes. Always place your custom file last in the stylesheet load order so your variable overrides take precedence.
Can I use Bootstrap CDN alongside Canvas?
No. Canvas bundles Bootstrap 5 internally. Loading Bootstrap again from a CDN will cause duplicate styles, specificity conflicts, and unpredictable visual results. All Bootstrap utility classes are already available on every Canvas page without any additional CDN link.
What is the difference between –cnvs-logo-height and –cnvs-logo-height-sticky?
–cnvs-logo-height controls the logo size in the standard (non-scrolled) header state. –cnvs-logo-height-sticky controls the logo size when the header becomes fixed after the user scrolls down. Setting both ensures your logo scales correctly across both header states without visual jumps.
What Canvas section types are available for layout building?
Canvas supports three main section types: singlepage (a full one-page layout including header, hero, body sections, and footer), blocksection (a single reusable component such as a pricing table or testimonial row), and fullpagelayout (a multi-page niche demo with its own navigation and inner pages). Choosing the right type before you start building saves significant restructuring time later.
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.