Search

Change colors in the platform using custom CSS

  • Updated

Biz_Enter.png

You can overwrite some of the CSS classes that Hopin has predefined to change the colours and brand your event!

Note: This feature is only recommended for orgs that have a member of the team who is familiar with CSS code. The Hopin team are unable to help with design and branding requests. 
Note: Custom CSS works in American English (e.g.: color, not colour).

1. Inside your event, right click the component you’d like to edit. Select “Inspect.”

Screen_Shot_2020-07-28_at_5.24.51_PM.png

 

2. In the pop-up window displaying HTML elements, select and copy the text immediately following <button class="

Screen_Shot_2020-07-28_at_5.50.47_PM.png

3. Add a period, then paste the copied HTML element, followed by the custom CSS code.

The auto generated tags at the end of the class name (in this example: __FHok6) sometimes wouldn't work for duplicated events. We'd suggest using [class*="..."] without __FHok6. If [class*=""] doesn't work, try it with the auto generated tag as well.

For this example the CSS code to add is:

.form-button-styles_button_FHok6 {background-color: orange;}

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

image3.gif

5. Next, click on Show advanced settings and paste the CSS code you found in step 2 and 3 in the Custom CSS field right at the bottom of the Theme page.

Screenshot_2021-03-13_at_10.53.13.png

 

5. Click Save. Check out your new feature by clicking Preview at the top right of your browser.

Dynamic class names

There are a few event areas and elements (e.g. Replay, Networking, etc.) that have dynamic class names. Because of that we are not able to provide event organizers with unified custom CSS codes that would work for every event for now. If you’re comfortable with using CSS you can go ahead and customize them for your event. 

Hopin is always changing!

Please kindly note that Hopin platform is frequently updated so custom CSS codes may no longer work after a while. We are doing our best to keep our guides updated. However, if you notice that some codes or colors are not working, do not hesitate to reach out to us at support@hopin.com    

We recommend previewing the event once again at least 1 week before it starts. This leaves enough time to correct mistakes and to make any final changes, if needed.

You can also duplicate the event to make a test run and to check how the colors look in the targeted areas such as the highlighted scheduled segment, the "Happening Now" banner, or the activity panel. 

 

 

Was this article helpful?