Change colors in the platform using custom CSS

  • Updated


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



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



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.



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 in case you have questions or need assistance.

Was this article helpful?