Changing event colors and color theme

  • Updated

organizers.jpg

To align your event venue colors with your own branding, you can create a new sophisticated 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.

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.

Important: The option to select a color theme and customize colors is not available for the legacy Starter plan.

Color theme

The Classic RingCentral color preset is selected by default. To apply a different color theme to your event, under Color presets, select a different color preset in the drop-down 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. 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" 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:

  1. Next to Color presets, click Create new.
  2. 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.

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

    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)

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. 

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

 

 

Was this article helpful?