Create a dark-themed event in 10 minutes (no CSS knowledge required)

  • Updated

Biz_Enter.png

Get started by watching the walkthrough video first and use the code and steps below as a reference when you try on your own event. We recommend you start with a test event before applying your CSS code to your "official" event.

NOTE: you can follow the instructions by the letter and use black and other colors as suggested in the video, but if you want to use your own brand color make sure to replace 'black' with your own choice.

 

 

1. Change your brand color

You can do this by choosing your Hex color code of choice (usually your company brand Hex color). You can also use this website to find the Hex code of any color you want. You can also use a 'color picker' tool in your favourite image editor.

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.

2. Change your font

Use this guide to learn how to change your event font in detail, if you require.

Below is what the CSS code will look like in the 'Custom CSS' window at the bottom of the Theme page in your event dashboard.

Screen_Shot_2020-07-28_at_4.37.44_PM__1_.png

For example:

Screen_Shot_2020-07-28_at_5.11.52_PM.png

3. Change background to darker color

Below is a list of all the boxes where you need to add your Hex color on the Theme page.

Screenshot_2021-03-13_at_13.31.24.png

  • Button Secondary Background

  • Button Toggle Selected Background (use your brand color)
  • Input Background

  • Search Background

  • Header Background

  • Sidenav Background

  • Event Body Background

  • Tabpanel Background

  • Sidenav Icon Default Background

  • Sidepanel Tab Default Background
  • Sidepanel Tab Active Background

  • Menu Background

  • Modal Header Background

  • Modal Body Background

  • Modal Footer Background

  • Card Background

  • Table Header Background

  • Message Background

Add the code below to the 'Custom CSS Field' at the bottom of the Theme window (change 'black' to 'your background color' if required)

Screen_Shot_2021-01-07_at_3.26.03_PM.png

NOTE: Please make sure to copy only the CSS code below and no extra text.

.side-panel_tab__w71zF, [class*="side-panel_tab"]{background-color: black; } 
.direct-messages_direct-messages-panel__11-CI, [class*="direct-messages_direct-messages-panel"] {background-color: black;}
.new-joiners_new-joiners__1jnid {background-color: black;}
.header_header__2VGIb, [class*="header_header"]{background-color: black;}
.more-segment-content_container__JaiWI, [class*="more-segment-content_container"] {background-color: black;}
.people_radio-button-group__XBhHu label {background-color: black; color:white;}
.speaker-card-styles_speaker-card__2Jc2t
.speaker-card-styles_small__3Zzp7{background-color: black;}
.more-segment-content_container__JaiWI, [class*="more-segment-content_container"] {background-color: black;}
.css-1siq1wa-menu {background-color: black;} [class*="tab-panel-styles_tab"] {background-color: black;}
.css-k8k90q-option:active{background-color: addyourbrandcolor;}

4. Fix waiting room

Below is the code for the waiting room, also to be added to the 'Custom CSS' box.

NOTE: Please make sure to copy only the CSS code below and no extra text.

.waiting-page_root__pgiPU, [class*="waiting-page_root"] {background-color: black; }
.stream-component_video-label__3CXws, [class*="stream-component_video-label"]{color: white;}
[class*="icon-button_button"]{background-color:black;}
[class*="waiting-card_card"], .waiting-card_card__2J2RC{background-color: black; }
.waiting-page_link-button__DonIl, [class*="waiting-page_link-button"]{color: blandcolor;}

