Customise Event Branding and Style

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

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

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

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

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.

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.

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)

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.

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.