---
title: "Customise Event Branding and Style"
description: "Learn how to customise your event pages, and access our step-by-step instructions, FAQs, and everything you need to know!"
url: https://help.ivorey.io/en/articles/13631434-customise-event-branding-and-style
collection: "Event Management"
updated: 2026-10-29
language: en
---

# Customise Event Branding and Style

Learn how to customise your event pages, and access our step-by-step instructions, FAQs, and everything you need to know!

## Before You Dive In

This article is one step from our [Master Help Guide: All About Events](https://help.ivorey.io/en/articles/13631435-all-about-events-a-master-help-guide.md). We recommend starting with the **visual walkthrough video and examples** inside the Master Help Guide before diving into the technical breakdown below.

Each Master Help Guide acts as your project plan – teaching you the feature, laying out the steps in the right order, and linking to every resource you’ll need along the way.  
  
This guide is perfect if you want to:

-   Customise your event pages to match your brand
    

* * *

## Customise Event Pages & Design

Now that the structure of your event is set up, you can customise your event pages, and apply your brand colours and fonts. Your style settings apply across all your event pages, so everything looks consistent from the first click through to checkout. You can also unlock more customisations with custom CSS, using our interactive preview with the code pre-written for you.

### Step 1: Customise Your Event Pages

Choose which sections appear on your event pages, add FAQs, and customise your checkout or registration form and details.

Click here for the written steps

1.  From the main Ivorey™ menu, go to **Courses** \> **\[Events\]** \> open the event you want to edit > and click on the **\[Pages & design\]** tab
    
2.  You’ll work your way through the tabs down the left-hand side to customise your event pages and branding > and use the interactive preview on the right-hand side, to view your changes as you go:
    
    1.  Click the 💻 **desktop** or 📱**phone icons** to switch between device views
        
    2.  Click 🖌 **Copy from another event** to choose customisation settings from a previous event to copy over, so you don’t have to redo them (e.g. your brand colours and fonts)
        
3.  Starting on the 📄 **Pages** tab, you can manage the sections that appear on each of your event pages. On the **Details** tab, along the top of the left panel, you’ll customise the sections that display on the Details page which is the main landing page for your event:
    
    1.  Under the **Page sections** drop-down, toggle ON/OFF the sections you want to show or hide on this page - such as **About this event**, **Tickets**, **Schedule**, **Speakers**, **Location**, **Hosted by**
        
    2.  Use the **\[⋮⋮\] drag dots** to the left of each section, to rearrange the order on the page
        
    3.  Click the ✏ **pencil icon** to the right of each section, to edit the title of the section
        
    4.  Click the **\[↗\]︎ arrow icon** to the right of each section, to edit the contents of the section - this will redirect you to the relevant settings area (e.g. the main **Details** tab along the top, to edit the **About** section)
        
    5.  Click the **\[+\] plus icon** to add a **Frequently asked questions** section > click the ✏ **pencil icon** to edit the title (e.g. if you want to shorten to “FAQs” or something more on-brand) > or click the 🗑 **trash icon** to delete the section  
          
        **Note:** This creates a new drop-down below, where you can customise the FAQs.
        
    6.  If you’ve created a schedule for your event, and have the **Schedule** section toggled ON under **Page sections**, click the **Schedule configuration** drop-down below:
        
        1.  Toggle ON/OFF to **Show speaker thumbnails**, **Group sessions by day**, and **Make schedule days collapsible**  
              
            **Note:** The Schedule configuration settings are not customisable per page - anything configured here will carry over to the Schedule page as well.
            
    7.  If you’ve added a **Frequently asked questions** section under **Page sections**, click **\[+ Add question\]** on the **Frequently asked questions** drop-down below:
        
        1.  Enter the **Question** and **Answer**
            
        2.  Click **\[+ Add question\]** to add more FAQs
            
        3.  Use the **\[↑\] up arrow** and **\[↓\] down arrow** to the right of each FAQ, to rearrange the order of FAQs
            
        4.  Click the 🗑 **trash icon** to delete any FAQs
            
    8.  Click the **\[Save changes\]** button, in the bottom right corner, before going to the next tab
        
4.  If you’ve created a schedule for your event, click on the **\[Schedule\]** tab, along the top of the left panel, to customise the sections that display on the Schedule page where only registered attendees can view your event’s schedule:
    
    1.  Under the **Page sections** drop-down, toggle ON/OFF the sections you want to show or hide on this page - such as **Schedule**, **Speakers**, **Hosted by** and **Frequently asked questions**
        
    2.  Click the **Schedule configuration** drop-down to review or edit the settings  
          
        **Note:** Editing here will affect how this section displays on the Details page, if you have the Schedule section toggled ON there.
        
    3.  Click the **Frequently asked questions** drop-down to review or edit the questions  
          
        **Note:** The FAQ section is not customisable per page - editing here will affect the questions that display on the Details page, if you have the FAQ section toggled ON there.
        
    4.  Click the **\[Save changes\]** button, in the bottom right corner, before going to the next tab
        
5.  Click on the **\[Checkout\]** tab, along the top of the left panel, to customise the form and settings for the Checkout page where visitors can purchase a ticket for your event or register for free:
    
    1.  Under the **Form fields** drop-down, you can customise your registration form:
        
        1.  (optional) Edit the **Checkout title** at the top of the form
            
        2.  **First name, Last name** and **Email** fields are mandatory and can’t be deleted or rearranged
            
        3.  Click **\[+ Add fields\]** \> search and select fields that already exist in your Ivorey™ account
            
        4.  To create a new custom field, click **\[+ Add fields\]** \> and click **\[+ Create custom field\]:**
            
            1.  Edit the **Label** and **Placeholder** text
                
            2.  Under the **Advanced settings** drop-down, choose the **Custom field type** (e.g. text, dropdown, checkbox) > and edit the **Options** if applicable
                
            3.  (optional) Check the box to make the field **required**
                
            4.  Click **\[Done\]** to save the new custom field
                
        5.  Use the **\[⋮⋮\] drag dots** to the left of an added field, to rearrange the order on the form
            
        6.  Check the **Required** box, to the right of an added field, if the field must be filled out before visitors can register
            
        7.  (optional) Click the ✏ **pencil icon** to the right of any field (including the mandatory fields that are added by default) > edit the **Field label** and **Placeholder** text > and click **\[Done\]**
            
        8.  Click the 🗑 **trash icon** to delete an added field
            
        9.  (optional) Edit the the text for the **Checkout button** at the bottom of the form
            
    2.  Under the **Timezone field** drop-down, toggle ON/OFF to show or hide the **Timezone** selection field from your form
        
    3.  Under the **Coupons** drop-down, toggle ON/OFF **Allow coupons** \- this will display or hide the **Have a coupon code?** text, in the **Order summary**, to the right of your Checkout page
        
    4.  (optional) Under the **Terms and conditions** drop-down, you can choose to require attendees to accept your terms or confirm consent, before registering:
        
        1.  Toggle ON **Require attendees to accept terms and conditions:**
            
            1.  Paste in the **URL** of your Terms page
                
            2.  (optional) Add a **Short excerpt** as a brief description of your terms
                
            3.  Edit the **Checkbox label**
                
        2.  Toggle ON **Consent checkbox** to add an additional consent confirmation (e.g. consent to receiving SMS’s or other communications) > and edit the **Consent text** (what they’re consenting to)
            
6.  Click the **\[Save changes\]** button, in the bottom right corner
    

* * *

### Step 2: Edit the Text

Customise labels, button text, confirmation messages, and pop-up/error text shown across your event pages.

Click here for the written steps

1.  From the main Ivorey™ menu, go to **Courses** \> **\[Events\]** \> open the event you want to customise > click on the **\[Pages & design\]** tab > and click on the **\[T\] Page text** tab, along the left-hand side
    
2.  Click through the **\[Details\]**, **\[Schedule\]** and **\[Checkout\]** tabs, along the top of the left panel, to customise the text that displays on each page  
      
    **Note:** The sections and fields you can customise for each page will vary, based on your event type (Ticketed or RSVP) and location (In-person and Online). As you click into a field to edit the text, the live preview on the right updates to show you where that text appears, including pop-up/error messages you wouldn't normally see.
    
3.  On the **Details** tab, open each drop-down to customise sections, such as **Event badges & states**, **Registration card**, **Tickets section**, **Location** and **Online Session**
    
4.  On the **Schedule** tab, there’s no text to customise - these section headings are configured on the 📄 **Pages** tab (covered in Step 1)
    
5.  On the **Checkout** tab, click on each sub-tab > and customise the available sections, such as **Ticket selection**, **Attendee details**, **Checkout states**, **Payment**, **Leave Checkout**, **Confirmation** and **What’s Next**
    
6.  You can also use the **Search** bar at the top to jump straight to a field if you already know what it says
    
7.  Click the **\[Save changes\]** button, in the bottom right corner
    

* * *

### Step 3: Adjust the Style

Choose your accent colour, adjust your page layout, and pick your fonts.

Click here for the written steps

1.  From the main Ivorey™ menu, go to **Courses** \> **\[Events\]** \> open the event you want to customise > click on the **\[Pages & design\]** tab > and click on the 🖌 **Style** tab, along the left-hand side  
      
    **Note:** Switch back to the 📄 **Page** or **\[T\] Page text** tab as you go, to select different pages and preview how your changes display across your pages.
    
2.  Under the **Color** drop-down, select your main accent colour for buttons and links throughout your pages  
      
    **Note:** You can edit specific colours using our pre-written custom CSS in the next step, but this controls your default accent colour.
    
3.  Under the **Layout & density** drop-down, select your preferences for:
    
    1.  **Page mode** - Select **\[Light\]**, **\[Dark\]** or **\[Auto\]** to adjust the default theme for your pages
        
    2.  **Density** \- Select **\[Compact\]**, **\[Comfortable\]**, or **\[Spacious\]** to adjust the spacing of elements on the page (some page sections won’t be affected, such as the registration or checkout form)
        
    3.  **Corners** \- Select **\[Sharp\]**, **\[Soft\]**, or **\[Rounded\]** to adjust the corner style across your sections, fields and buttons
        
4.  Under the **Page template** drop-down, select your preferred layout - **\[Modern\]**, **\[Classic\]**, or **\[Bold\]** \> be sure to check both 💻 **Desktop** and 📱 **Mobile** views, in the preview window
    
5.  Under the **Typography** drop-down, select your fonts:
    
    1.  Choose one of the pre-set **Font pairings**
        
    2.  Select individual **Heading** and **Body** fonts, from the drop-downs
        
6.  Click the **\[Save changes\]** button, in the bottom right corner
    

* * *

### Step 4: Edit with Custom CSS

Custom CSS gives you finer control over details like button colours, borders, and spacing, across your pages. You can use the interactive preview to click any part of your page and Ivorey™ generates the custom code for you, so you don't need to write it from scratch.

Click here for the written steps

1.  From the main Ivorey™ menu, go to **Courses** \> **\[Events\]** > open the event you want to customise > click on the **\[Pages & design\]** tab > and click on the **\[<>\] Custom CSS** tab, along the left-hand side
    
2.  Click through the **\[Details\]**, **\[Schedule\]**, **\[Checkout\]**, and **\[Online page\]** tabs, along the top of the left panel, to customise each page with custom code  
      
    **Note:** The **Online** page is only available for online events, and won’t be an option for in-person events.
    
3.  In the preview window, on the right, click the element you'd like to adjust (e.g. a button or heading) > and a pop-up will appear with the element's selector (a short code that tells the system exactly which element to adjust)
    
4.  If you want to write your own code, or use an external CSS writing app, click the **\[⧉\] copy icon**, to copy the selector > then paste your code into the **CSS** window on the left
    
5.  If you want to use our our pre-written code, click the **\[+\] plus icon**:
    
    1.  Choose a quick style preset to generate starter code for the selected element:
        
        1.  **Border -** Border width, style, and colour
            
        2.  **Background -** Background colour or image
            
        3.  **Text Color**
            
        4.  **Button Color -** Button background and text colour
            
        5.  **Border Radius -** How rounded the corners are
            
        6.  **Spacing -** Padding and margins
            
        7.  **Shadow -** Shadow effects
            
        8.  **Typography -** Font, size, weight, and line height  
              
            **Note:** Typography works best on text elements, while presets like Border and Background work on most other elements.
            
6.  Once select, our starter code will be added into the **CSS** window on the left > update the values in the generated code to match your brand, such as replacing the colour with your brand colour HEX code
    
7.  Your changes will appear instantly in the preview
    
8.  Repeat for any other elements you'd like to style > then click the **\[Save Changes\]** button, to save your Custom CSS
    

* * *

## Next Steps

> **Success:** If you've completed the steps above, head back to the [Master Help Guide on Events](https://help.ivorey.io/en/articles/13631435-all-about-events-a-master-help-guide.md) to move onto the next phase.
>
> Each Master Help Guide acts as your project plan - teaching you the feature, laying out the steps in the right order, and linking to every resource you'll need along the way.

* * *

## Frequently Asked Questions

Will my Custom CSS carry over to my other events?

No. Custom CSS is saved per event, so it won't automatically apply to your other events. However, when you duplicate an event or copy settings from another event, your Custom CSS comes across too, and you can edit it in the new event without affecting the original. You can also copy the code from one event's Custom CSS editor and paste it into another.

How do I remove my event’s Custom CSS?

If you want to remove any applied CSS from an event, simply delete the code in the **CSS** editor window, and save your changes. Your event pages will return to their default styling.

Will my Custom CSS change how my event page looks on mobile?

Yes. Custom CSS applies to all screen sizes. If you'd like styles that only apply on smaller screens, you can use a CSS media query, such as: `@media (max-width: 768px)`

Why isn't my Custom CSS style showing on my event page?

Your Custom CSS is applied after the default styles, so in most cases it will take priority. If a style isn't showing as expected, try using a more specific selector, or add `!important` to the end of the rule.

How do I add a gradient background with Custom CSS?

If you want to add a gradient instead of one flat colour to your page’s background, you can adjust the code manually. Click the background element you want to style in the preview (e.g. the main checkout page background area) and choose the **Background** preset from the pop-up. This inserts the starter CSS for you to edit.

To turn that into a gradient instead, select the `background-color: #hex code;` line in the code, and swap it for the following line:

`background-image: linear-gradient(to bottom, #YOUR HEX CODE, #YOUR HEX CODE) !important;`

**Note:** Make sure you aren’t replacing the `#event` line above or the `}` line below, those need to stay in place to apply the gradient to the correct element and close out the rule.  
  
Then you can replace “**YOUR HEX CODE**” with whatever colour HEX codes you want for your gradient. You can also swap out “**to bottom**” with a specific degree code, such as: `135deg` - to adjust the gradient from top-to-bottom to a diagonal gradient.

* * *

## Need Help?

Hit the support chat widget inside Ivorey™ - we can:

-   Walk you through any of the steps
    
-   Troubleshoot anything that's not working
    

We're here and ready to help via the chat widget in the bottom right of your Ivorey™ account. Or if you are looking for done-for-you support, you can browse our current services [here](https://ivorey.io/services) 🤍