Change colors in the platform using custom CSS

  • Updated

Biz_Enter.png

You can overwrite some of the CSS classes that Hopin has predefined. Fundamental knowledge of CSS is recommended.

NOTE: Hopin's 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. In the Event Dashboard navigate to Setup > Theme click on 'Show advanced settings' and paste the CSS code above 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.

 

Feel free to reach out to us at support@hopin.com in case you have questions or need assistance.

Was this article helpful?