To align your event venue colors with your own branding, you can create a new theme for your event. This guide explains how to change the color theme and color settings, create your own color preset that can be used across multiple events, and apply custom CSS.
Need a hands-on learning experience?
Check out our interactive click-through guide on branding settings. Perfect for visual learners and those who want to try before they apply. Click here for the full-size screen.
Branding settings
Navigate to Event Dashboard > Setup > Branding. Here, along with the option to upload your logo and event banner, you will be able to select a color theme and change color settings. Select Show advanced settings to open up the full list of event colors as well as the Custom CSS field.
Color theme
The Classic RingCentral color preset is selected by default. To apply a different color theme to your event, select a different color preset in the Color presets drop-down and click Save. There are 6 color presets available: Classic, Dark Theme, Forest Green, Sunset Haze, Ocean Blue and Moon Dust.
Creating a custom color theme
Once you start customizing the color setting and applying changes, you'll see a red "modified" tag next to the selected theme. If you're happy with the result and want to reuse the created custom theme in other events under your Organization, you can create a new preset based on the selected colors:
- Next to Color presets, click Create new.
- Add a name for the preset and click Save new preset.
To modify your custom preset, you can adjust the colors including custom CSS and click Save & Overwrite Preset. This action will apply the changes to your event as well as overwrite your custom preset.
To delete your custom preset, click the Bin icon next to the preset name. Your event branding will not be affected, but the preset will be removed from your list of presents across all of your events.
Color settings
To quickly adjust the selected theme, under Color settings, you can modify the following 3 color fields: primary color, background color and text color.
Enter a HEX color code or select a color using the color picker. To use the color picker, under the selected color field, click the colored circle and use the slider to choose a hue and find a value. The HEX code of the color you select will automatically populate in the box. Don’t forget to click Save to apply the changes.
If the contrast between the selected colors is too low and doesn't meet the Web Content Accessibility Guidelines (WCAG), you will see a warning (as shown on the screenshot above). Although you will still be able to save the selected colors, it is recommended to increase the contrast to ensure all of your attendees can easily follow the interface.
To customize more colors, click Show advanced settings to open up the full list. Have a look below at the various platform elements for which you can change the color, and their corresponding HEX codes.
-
At the beginning, you'll find the list of global colors (primary colors, gray colors, black and white) that define most of your component colors. By changing this set of colors, you can customize your event and define the rest of the component colors.
-
Left side navigation menu
How this feature looks in RingCentral Events
Corresponding color fields
-
Header background
How this feature looks in RingCentral Events
Corresponding color fields
Event body background
How this feature looks in RingCentral Events
Corresponding color fields
Video body
How this feature looks in RingCentral Events
Corresponding color fields
Session cards
How this feature looks in RingCentral Events
Corresponding color fields
-
Right panel background
How this feature looks in RingCentral Events
Corresponding color fields
Right panel tabs
How this feature looks in RingCentral Events
Corresponding color fields
Message (chat)
How this feature looks in RingCentral Events
Corresponding color fields
-
Button (primary)
How this feature looks in RingCentral Events
Corresponding color fields
Button (secondary)
How this feature looks in RingCentral Events
Corresponding color fields
-
Happening now card (Reception page)
How this feature looks in RingCentral Events
Corresponding color fields
Schedule table
How this feature looks in RingCentral Events
Corresponding color fields
-
Menu
How this feature looks in RingCentral Events
Corresponding color fields
Icons
How this feature looks in RingCentral Events
Corresponding color fields
-
Text headline large (event title)
How this feature looks in RingCentral Events
Corresponding color fields
Text headline medium (event title in header, titles in Reception)
How this feature looks in RingCentral Events
Corresponding color fields
Text headline small (username, table header, Session title)
How this feature looks in RingCentral Events
Corresponding color fields
Text label (text in 12px)
How this feature looks in RingCentral Events
Corresponding color fields
Text link
How this feature looks in RingCentral Events
Corresponding color fields
-
Please note that this set of color fields have been rarely used. If the usage remains low, the fields will be removed in the upcoming releases.
InputHow this feature looks in RingCentral Events
Corresponding color fields
Tooltip
How this feature looks in RingCentral Events
Corresponding color fields
Modal
How this feature looks in RingCentral Events
Corresponding color fields
-
Button & input border radius (edge sharpness)
Default input border radius (4px)
Customized input border radius (64px)
Corresponding fields
Default button border radius (4px)
Customized button border radius (64px)
Custom CSS
If you have a team member familiar with HTML and CSS, or a dedicated web designer, you can also change colors, fonts, margins of different elements, or even hide elements with the help of custom CSS. Add the code to the Custom CSS field, which you can find by clicking Show advanced settings and scrolling all the way down.
- Some elements have dynamic class names that change depending on the user experience flow. Whenever possible, avoid targeting those and find alternative ways to target stable HTML selectors (e.g. combinator and attribute selectors).
- RingCentral Events regularly releases new features and fixes, which may cause changes to the existing HTML code. If you're customizing your upcoming event far in advance, we recommend reviewing your event a couple of days before it goes live to make sure the codes you've added still work.
Live preview
On the right-hand side of the Branding page, you can see a live preview window that gives you an idea of how your event will look with the selected colors applied.
Tip. If you’re on a small screen, you’ll see arrows on the right side of the Branding page, indicating that the Live preview is tucked in. For the best user experience, increase your window size, so you can see the changes as you’re applying them, instead of opening a live preview window separately.
Note: The Live preview doesn’t consider custom CSS when rendering. If you are adding custom CSS, once the changes are saved, preview your online event venue and check how it looks with custom CSS applied.