5. Change text to lighter color

  • Text Headline Large

  • Text Headline Medium

  • Text Headline Small

  • Text Label

  • Input Text

  • Search Text

  • Sidenav Icon Default Text (you want to use slightly lighter color than the main text colour you're using)

  • Sidenav Icon Default Text Hover

  • Menu Text

  • Happening Now Card Text

  • Button Toggle Default

  • Button Toggle Selected

Add the code below to the 'Custom CSS Field' at the bottom of the Theme window (change 'white' to 'lighter color you wish to use' if required)

Screen_Shot_2021-01-07_at_3.26.03_PM__1_.png

NOTE: Please make sure to copy only the CSS code below and no extra text

.layout_layout-container__1idYN span, .layout_layout-container__1idYN div, .layout_layout-container__1idYN p {color: white;}
[class*="event-settings-menu-styles_label"] {color: white;}
[class*="schedule-card_content-container"] h3{color: white;}
.test-id-schedule-tab-content h3, .test-id-schedule-tab-content p, .test-id-schedule-tab-content h4{color: white !important;}
[class*="info-text-styles_info"] {color: white;}
.test-id-body{color: white !important;}
[class*="attendee-list-item_headline"], [class*="profile-header_profile-byline"], [class*="profile-header_about"], [class*="chat-conversation-preview-component_name"], [class*="chat-conversation-preview-component_date"], [class*="chat-conversation-preview-component_message"] {color:white;}
[class*="waiting-card_description"], [class*="waiting-page_time-until-event-starts"], [class*="waiting-page_message"] {color: white;}
.waiting-card_card__2J2RC h2, .waiting-card_hosted-by__2wssF h3, .waiting-card_hosted-by__2wssF p {color: white;}
.add-to-calendar-styles_service-link__3lD9E, [class*="add-to-calendar-styles_service-link"]{color: white;}
.device-selector_device-list__2tVnI select{color: white;}
.check-box_tick-box-text__1la-0, [class*="check-box_tick-box-text"]{color:white;}
.meeting-created-notification-styles_created-at__2Tyw9{color: white;}
.schedule-menu-styles_time-row__3OLh1 h3 {color: white;}
.hfPoTr {color: white;}

6. Change icon colors to be lighter

  • Sidenav Icon Default
  • Sidenav Icon Default Hover
  • Icon fill

7. Change gray to be lighter (border, hover)

  • Gray 200 to rgba(255, 255, 255, 0.15)
  • Gray 300 to rgba(255, 255, 255, 0.19)

8. Adjust your brand colour

If your brand color is light, you might want to increase opacity — play with opacity until you find the right color.

  • Primary 100
  • Primary 200
  • Primary 300
.new-joiners_new-joiners-preview__ygCaf:hover{background-color: YOURPRIMARY200or300;}
.schedule-menu-styles_schedule-menu-item__1YY92:nth-child(odd) {background-color: YOURPRIMARY200or300}

 

Nov-06-2020_16-46-39__1_.gif

9. Optional changes

Change Tags

.expo-styles_tags__3vmmK button{background: addbackgroundcolor; color: addfontcolor; border: 0.0625rem solid addbordercolor}
.expo-styles_tags__3vmmK button:hover {background-color: addbackgroundcolor;}
.sessions-feature_tags__oJnEq button{background: addbackgroundcolor; color: addfontcolor; border: 0.0625rem solid addbordercolor;}
.sessions-feature_tags__oJnEq button:hover {background-color: addbackgroundcolor;}

 

Change networking background image

.networking-page_container__2Qbgv, [class*="networking-page_container"]{background: url(addy your image adress here);}
.background-image-card_background-image__2on1T, [class*="background-image-card_background-image"], .background-image-card_overlay__1sDLk, [class*="background-image-card_overlay"] {display: none;}

 

Fit stage banner image

.video-poster-styles_video-poster__YQZ-b, [class*="video-poster-styles_video-poster"] {background-size: contain}

 

Change individual Schedule card's background in reception

Make sure to change nth-child(number of card)

.schedule-card_card-container__21mQL:nth-child(1) {background-color: addyourcolor;}

 

Change stage background color (multi stages)

//Background of the stage (make sure to get rid of this message)
.stage-list_stage-list-page-container__2t5tk, [class*="stage-list_stage-list-page-container"]{background-color: addyourcolor;}
//Background of the stage cards (make sure to get rid of this message)
.stage-list_stage-card__1MpaB, [class*="stage-list_stage-card"]{background-color: addyourcolor;}

 

Get rid of happening now banner

.custom-css--happening-now {display: none;}

 

Change reception background into an image background

.reception-page_container__1YMHJ, [class*="reception-page_container"] {background-image: url(addyourimageadresshere);}

 

Remove booth card shadow

.vendor-card_vendor-card-medium__t9Bzw, .vendor-card_vendor-card-large__2IaPD, .vendor-card_vendor-card-small__1IsYy{ background-blend-mode: color;}

 

Additional content container background

.more-segment-content_container__JaiWI, [class*="more-segment-content_container"] {background-color: add your background color;}

 

Fit your logo in the waiting room and reception

.reception-header_event-thumbnail__fGkmy, .waiting-card_thumbnail__11UMc{object-fit: contain; background-color: white; }

 

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

Was this article helpful?