Search

Introduction to Advanced Branding

  • Updated

Biz_Enter.png

If you want to completely customize your event's color palette, add advanced branding to your Hopin contract (contact your sales representative if you don't have this included already).

Once deep branding is available for your Organization, navigate to the dashboard of the event you want to brand, select Setup > Theme, set your primary colour and hit Save. After that, you can select Show advanced settings which will open up the additional options for customization.

Note: if you do not set your primary colour, the other settings will not work.

theme.png

Have a look below at the various platform elements for which you can change the color, and their corresponding HEX codes.

Note: when adding a new Hex color code make sure to add the complete code including the # in front of it, for example #000000 for black. If the # is missing it can cause unexpected results in the Hopin interface.

Progress Timer

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.46.17_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.46.28_AM.png

 

Tooltip

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.47.11_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.47.23_AM.png

 

Input

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.47.36_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.47.47_AM.png

 

Search

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.48.02_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.48.13_AM.png

 

Icons

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.48.27_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.48.40_AM.png

 

Button (Primary)

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.49.31_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.49.41_AM.png

 

Button (Secondary)

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.48.59_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.49.20_AM.png

 

Message (Chat)

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.50.26_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.50.34_AM.png

 

Happening Now Card (Reception Page)

How this feature looks in Hopin

Screen_Shot_2020-07-28_at_9.55.12_AM.png

Corresponding HEX codes

aa1e0153d5c5e27e507d93a9569e0e6c.png

 

Button Toggle

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.50.44_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.50.53_AM.png

 

Card

How this feature looks in Hopin

Screen_Shot_2020-10-23_at_8.08.58_PM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.52.06_AM.png

 

Header

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.52.29_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.52.42_AM.png

 

Sidebar

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.53.15_AM.png

 Corresponding HEX codesScreen_Shot_2020-07-14_at_9.53.33_AM.png

 

Menu

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.53.53_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.54.04_AM.png

 

Schedule Table

How this feature looks in Hopin

Screen_Shot_2020-10-23_at_8.10.09_PM.png

Corresponding HEX codes

 Screen_Shot_2020-10-23_at_8.11.02_PM.png

 

Modal

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.54.51_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.55.05_AM.png

 

Sidepanel (or Tab panel)

How this feature looks in Hopin

Screen_Shot_2020-10-23_at_8.18.48_PM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.56.18_AM.png

 

Text Link

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.56.44_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.57.03_AM.png

 

Text Label (text in 12px)

How this feature looks in Hopin

Screen_Shot_2020-10-23_at_8.13.07_PM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.56.56_AM.png

 

Text Headline Small (username, table header, Session title)

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.57.21_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.57.34_AM.png

 

Text Headline Medium (event title in header, titles in Reception)

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.57.59_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.58.10_AM.png

 

Text Headline Large (event title)

How this feature looks in Hopin

Screen_Shot_2020-07-14_at_9.58.26_AM.png

Corresponding HEX codes

Screen_Shot_2020-07-14_at_9.58.36_AM.png

 

Button & Input Border Radius (Edge Sharpness)

NOTE: To change the button border radius, you must input a custom HEX code in the Primary 400 color.

Default input border radius (4px)

Screen_Shot_2020-07-28_at_6.19.57_PM.png

Customized input border radius (64px)

    Screen_Shot_2020-07-28_at_6.19.12_PM.png

Corresponding HEX codes Screen_Shot_2020-07-28_at_5.56.04_PM.png

Default button border radius (4px)

Screen_Shot_2020-07-28_at_5.58.19_PM.png

Customized button border radius (64px)

Screen_Shot_2020-07-28_at_6.19.28_PM.png

 

 

 

Was this article helpful?