---
title: Customize the look of your website
description: Customize the colours, font and background of your website, add your own CSS and give a unique style to a specific page of your website in just a few clicks.
---

[Skip to content](https://support.yapla.com/en-ca/customize-the-look-of-your-website#main-content)

- [English - Canada](https://support.yapla.com/en-ca/customize-the-look-of-your-website)
- [Français - Canada](https://support.yapla.com/fr-ca/personnaliser-lapparence-de-votre-site-web)
- [Français - France](https://support.yapla.com/fr-fr/personnaliser-lapparence-de-votre-site-web)
- [Italiano - Italia](https://support.yapla.com/it-it/personalizzare-laspetto-del-tuo-sito-web)

English - Canada

Show submenu for translations

[More support](https://support.yapla.com/en-ca/kb-tickets/new?hsLang=en-ca) [Customer portal](https://support.yapla.com/tickets-view?hsLang=en-ca)

[![logo-yapla-help-centre](https://support.yapla.com/hs-fs/hubfs/logo-yapla-help-centre.png?width=880&height=119&name=logo-yapla-help-centre.png)](https://support.yapla.com/en-ca/?hsLang=en-ca)

- [Meet](https://www.yapla.com/en-ca/support-meeting?utm_term=plateforme)
- [Yapla Academy](https://academy.yapla.com/)

Open main navigation

Close main navigation

- [Meet](https://www.yapla.com/en-ca/support-meeting?utm_term=plateforme)
- [Yapla Academy](https://academy.yapla.com/)
- - [English - Canada](https://support.yapla.com/en-ca/customize-the-look-of-your-website)
    - [Français - Canada](https://support.yapla.com/fr-ca/personnaliser-lapparence-de-votre-site-web)
    - [Français - France](https://support.yapla.com/fr-fr/personnaliser-lapparence-de-votre-site-web)
    - [Italiano - Italia](https://support.yapla.com/it-it/personalizzare-laspetto-del-tuo-sito-web)

  English - Canada
  
  Show submenu for translations
- [More support](https://support.yapla.com/en-ca/kb-tickets/new)
- [Customer portal](https://support.yapla.com/tickets-view)
- [Contact us](https://support.yapla.com/en-ca/kb-tickets/new)

[Contact us](https://support.yapla.com/en-ca/kb-tickets/new?hsLang=en-ca)

 How can we help you?

- There are no suggestions because the search field is empty.

1. [Yapla Help Centre](https://support.yapla.com/en-ca?hsLang=en-ca)
2. [Create my website](https://support.yapla.com/en-ca/create-my-website?hsLang=en-ca)
3. [Website personalization](https://support.yapla.com/en-ca/create-my-website?hsLang=en-ca#website-personalization)

# Customize the look of your website

## Choose your website's colours and font, adjust the basic styles with CSS, change the background colour and customize a specific page.

**Available with the Essentials plan and higher.**

Your website template comes with preset colours and a preset font. Adapt them to your organization's visual identity without any technical knowledge, then go further with CSS if you wish. All these options are in the **Customization** tile of your website.

**In this article**

- [Choose the colours and font](https://support.yapla.com/en-ca/customize-the-look-of-your-website#guided)
- [Adjust the basic styles](https://support.yapla.com/en-ca/customize-the-look-of-your-website#basic)
- [Add CSS or JavaScript](https://support.yapla.com/en-ca/customize-the-look-of-your-website#advanced)
- [Change the background colour](https://support.yapla.com/en-ca/customize-the-look-of-your-website#background)
- [Target a page or a line with CSS classes](https://support.yapla.com/en-ca/customize-the-look-of-your-website#classes)
- [Customize a single page](https://support.yapla.com/en-ca/customize-the-look-of-your-website#page)

### Choose the colours and font

1. In **Website**, open your website, then click the **Customization** tile. The **Guided** submenu appears.
2. Check that the **Active** switch is turned on.
3. Under **The colors of your site**, enter your main colour and your secondary colour. They are used for the buttons, headings and coloured elements across the whole website.
4. Under **Your site's font**, choose the **Typeface**. The **Overview** shows how bold and regular text will look.
5. Click **Save**.

Your colour codes are in your brand guidelines. Otherwise, an online colour picker gives you the hexadecimal code of a colour: a hash sign followed by six digits or letters, for example `#1F6FB5`.

### Adjust the basic styles

The **Basic** submenu accepts CSS declarations for the basic elements of your pages: **body** (the page body), headings **h1** to **h4**, links (**a:link, a:visited, a:active** and **a:hover** on hover) and buttons (**.btn** and **btn:hover**). For example, enter `color: #1F6FB5;` in the **h2** field to colour all your subheadings, then click **Save**.

### Add CSS or JavaScript

- **Advanced:** the **Custom CSS** field accepts complete CSS. You can also upload a file under **Upload custom CSS**. This CSS is loaded last on the page, so it overrides the template's default styles.
- **JS:** this submenu accepts JavaScript code run on every page of the website.

For ready-to-copy examples (logo size, menu colour, background image, etc.), see the article [Change the look of your website with custom CSS](https://support.yapla.com/en-ca/change-the-look-of-your-website-with-custom-css?hsLang=en-ca).

Faulty CSS or JavaScript code can break the display of your whole website. Add one element at a time and check the result on your website after each save.

### Change the background colour

#### The whole page

In the **Customization** tile, open the **Basic** submenu. In the **body** field, enter `background-color: #F5F5F5;`, replacing the code with your colour's code, then click **Save**. The default white background is then replaced across the website.

#### A single line

A background colour on a line creates a band effect. Apply it on the master page for all the pages based on it, or on a single page.

1. Open the page or the master page, in the **Structure** tab.
2. Hover over the line to change, then click **Define line style**, in its top right corner.
3. In the line style window, enter the English name (`white`, `black`, etc.) or the hexadecimal code of your colour in the background colour field.
4. Click **Save**.

To apply the same background to several adjacent lines, first group them with the **Grouping of lines** mode. See the article [Edit the structure of a page on your website](https://support.yapla.com/en-ca/updating-a-page-structure-on-your-website?hsLang=en-ca).

### Target a page or a line with CSS classes

CSS classes let your custom CSS target a specific part of the website.

- **Page class:** in the **Configuration** tab of a page or master page, **Graphical presentation** section, enter one or more classes (separated by a space) in **Page CSS classes**. On a master page, the class applies to every page based on it.
- **Line class:** in the line style window, enter the class in the CSS class field. Each line already has the `line` class. Add a prefix such as `line-` (for example `line-footer`) to avoid conflicts with the template's existing classes.

The text of a menu button does not show? The button and the menu band probably have the same colour. In the menu's **Define line style** window, choose your website's main colour as the background colour and check that the `line-main` class is applied.

### Customize a single page

A page can have its own colours and font, without changing the rest of the website.

1. In the **Pages** tile, open the page to change.
2. Open the **Customization** tab and check **Customize my web page**.
3. Choose the **Main color** and the **Page typeface** of this page, then click **Save**.

Click **View live site** at any time to see the result.

- [Getting started on Yapla](https://support.yapla.com/en-ca/getting-started-on-yapla?hsLang=en-ca#main-content)

    - [Collection of useful resources to discover Yapla](https://support.yapla.com/en-ca/getting-started-on-yapla?hsLang=en-ca#collection-of-useful-resources-to-discover-yapla)
    - [Getting started](https://support.yapla.com/en-ca/getting-started-on-yapla?hsLang=en-ca#getting-started)
    - [Make the most of Yapla](https://support.yapla.com/en-ca/getting-started-on-yapla?hsLang=en-ca#make-the-most-of-yapla)
    - [About Yapla](https://support.yapla.com/en-ca/getting-started-on-yapla?hsLang=en-ca#about-yapla)
- [Configure my account](https://support.yapla.com/en-ca/configure-my-account?hsLang=en-ca#main-content)

    - [First steps](https://support.yapla.com/en-ca/configure-my-account?hsLang=en-ca#first-steps)
    - [Account](https://support.yapla.com/en-ca/configure-my-account?hsLang=en-ca#account)
    - [Billing](https://support.yapla.com/en-ca/configure-my-account?hsLang=en-ca#billing)
    - [License and users](https://support.yapla.com/en-ca/configure-my-account?hsLang=en-ca#license-and-users)
    - [Frequently asked questions](https://support.yapla.com/en-ca/configure-my-account?hsLang=en-ca#frequently-asked-questions)
- [Learn about common functionalities](https://support.yapla.com/en-ca/learn-about-common-functionalities?hsLang=en-ca#main-content)

    - [Communications](https://support.yapla.com/en-ca/learn-about-common-functionalities?hsLang=en-ca#communications)
    - [Forms](https://support.yapla.com/en-ca/learn-about-common-functionalities?hsLang=en-ca#forms)
    - [Pictures and media](https://support.yapla.com/en-ca/learn-about-common-functionalities?hsLang=en-ca#pictures-and-media)
    - [Frequently asked questions](https://support.yapla.com/en-ca/learn-about-common-functionalities?hsLang=en-ca#frequently-asked-questions)
- [Manage my payments and authentification](https://support.yapla.com/en-ca/manage-my-payments-and-authentification?hsLang=en-ca#main-content)

    - [Authentification](https://support.yapla.com/en-ca/manage-my-payments-and-authentification?hsLang=en-ca#authentification)
    - [Payment method](https://support.yapla.com/en-ca/manage-my-payments-and-authentification?hsLang=en-ca#payment-method)
    - [Voluntary contribution and commission](https://support.yapla.com/en-ca/manage-my-payments-and-authentification?hsLang=en-ca#voluntary-contribution-and-commission)
    - [Frequently asked questions](https://support.yapla.com/en-ca/manage-my-payments-and-authentification?hsLang=en-ca#frequently-asked-questions)
- [Manage my members](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#main-content)

    - [First Steps](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#first-steps)
    - [Import members](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#import-members)
    - [Simplified Membership Campaign](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#simplified-membership-campaign)
    - [Member management](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#member-management)
    - [Member profiles](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#member-profiles)
    - [Form](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#form)
    - [Communications](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#communications)
    - [Organization or family management](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#organization-or-family-management)
    - [Membership management](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#membership-management)
    - [Rates](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#rates)
    - [Organization or family](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#organization-or-family)
    - [Advanced functions](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#advanced-functions)
    - [Continuing education](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#continuing-education)
    - [Frequently asked questions](https://support.yapla.com/en-ca/manage-my-members?hsLang=en-ca#frequently-asked-questions)
- [Organize my events](https://support.yapla.com/en-ca/organize-my-events?hsLang=en-ca#main-content)

    - [First steps](https://support.yapla.com/en-ca/organize-my-events?hsLang=en-ca#first-steps)
    - [Settings](https://support.yapla.com/en-ca/organize-my-events?hsLang=en-ca#settings)
    - [Forms](https://support.yapla.com/en-ca/organize-my-events?hsLang=en-ca#forms)
    - [Electronic tickets](https://support.yapla.com/en-ca/organize-my-events?hsLang=en-ca#electronic-tickets)
    - [Advanced settings](https://support.yapla.com/en-ca/organize-my-events?hsLang=en-ca#advanced-settings)
    - [Communications](https://support.yapla.com/en-ca/organize-my-events?hsLang=en-ca#communications)
    - [Rate management](https://support.yapla.com/en-ca/organize-my-events?hsLang=en-ca#rate-management)
    - [Event registration management](https://support.yapla.com/en-ca/organize-my-events?hsLang=en-ca#event-registration-management)
    - [Activity management with sessions](https://support.yapla.com/en-ca/organize-my-events?hsLang=en-ca#activity-management-with-sessions)
    - [Conferences](https://support.yapla.com/en-ca/organize-my-events?hsLang=en-ca#conferences)
    - [Frequently asked questions](https://support.yapla.com/en-ca/organize-my-events?hsLang=en-ca#frequently-asked-questions)
- [Receive donations](https://support.yapla.com/en-ca/receive-donations?hsLang=en-ca#main-content)

    - [First Steps](https://support.yapla.com/en-ca/receive-donations?hsLang=en-ca#first-steps)
    - [Donation management](https://support.yapla.com/en-ca/receive-donations?hsLang=en-ca#donation-management)
    - [Tax receipts](https://support.yapla.com/en-ca/receive-donations?hsLang=en-ca#tax-receipts)
    - [Recurring donation](https://support.yapla.com/en-ca/receive-donations?hsLang=en-ca#recurring-donation)
    - [Campaign management](https://support.yapla.com/en-ca/receive-donations?hsLang=en-ca#campaign-management)
    - [Peer-to-peer campaign (P2P)](https://support.yapla.com/en-ca/receive-donations?hsLang=en-ca#peer-to-peer-campaign-p2p)
    - [Donor management](https://support.yapla.com/en-ca/receive-donations?hsLang=en-ca#donor-management)
    - [Frequently asked questions](https://support.yapla.com/en-ca/receive-donations?hsLang=en-ca#frequently-asked-questions)
- [Create my website](https://support.yapla.com/en-ca/create-my-website?hsLang=en-ca#main-content)

    - [First steps](https://support.yapla.com/en-ca/create-my-website?hsLang=en-ca#first-steps)
    - [Website personalization](https://support.yapla.com/en-ca/create-my-website?hsLang=en-ca#website-personalization)
    - [Content and articles](https://support.yapla.com/en-ca/create-my-website?hsLang=en-ca#content-and-articles)
    - [Pages](https://support.yapla.com/en-ca/create-my-website?hsLang=en-ca#pages)
    - [Modules](https://support.yapla.com/en-ca/create-my-website?hsLang=en-ca#modules)
    - [Online store](https://support.yapla.com/en-ca/create-my-website?hsLang=en-ca#online-store)
    - [SEO & Performance Tools](https://support.yapla.com/en-ca/create-my-website?hsLang=en-ca#seo-performance-tools)
- [Simplify my accounting](https://support.yapla.com/en-ca/simplify-my-accounting?hsLang=en-ca#main-content)

    - [First Steps](https://support.yapla.com/en-ca/simplify-my-accounting?hsLang=en-ca#first-steps)
    - [Manage sales and invoices](https://support.yapla.com/en-ca/simplify-my-accounting?hsLang=en-ca#manage-sales-and-invoices)
    - [Manage expenses](https://support.yapla.com/en-ca/simplify-my-accounting?hsLang=en-ca#manage-expenses)
    - [General ledger](https://support.yapla.com/en-ca/simplify-my-accounting?hsLang=en-ca#general-ledger)
    - [Consolidation](https://support.yapla.com/en-ca/simplify-my-accounting?hsLang=en-ca#consolidation)
    - [Reports](https://support.yapla.com/en-ca/simplify-my-accounting?hsLang=en-ca#reports)
    - [Settings](https://support.yapla.com/en-ca/simplify-my-accounting?hsLang=en-ca#settings)
    - [Projects](https://support.yapla.com/en-ca/simplify-my-accounting?hsLang=en-ca#projects)
    - [Taxes](https://support.yapla.com/en-ca/simplify-my-accounting?hsLang=en-ca#taxes)
    - [Frequently asked questions](https://support.yapla.com/en-ca/simplify-my-accounting?hsLang=en-ca#frequently-asked-questions)
- [Manage my contacts](https://support.yapla.com/en-ca/manage-my-contacts?hsLang=en-ca#main-content)

    - [Manage contact](https://support.yapla.com/en-ca/manage-my-contacts?hsLang=en-ca#manage-contact)
- [Send newsletters](https://support.yapla.com/en-ca/send-newsletters?hsLang=en-ca#main-content)

    - [Introduction to Yapla Newsletters](https://support.yapla.com/en-ca/send-newsletters?hsLang=en-ca#introduction-to-yapla-newsletters)
    - [Configure your Newsletters](https://support.yapla.com/en-ca/send-newsletters?hsLang=en-ca#configure-your-newsletters)
    - [Contacts management](https://support.yapla.com/en-ca/send-newsletters?hsLang=en-ca#contacts-management)
    - [Performance tracking](https://support.yapla.com/en-ca/send-newsletters?hsLang=en-ca#performance-tracking)
    - [Target your mailings](https://support.yapla.com/en-ca/send-newsletters?hsLang=en-ca#target-your-mailings)
    - [Grow your subscriber list](https://support.yapla.com/en-ca/send-newsletters?hsLang=en-ca#grow-your-subscriber-list)
    - [Webinars](https://support.yapla.com/en-ca/send-newsletters?hsLang=en-ca#webinars)
- [Manage my data](https://support.yapla.com/en-ca/manage-my-data?hsLang=en-ca#main-content)

    - [First Steps](https://support.yapla.com/en-ca/manage-my-data?hsLang=en-ca#first-steps)
    - [Settings](https://support.yapla.com/en-ca/manage-my-data?hsLang=en-ca#settings)
    - [Object management](https://support.yapla.com/en-ca/manage-my-data?hsLang=en-ca#object-management)
    - [Reports](https://support.yapla.com/en-ca/manage-my-data?hsLang=en-ca#reports)
- [Documentation for developers](https://support.yapla.com/en-ca/documentation-for-developers?hsLang=en-ca#main-content)

    - [Advanced functions](https://support.yapla.com/en-ca/documentation-for-developers?hsLang=en-ca#advanced-functions)
- [Manage my federation](https://support.yapla.com/en-ca/manage-my-federation?hsLang=en-ca#main-content)

    - [Getting started](https://support.yapla.com/en-ca/manage-my-federation?hsLang=en-ca#getting-started)

- Our pricing 
    - [Pricing](https://www.yapla.com/en-ca/pricing)
    - [Professional Services](https://www.yapla.com/en-ca/professional-services)
    - [Training hours bank](https://info.yapla.ca/en/services)
- Resources 
    - [Help Centre](https://support.yapla.com/)
    - [Yapla Academy](https://academy.yapla.com/?utm_campaign=website&utm_medium=footer&utm_source=academie)
    - [Blog](https://www.yapla.com/en-ca/blog/)
    - [Yapla Newsletter](https://www.yapla.com/en-ca/yapla-newsletter/)
- Discover Yapla 
    - [Demo and webinars](https://www.yapla.com/en-ca/webinars)
- About Yapla 
    - [About us](https://www.yapla.com/en-ca/about-us/)
    - [Work with us](https://info.yapla.ca/en/work-with-us)
    - Contact Yapla
    - [Become partner](https://www.yapla.com/en-ca/partner-program/)

[![Yapla](https://support.yapla.com/hubfs/logo-yapla-fr.svg "Yapla")](https://www.yapla.com)

<https://www.facebook.com/Yapla.ca.en> <https://www.instagram.com/yapla.ca_en/> <https://www.youtube.com/Yapla> <https://www.linkedin.com/company/yaplacommunity/>

Copyright © 2013-2026, Yapla

[Terms of use](https://www.yapla.com/en-ca/terms-of-use)| [Privacy policy](https://www.yapla.com/en-ca/privacy-policy)