If you would like to align your RingCentral event venue colors with your own branding, you can follow this guide to create a new sophisticated theme for your event.
Navigate to the Event Dashboard > Setup > Branding page. 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, you will need to select a different color preset in the dropdown menu 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" mark 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 from the colors you’ve set. To do that, click Create new next to the Color presets.
Add a name for the preset and to click Save new preset to save your settings.
To modify your custom preset, you can adjust the colors as well as custom CSS and then 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 on the bin icon next to the theme 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 to your branding, you can modify the following 3 color fields: primary color, background color and text color.
You can choose to either enter a HEX color code or select a color using the color picker for each of the color fields. To use the color picker, click on the colored circle in the global color box and use the slider at the bottom to choose a hue and find a value. The HEX code of the color you select will automatically populate in the box.
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.
If you're looking for a way to customize more colors in your event, 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
-
Tabpanel Background
How this feature looks in RingCentral Events
Corresponding color fields
Message (Chat)
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)
Don’t forget to click Save to apply the changes.
Custom CSS
If you have a team member familiar with HTML and CSS, or you have a dedicated web designer, you can also change colors, fonts, margins of different elements, or even hide elements with the help of custom CSS. CSS codes need to be added to the Custom CSS field, which you can find by clicking Show advanced settings and scrolling all the way down.
- There are elements that have dynamic class names that change depending on the user experience flow. Whenever possible, we recommend avoiding targeting those and finding creative ways to target other HTML selectors that don't change. It often involves using combinator and attribute selectors.
- Another thing to keep in mind is that RingCentral Events has frequent releases and implements new features which may cause changes in the 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 widow that give you an idea of how your event looks like with the selected colors applied. This works for both Basic and Advanced settings.
Tip. If you’re on a small screen, you’ll see arrows on the right side of the Theme page, indicating that the Live preview is tucked in. For the best user experience we advise increasing 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, you will need to click on the Preview event button in the top right corner to preview your online event venue and check how it looks with custom CSS applied.