Advanced Branding: Creating a Highlighted Theme

  • Updated

organizers_only.jpgimage6.png

image14.png

If you would like to align your Hopin event venue colors with your branding, you can follow this guide to create a highlighted theme without spending too much time. To apply this theme you will need to change several theme colors and add custom CSS codes.

With a Highlighted theme you can replace the Hopin default color across the event venue. It also allows you to use your brand color as a background for the side navigation menu on the left and the activity panel header on the right. This is an example of how it could look:

image2.png

How to find the HEX Color Code

Before you get started, you will need to know the HEX codes for your brand's colors. If you don’t know the HEX codes, you can use this online color picker upload your logo or image and it will generate the color codes for you.

Changing the primary color

Go to your Event Dashboard > Setup > Theme. You will see a header named "Color". In the field titled "Primary color" input the HEX code (starting with the # symbol) of your preferred brand color.

Note: it is important that you input the HEX code here and not an RGB value or the name of a color (i.e. "blue" or "red") as this could cause an error. 

Don’t forget to click “Save” to apply the changes. 

image5.gif

Tip: Check the contrast for the best results

For this Highlighted theme, to make sure that your paragraphs and headlines are readable, you can use this online tool to check the contrast between your chosen color and the white background. Please, remember that it’s important to pass AA standards for Large Text and Graphical Objects and User Interface Components.

You can learn more about readability and accessibility in the Web Content Accessibility Guidelines (WCAG).

Changing the theme colors

Next, click Show advanced settings and change the following color values; input the HEX code of your brand color and the mentioned color names or RGBA codes.

Text Box

 Color Value

Sidenav Background

your brand color

Sidenav Icon Default

rgba(255,255,255, 0.9)

Sidenav Icon Default Hover

white

Sidenav Icon Default Background

your brand color

Sidenav Icon Default Background Hover

rgba(255,255,255, 0.3)

Sidenav Icon Default Text 

rgba(255,255,255, 0.9)

Sidenav Icon Default Text hover

white

Sidenav Icon Active

white

Sidenav Icon Active Hover

white

Sidenav Icon Active Background

rgba(255,255,255, 0.3)

This is how the theme colors will look when editing them within your event. To save time when looking for the appropriate text boxes, you can use command + F (for Mac) or Ctrl + F (for Windows) to search the web page.

image1.png

For more information on what these settings apply to, you can check out our Introduction to Advanced Branding guide for more of an overview.

Adding custom CSS code

Next, scroll all the way down and add the following code into the Custom CSS field.

image4.png

Note: “#HEXCODE” needs to be replaced with your main brand color HEX code that you found earlier. 

/*sidepanel background*/
.test-id-panel-row, .side-panel_panel-header-wrapper__3TdDN, .side-panel_tab__w71zF{background-color: #HEXCODE; color: white; fill: white;}
.side-panel_tab__w71zF.side-panel_active__1kHlI, .side-panel_tab__w71zF:hover {background-color: rgba(255,255,255, 0.3); color: white;}

/*Icon*/
.side-panel-header_buttons-container__uMiUR div button svg fill path, .direct-messages-icon-styles_icon__2iXXJ svg path, .sc-hOqqkJ svg path, .notification-bell-styles_notification__nUErE svg path, .side-panel_collapse__MPQE3 svg path, .side-panel_collapse__MPQE3 svg rect{fill: white!important;}
.side-panel-header_buttons-container__uMiUR .sc-jUEnpm svg path, .event-settings-menu-styles_menu-button___-SMk svg path, .side-panel_panel-tab-icon__jU487 svg path{fill: white!important;}
.side-panel-header_online__3P6Pr span svg path{fill: white;}
.side-panel-header_online__3P6Pr span {color: white;}
.side-panel-header_buttons-container__uMiUR button svg path {fill: white;}
.side-panel_collapse__MPQE3 {background-color: transparent;}

/*icon hover*/
.side-panel_collapse__MPQE3:hover, .direct-messages-icon-styles_icon__2iXXJ:hover, .notification-bell-styles_notification__nUErE:hover, .side-panel-header_buttons-container__uMiUR button:hover {background-color: rgba(255,255,255, 0.3);}
.user-menu_avatar-wrapper__2uuRv:hover button {background-color: transparent;}

/*waiting room link*/
.waiting-page_link-button__DonIl, [class*="waiting-page_link-button"]{color: #HEXCODE;}

/*Sidepanel collapsed*/
.side-panel_collapsed__3Rg5s .side-panel_tab__w71zF {background-color: #HEXCODE;}
.side-panel_collapsed__3Rg5s .side-panel_tab__w71zF:hover {background-color: rgba(255,255,255, 0.3);}

Don’t forget to click Save to apply the changes. 

Once the changes are saved, click on the Preview event button in the top right corner to preview your event to see how it will look with a Highlighted theme applied.

Hopin is always changing!

The Hopin platform is frequently updated so the suggested custom CSS codes may become outdated. We are doing our best to keep this guide up to date. However, if after following all of the steps and applying this theme, you notice that some colors are not working, please do not hesitate to reach out to us at support@hopin.com 

We also recommend previewing the event once again at least 1 week before the start date. This leaves enough time to correct mistakes and to apply the final edits, if needed.

Other themes

If you're looking for something a little different than this, we recommend checking out our guides on Simple theme events and Dark theme events. 

Feel free to reach out to us at support@hopin.com in case you have a have a specific CSS request or need any assistance creating your event. 

Was this article helpful?