Customizing Color Outlines for Speaker and Sponsor Carousels

Designing the Speaker and Sponsor Carousels

Make your speakers and sponsors stand out by adding a color outline around their images in the carousel. This is an easy way to highlight key participants and reinforce your event's branding throughout the app.

Choosing a Color

You can select any color that has been added to your app's design settings. If you need to add or update available colors, navigate to Design > Colors > Manage Colors section of the CMS.

Applying Color Outlines

This feature is available for both Speakers and Sponsors. Below, we'll walk you through how to add outline colors for each.

Design Tip: Set Carousel Outline Width. If you're using the Home Carousel or Sponsor List View with ring outlines, make sure to set a value greater than 0 in: Design > Styles > Carousel Outline Width. The default is 0, so outlines will not appear unless updated.

Speakers Carousel Setup

When adding speakers to the carousel, you can assign an outline color during setup. If you choose multiple colors, they will alternate—every other speaker will display a different outline color.

To create a Speaker Carousel:

1. Navigate to Screens > Screens > Home
2. Click Select Content
3. Click + Add New Home Screen Item
4. From the drop-down menu, select Carousel
5. Set the Type to Speaker

Title: Enter a name for your carousel. This name is for internal use only and will not appear in the app.

Type: Select Speaker from the drop-down menu to display speakers in the carousel.

Style: Choose the shape of your carousel items:

• Circle
• Square
• Rounded Square

Auto Rotate: This setting controls how the carousel behaves:

• Active – The carousel rotates automatically.
• Inactive – Attendees must manually scroll through the items.

Background Color: Select a background color from the available options under Design > App Colors.

Text Option: Choose how text will appear below or on your carousel items:

• If you select No Text, you can skip font settings.
• If you select any text option, you must also choose: Font Color and Font Size.

Outline Colors: Pick from any colors available in your app's design settings. When adding speakers to the carousel, you can assign outline colors individually.

• If you apply multiple colors, they will alternate — every other speaker will use a different outline color.

Select Content: Next, navigate to the Select Content tab to choose your speakers. Simply click on a speaker to select them—selected speakers will be highlighted in green. You can choose up to 12 speakers to display in your carousel.

Order Content: Next, go to the Order Content tab. Here, you can rearrange your selected speakers by toggling them up or down to set the order in which they will appear on the carousel.

Sponsors Outline Setup

Sponsor outlines are managed differently than speaker outlines. To assign an outline color by sponsor level:

1. Go to Settings > Sponsors
2. Click on the Level tab
3. Click the edit pencil next to the sponsor level you want to customize
4. Select a color from the "Outline Color" drop-down menu

Once you have chosen a color for each sponsor level, the selected outline colors will automatically apply to all sponsor images in that level when they appear on the Speaker screen.

Creating Your Sponsor Carousel

Now that you've assigned outline colors to each sponsor level, you're ready to create your Sponsor Carousel. These outline colors will automatically appear on your carousel.

To create the carousel, follow the same steps you used to create a Speaker Carousel, but this time, select Sponsor from the drop-down menu:

1. Navigate to Screens > Screens > Home
2. Click Select Content
3. Click + Add New Home Screen Item
4. From the drop-down menu, select Carousel
5. Set the Type to Sponsor

Title: Enter a name for your carousel. This name is for internal use only and will not appear in the app.

Type: Select Sponsor from the drop-down menu to display speakers in the carousel.

Style: Logo will be your only choice

Auto Rotate: This setting controls how the carousel behaves:

• Active – The carousel rotates automatically.
• Inactive – Attendees must manually scroll through the items.

Background Color: Select a background color from the available options under Design > App Colors.