How to add a custom theme to your event in the Community?

 

Adding a custom theme or multi-color background to the event allows organizers to enhance the look and feel as well as the brand value of the event. Custom theme color can be based on the event branding guidelines and this feature also allows to add a background image to the event.

 

Note: If you are unable to find this option on your dashboard, please get in touch with your CXM as this feature is plan-specific

 

Theme Elements:

  1. Primary Color: It is the color theme that appears on all the card components used in various sections.

  2. Primary Font Color: It is the font color that is applied to the community portal.

  3. Accent Color: It refers to the color theme used to accentuate key parts of the UI like button and icon highlights.

  4. Secondary Font Color: It is the color that appears on all the icons on the platform.

     

    Screenshot_2022-12-07_at_20.08.02.png

     

 

How to configure a custom theme for the event?

  • Open dashboard > Event > Open Brand Your Event > Themes > All Themes.

  • Select the default theme and click on ‘Edit’. It will create a copy of the existing theme.

Screenshot_2022-12-07_at_20.08.57.png

  • Provide the details like Theme Name, Primary Color, Primary Font Color, Accent Color, Secondary Font Color, and Background theme color or image.

     

    Screenshot_2022-12-07_at_20.10.03.png

 

  • There are two main actions. They are Apply and Reset.

  • Apply - The system will prompt the organizer to apply the new theme. It will directly activate the new theme to the community portal as shown below.

  • Reset - It will appear only when the changes are made in the Edit Theme Copy or Create New Theme.
    Reset will undo all the changes and the values will default to the previous state when this Edit Theme Copy or Create New Theme is opened.

  • Back Button (← ) - It will prompt the organizer to discard or save the changes.

  • Once the theme is applied, when the dashboard admin clicks on 'All Themes'. Under Custom Theme, the current theme label is displayed on the recent theme which is applied.

 

Create a new theme and apply a theme:

  • The admin needs to go to Brand Your Event > Themes > All Themes. Click on 'New Theme'.

  • By default, we will load the Hubilo theme in the New theme. Now the Organizer can customize.

  • Edit the Theme Name and set the colors. Once the organizer clicks on any color field, choose the color from the color picker which has solid as shown below.

 

  • Provide the details like Theme Name, Primary Color, Primary Font Color, Accent Color, Secondary Font Color, and Background theme color or image.

  • Every Color theme has an info(i) icon in which a GIF is available to make sure that the organizer is able to understand how changing the color of the component will affect and at which place.

  • If the Background theme is selected as Image then provide the Image Upload and Crop & Save options. Once the image is uploaded, it is shown on the instant preview as shown below. You can configure the opacity, vignette, and blur.

Screenshot_2022-12-07_at_20.12.58.png
  • Apply - It will directly activate the new theme to the community portal as shown below.

Screenshot_2022-12-07_at_19.29.51.png
  • Once the theme is applied. When the Organizer clicks on 'All Themes'. Under Custom Theme, the current theme label is displayed on the recent theme which is applied.

  • Reset - It will appear only when the changes are made in the Edit Theme Copy or Create New Theme. Reset will undo all the changes and the values will default to the previous state when this Edit Theme Copy or Create New Theme is opened.