How to change event colors and color theme

  • Updated

organizers.jpgpre-event.jpg

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.

Note: Please kindly note that the option to select a color theme and customize colors is available for RingCentral Events Business and Enterprise plans only. Existing Growth plan customers (this plan is currently no longer available for sale) are also able to change the following 3 color fields: primary color, background color and text color.

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.

Warning: Switching to a different color theme resets all color settings including the custom CSS each time. It will not be possible to access the applied customization when switching back to the theme used previously unless you save it as a custom color preset. 

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.

Tip. If you're replicating your brand's color scheme, you may need to know the exact HEX codes for your brand's colors. If you don’t know the HEX codes, you can use this online color picker to upload your logo or image and it will generate the color codes for you. 
Note: Adding RGB values or color names (i.e. "blue" or "red") may not work. When adding a new HEX color code, make sure to add the complete code including the # in front of it, for example #FF0000 for red. If the # is missing, it can cause unexpected results in the RingCentral Events 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

    Screen_Shot_2020-07-14_at_9.52.29_AM.png

    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

    Screen_Shot_2020-07-14_at_9.48.27_AM.png

    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.
    Input

    How this feature looks in RingCentral Events

    Screen_Shot_2020-07-14_at_9.47.36_AM.png

    Corresponding color fields

    Tooltip

    How this feature looks in RingCentral Events

    Screen_Shot_2020-07-14_at_9.47.11_AM.png

    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. 

Notes:
  • 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.

 

 

Was this article helpful?