Erweitertes Branding: Erstellen eines dunklen Themas

  • Aktualisiert

7.2.jpgorganizers_only.jpg

image13.png

Wenn Sie die Farben Ihren Hopin-Event an Ihr Branding anpassen möchten, können Sie dieser Anleitung folgen, um ein dunkles Thema zu erstellen. Es kann einige Zeit dauern, dieses Thema anzuwenden, da Sie eine Reihe von Themenfarben ändern, benutzerdefinierte CSS-Codes hinzufügen und, falls für Ihre Veranstaltung zutreffend, an der weiteren Anpassung einiger spezifischer Bereiche arbeiten müssen.

Das dunkle Design ermöglicht es, die Hopin-Standardfarbe im gesamten Veranstaltungsort zu ersetzen und eine dunkle Farbe für alle Hintergründe zu verwenden. Dies ist ein Beispiel dafür, wie es aussehen wird:

image9.png

Ändern der Theme-Farben

Bevor Sie beginnen, müssen Sie die HEX-Codes für die Farben Ihrer Marke kennen. Wenn Sie die HEX-Codes nicht kennen, können Sie diesen Online-Farbwähler verwenden, um Ihr Logo oder Bild hochzuladen, und er generiert die Farbcodes für Sie.

Ändern der Primärfarbe

Gehen Sie zu Ihrem Event-Dashboard > Setup > Thema. Sie sehen eine Kopfzeile namens "Color". Geben Sie im Feld "Primärfarbe" den HEX-Code (beginnend mit dem #-Symbol) Ihrer bevorzugten Markenfarbe ein.

Hinweis: Achten Sie darauf, Ihre Farbwerte hinzuzufügen; „#HEXCODE“ muss durch den HEX-Code Ihrer Hauptmarke ersetzt werden.

Vergessen Sie nicht, auf Speichern zu klicken, um die Änderungen zu übernehmen.

image3.gif

Tipp: Überprüfen Sie den Kontrast für beste Ergebnisse

Um sicherzustellen, dass Ihre Absätze und Überschriften lesbar sind, können Sie für dieses dunkle Theme dieses Online-Tool verwenden, um den Farbkontrast zwischen Ihrer Markenfarbe und jedem Schwarz zu überprüfen. Bitte denken Sie daran, dass es wichtig ist, den AA-Standard für große Text- und Grafikobjekte und Benutzeroberflächenkomponenten zu erfüllen.

Weitere Informationen zur Lesbarkeit und Zugänglichkeit finden Sie in den Leitlinien für die Zugänglichkeit von Webinhalten (Web Content Accessibility Guidelines – WCAG).

Ändern der Designfarben

Weitere Informationen zu Lesbarkeit und Barrierefreiheit finden Sie in den Richtlinien zur Barrierefreiheit von Webinhalten (WCAG).

Hinweis: Um den HEX-Code Ihrer Markenfarbe in RGBA umzuwandeln, können Sie dieses Online-Tool verwenden. Sie müssen dies tun, um Ihrer Markenfarbe eine andere Deckkraft hinzufügen zu können (die letzte Komponente steht für Deckkraft: Wenn Ihr RGBA-Code z. B.

Anstelle von reinem Weiß und reinem Schwarz können Sie für Ihre Veranstaltung auch eine andere helle und dunkle Farbe verwenden. Wir empfehlen dringend, für Ihren Text und Ihre Überschriften bei reinem Weiß zu bleiben, aber Sie können auch Dunkelgrau oder Dunkelblau anstelle von reinem Schwarz wählen.

Textbeschriftung

Farbwert

Primär 100

RGBA-Code Ihrer Markenfarbe

z.B. rgba(128, 0, 128, 0,2)

⚠️Verwenden Sie 0,2 (20%) für Deckkraft

Verwenden Sie dieses Online-Tool, um HEX-Code in RGBA zu konvertieren

Primär 200

RGBA-Code Ihrer Markenfarbe

z.B. rgba(128, 0, 128, 0.5) 

⚠️Verwenden Sie 0,5 (50%) für die Deckkraft

Verwenden Sie dieses Online-Tool, um HEX-Code in RGBA zu konvertieren

Primär 300

RGBA-Code Ihrer Markenfarbe

z.B. rgba(128, 0, 128, 0.3) 

⚠️Verwenden Sie 0,3 (30%) für die Deckkraft

Verwenden Sie dieses Online-Tool, um HEX-Code in RGBA zu konvertieren

Grau 100

RGBA (255,255,255,0.12)

Grau 200

RGBA (255,255,255, 0.15)

Grau 300

RGBA (255,255,255, 0.19)

Grau 600

Weiß

Grau 650

Weiß

Grau 700

Weiß

Textüberschrift groß

Weiß

Textüberschrift mittel

Weiß

Textüberschrift klein

Weiß

Suchtext

Weiß

Schaltfläche sekundärer Hintergrund

Schwarz

Schaltfläche Standard umschalten

Weiß

Schaltfläche Standardhintergrund umschalten

RGBA-Code Ihrer Markenfarbe

z.B. rgba(128, 0, 128, 0.25) 

⚠️Verwenden Sie 0.5 (50%) für die Deckkraft

Verwenden Sie dieses Online-Tool, um HEX-Code in RGBA zu konvertieren

Schaltfläche Toggle ausgewählt

Weiß

Eingabetext

Weiß

Eingabehintergrund

Schwarz

Hintergrund suchen

Weiß

Menühintergrund

Schwarz

Header-Hintergrund

Schwarz

Sidenav-Hintergrund

Schwarz

Hintergrund des Veranstaltungskörpers

Schwarz

Tabpanel-Hintergrund

Schwarz

Sidenav Icon Standardhintergrund

Schwarz

Sidenav Icon Standardtext

Weiß

Sidenav Icon Standardtext Hover

Weiß

Sidepanel Tab Standardhintergrund

Schwarz

Sidepanel Tab Aktiver Hintergrund

RGBA-Code Ihrer Markenfarbe

z.B. rgba(128, 0, 128, 0.25) 

⚠️Verwenden Sie 0.5 (50%) für die Deckkraft

Verwenden Sie dieses Online-Tool, um HEX-Code in RGBA zu konvertieren

Menütext

Schwarz

Menütext

Weiß

Modaler Header-Hintergrund

Schwarz

Modaler Körperhintergrund

Schwarz

Modaler Fußzeilenhintergrund

Schwarz

Kartenhintergrund

Schwarz

Hintergrund der Tabellenüberschrift

Schwarz

Nachrichtenhintergrund

Schwarz

Was passiert gerade Kartentext

Weiß

Titel der Zeitplankarte

Weiß

Titel der Zeitplankarte Highlights

Weiß

So sehen die Theme-Farben aus, wenn Sie sie in Ihrem Event bearbeiten. Um Zeit bei der Suche nach den entsprechenden Textfeldern zu sparen, können Sie die Webseite mit command + F (für Mac) or Ctrl + F (für Windows) durchsuchen.

image8.png

Weitere Informationen dazu, wofür diese Einstellungen gelten, finden Sie in unserem Leitfaden Einführung in das erweitertes s Branding, um einen weiteren Überblick zu erhalten.

Benutzerdefinierten CSS-Code hinzufügen

Scrollen Sie als Nächstes ganz nach unten und fügen Sie den folgenden Code in das Feld Benutzerdefiniertes CSS ein.

image4.png

Klicken Sie als Nächstes auf erweiterte Einstellungen anzeigen und ändern Sie die folgenden Farbwerte; Geben Sie den HEX-Code Ihrer Markenfarbe und die genannten Farbnamen oder RGBA-Codes ein.

Wenn Sie für Ihre Veranstaltung eine andere helle und dunkle Farbe anstelle von reinem Weiß und reinem Schwarz verwenden, ersetzen Sie die Farbwerte „schwarz“ und „weiß“ durch Ihre Farbcodes.

Es kann einfacher sein, Befehl + F (für Mac) oder Strg + F (für Windows) zu verwenden, um die erforderlichen Werte zu finden und zu ersetzen.

/* change backgrounds */
body{background-color: black;}
.str-chat__main-panel, .chat-stream-input_container__33zut, .chat-stream-input_container__33zut textarea {background-color: transparent;}
.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{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;}
.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-1siq1wa-menu{background-color: black;}
.schedule-menu-styles_schedule-menu-item__1YY92:nth-child(odd) {background-color: rgba(255, 255, 255, 0.15);}
.tab-panel-styles_header__3Rcee button:hover { background-color: rgba(255, 255, 255, 0.15);}
.ask-question_wrapper__11YVX {background-color: black;}
.question-action-menu_panel__11Dql {background: linear-gradient(90deg,hsla(0,0%,100%,0),black);}
.question-action-menu_button__106fU, .question-action-menu_reply-button__2aQQh{background-color: black;}
.new-layout, .new-layout .header, .new-layout .card, .new-layout .tabs{background-color: black;}
.new-layout .button{color: black;}
.speaker-card-styles_speaker-card__2Jc2t{background-color: black;}
.expo-styles_tags__3vmmK button{background: black; color: white; border: 0.0625rem solid rgba(255, 255, 255, 0.15)}
.expo-styles_tags__3vmmK button:hover {background-color: rgba(255, 255, 255, 0.2); color: white;}
.sessions-feature_tags__oJnEq button{background: black; color: white; border: 0.0625rem solid rgba(255, 255, 255, 0.15);}
.sessions-feature_tags__oJnEq button:hover {background-color: rgba(255, 255, 255, 0.2); color: white;}
.video-session-container_icon__91nfx{background-color: rgba(255,255,255, 0.2);}
.circle-icon-styles_container__3PRpE{background-color: rgba(255,255,255, 0.2);}
.answer_panel__6KP71{background-image: linear-gradient(90deg,hsla(0,0%,100%,0),black);}
.answer_button__3CyLH{background-color: rgba(255,255,255, 0.2);}
.schedule-meeting-modal_title__3q1df input{background-color: black; color: white; border: .0625rem solid rgba(255,255,255,0.2);}
.hpn-TextField__Input, .hpn-TextArea__TextArea {color: white !important; border: 1px solid rgba(255,255,255, 0.2); background-color: black;}
.create-modal_field-wrapper__2gS-W div {background-color: black !important; color:white !important;}

/*Reporting*/
.modal_modal-body__c1puk label {background-color: black;}

/*chat*/
.chat-stream-input_container__33zut button:hover, .fuYlDK:disabled {background-color: rgba(255, 255, 255, 0.18) !important; }
.chat-stream-message_chat-message__2xkuj:hover {background-color: rgba(255, 255, 255, 0.18);}
.stream-chat_date-separator-date__ZtRj0, .chat-stream-input_container__33zut, .str-chat__textarea textarea {background-color: black;}
.str-chat__textarea textarea {color: white !important;}
.chat-stream-message_chat-message-pinned__2l2A4 .chat-stream-message_chat-message-organiser__-0Lq- {background-color: transparent !important;}
.str-chat__emojisearch{background-color: black;}
.chat-conversations-component_conversation-list-item-unread__36K3C {background-color:#HEXCODE;}
.fQLzcj:disabled {background-color: transparent !important;}

/*GA*/
.create-modal-component_container__39tUN label {color: white;}
.create-modal-component_container__39tUN textarea {color: white; background-color: black;   border-color: rgba(255, 255, 255, 0.12);}
.ask-question_fallback-textarea__2GlLa {background-color: transparent !important;}

/* waiting room */
.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: #HEXCODE;}

/*Registration*/
.event-page__banner-action svg path{fill: black;}
.event-page__header-event-info h1, .event-page__header-event-info a, .event-page__header-event-info p, .event-page__header-event-info span{color: white !important;}
.live-events-popup_header {background-color: black;}
.event-page__header-event-info .add-to-cal-link__icon svg path {fill: white;}
.header a svg path, .footer a svg path {fill: white;}
.container p, .container span, .container h1, .container h2, .container h3, .container h4, .container h5, .container h6, .container div, .container .text{color: white !important;}
.sc-kBzgEd.gGNyWm{background-color:black !important;}
.sc-iCfMLu.cvptEJ.hpn-Button.sc-furwcr.fUnPBL{background-color:#HEXCODE !important; border-color:#HEXCODE !important;}
.hpn-MenuContent{background-color:black !important;}

/*Tabs*/
.tab-panel-styles_header__3Rcee button:hover {background-color: rgba(255, 255, 255, 0.27);}

/*button hover*/
.sc-pFZIQ:hover{background-color: #HEXCODE; color: white;}

/*Toast*/
.toast_toast-success__1FMxc {background: #07bc0c !important;}

/*Icon hover*/
.direct-messages_direct-messages-button-container__9VroH:hover, .fxEnrs:hover {background-color: rgba(255, 255, 255, 0.2);}

/*Recordings*/
.sc-cHjwLt {background-color: rgba(255, 255, 255, 0.15) !important;}
.sc-biBsmb {background-color: black;}
.sc-hYAvtR {background-color: rgba(255, 255, 255, 0) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important;}
.sc-hYAvtR:hover {background-color: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important;}

/*registration*/
.gmSTtB:nth-child(2n+1) {background-color: rgba(255, 255, 255, 0.15) !important;}
.tabs_item, .tabs_item.-active {color: white !important;}
.sponsors-grid__HideLevelHeader-sf37w4-0 .card-content {background-color: black; border-radius: 8px; border: 1px solid rgba(255,255,255, 0.15) !important;}
.navigation_item {color: white !important;}
.sc-gKclnd button:hover  {background-color: rgba(255, 255, 255, 0.2) !important;}
.social-login-actions .social-media {background-color: rgba(255, 255, 255, 0.1) !important; border-radius: 4px;}
.social-login-actions .social-media:hover {background-color: rgba(255, 255, 255, 0.28) !important;}

/* text to white */
.main_main__hcb9b h2{color: white !important;}
.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;}
.sponsors_sponsor-header__urSPm {color: white !important;}
.layout_layout-container__1idYN label{color: white !important;}
.new-layout .card-content{color: white !important;}
.schedule-menu-styles_title__NbFAa, .schedule-menu-styles_live-badge__3vR34, .schedule-menu-styles_segment-type__26SBa, .schedule-menu-styles_description__364XM{color: white !important;}
.people_radio-button-group__XBhHu label{color: white;}
.radio-buttons__radio-button__label{color: white;}
.hpn-RadioButton__Label{color: white;}
.sc-kEjbxe, .sc-pFZIQ {color: white !important;}
.modal_modal-body__c1puk label {color: white !important;}
.waiting-page_container__aDkeC h1 {color: white;}

/*reception*/
.tab-panel-styles_tab-content__2e9pt h3, .tab-panel-styles_tab-content__2e9pt h4, .tab-panel-styles_tab-content__2e9pt .sc-hRxcUd p{color: white !important;}
.sc-ehsPLh .sc-pGacB {color: white;}
.sc-ehsPLh .sc-pGacB:hover {background-color: rgba(255, 255, 255, 0.2); color: white !important;}
.hpn-MenuContent{background-color:black !important; }
.hpn-Search__Input{color:white !important; background-color:black !important; border-color:black !important;}
button[aria-label="Submit search query"]{background-color:black !important;}

/*My agenda*/
.item-divider_item-divider-time__2a6-4{background-color: transparent !important;}
.sc-kEjbQP{color: white;}
.test-id-entry-container div {background-color: black !important;}
.test-id-entry-container {background-color: black !important;}
[data-testid="test-id-side-panel-header"] button[data-selected]{background-color:#HEXCODE !important; border-radius:0.2 rem; border: 0.0625rem solid #HEXCODE;}
.left{background: none !important; background-color: black !important;}
.right{background: none !important; background-color: black !important;}

/*My agenda buttons*/
.test-id-view-event-schedule-button{background-color: black !important; color: white !important;}
.test-id-view-event-schedule-button:hover{background-color: white !important; color: black !important;}
button[pattern="primary"]{background-color: black !important; color:#HEXCODE !important; font-weight:bold !important;}
button[pattern="primary"] svg path {fill:#HEXCODE !important;}
button[pattern="primary"]:hover{background-color:white !important; font-weight:bold !important;}
button[pattern="primary"]:hover div{background-color: white !important;}
button[aria-label="arrow-down"]:hover {background-color: black !important;}

/*Add to calendar button on Waiting room page 12-4*/
button[aria-label="Choose a calendar service:"]:hover{background-color:white !important; font-weight:bold !important;}

/*Replay Area*/
div[data-testid="replay-recordings-filter"] div button span{background-color:black !important;}
div[data-testid="replay-recordings"] div{background-color:black !important;}
div[data-testid="replay-recordings"] div div{background: none !important;}
button[aria-label="Play Recording"]{background:none !important;}

/*Polls selected question*/
.polling-questions-styles_option-item-selected__2VuhJ{background-color:black !important;}/*Polls submit question button*/
.polling-questions-styles_submit-button__2oVfl{background-color:#HEXCODE !important color:white !important;}
.polling-questions-styles_submit-button__2oVfl:hover{background-color:#303030 !important; color:#HEXCODE !important; border: 0.0625rem solid #303030;}
.hpn-RecordingCard{border: 0.0625rem solid #303030;}

/*Same style calendar buttons*/
div[data-testid="reception-schedule-item"] button{background-color: black !important; color:#HEXCODE !important;}
div[data-testid="reception-schedule-item"] button:hover{background-color: white !important; color:#HEXCODE !important;}
div[data-testid="reception-schedule-item"] button svg path {fill:#HEXCODE !important;}
div[data-testid="reception-schedule-item"] button rect {fill:#HEXCODE !important;}

/*Reg page button correction*/
.event-page__header-event-info button {background-color: #HEXCODE !important; border-radius:0.2 rem; border: 0.0625rem solid #HEXCODE; font-weight:bold;}
.event-page__header-event-info button:hover {color: #HEXCODE; background-color: white !important; border-radius:0.2 rem; border: 0.07rem solid white font-weight:bold;}

/*Reg page schedule*/
#schedule div{background-color:black;}
#schedule div:nth-child(2n+1){background-image: none;}

/*Search icon correction*/
.hpn-Search__Submit{background:none !important;}

/*Svg Icons*/
.test-id-direct-messages-button:hover{background-color:#303030 !important;}
.test-id-notifications-button:hover{background-color:#303030 !important;}

/*add to cal button on reg page*/
.hpn-Butticon{background-color:black !important;}

/*People area*/
div[data-testid="people-results-card"] {background-color: black !important;}

/*pre event check button*/
.device-selector_device-lists__3F-6z div button{color:white !important;}
.device-selector_device-lists__3F-6z div button:hover {background-color:#HEXCODE !important; color:white !important;}
.device-selector_device-lists__3F-6z div button svg path {fill:white !important;}

/*breakouts background color*/
button[data-testid="breakouts toggle button"]{background-color:#1b1f29 !important;}

/*Select language background button*/
.choose-language-modal-component_select-item__1ddiC {background-color: black !important;}

/*chat icon background color*/
button[aria-label="send message"]{background-color: black !important;}

/*notifications background color*/
.modal-body {background-color: black !important;}

/*Reg page add to calendar pop up modal*/
.popup-menu_menu-container__13JZ3 a{color:#HEXCODE !important;}

/*Success - tostify*/
.toast_toast-success__1FMxc{background-color: #HEXCODE !important;}

/*announcement popup*/
div[data-testid="announcement-popup"]{color:white !important; font-weight:bold;}
div[data-testid="announcement-popup"] div{background-color:#HEXCODE !important;}
button[aria-label="Close announcement"]{background-color:#HEXCODE !important;}

/*People tab - same style buttons*/
.people-detail_button-container__LYA35 button:hover{background-color:white !important;}

/*Edit Profile*/
div[aria-labelledby="editProfile"] div{background-color:black !important; color:white !important;}
div[aria-labelledby="editProfile"] div h2 {color:white !important;}
div[aria-labelledby="editProfile"] div h3 {color:white !important;}
div[aria-labelledby="editProfileStepOne"] div {background-color:black !important; color:white !important; border:0;}
div[aria-labelledby="editProfileStepOne"] div h2 {color:white !important; }
div[aria-labelledby="editProfileStepTwo"] div{background-color:black !important; color:white !important; border:0;}
div[aria-labelledby="editProfileStepTwo"] div h2  {color:white !important;}
div[aria-labelledby="editProfileStepTwo"] div label  {color:white !important;}
div[data-testid="people-page-profile-card"] div div {background-color:black !important; }
div[aria-labelledby="Filters"] div {background-color:black !important; }
button[aria-label="clear-tags-button"]:hover {background-color:black !important; }

/*Search boxes*/
.hpn-Search__Input {color:white !important; background-color: black !important; border: 0.0625rem solid #HEXCODE !important;}
.hpn-MenuContent{background-color: black !important; }

/*Center icons sessions / stage...*/
.video-session-container_icon__91nfx{background-color: #303030 !important; }

/*Networking Help Others Box*/
#side-panel .test-id-tab-body[id*="tabpanel-"] > div {background: inherit; color: #fff}

/* Text Colour */
#side-panel .test-id-tab-body[id*="tabpanel-"] > div h2, #side-panel .test-id-tab-body[id*="tabpanel-"] div > p {color: inherit;}

/*pre-event-checker*/
div[data-testid="pre-event-check-wrapper"] {background-color: black !important; color:white !important; }
div[data-testid="pre-event-check-wrapper"] h2{color:white !important;}
div[data-testid="pre-event-check-wrapper"] p{color:white !important;}
button[data-testid="next-button"]{border: 0.0625rem solid #HEXCODE;}
button[data-testid="back-button"]{border: 0.0625rem solid #HEXCODE;}
div[data-testid="browser-page"] span {color:white !important;}
div[data-testid="browser-page"] p {color:white !important;}
div[data-testid="browser-page"] li{color:white !important;}
div[data-testid="default-speakers-display"] span {color:white !important;}
button[title="Play"] span {color:white !important;}
button[title="Play"]:hover {background-color:black !important;}
div[data-testid="input-devices-page"] button span {color:white !important;}
div[data-testid="input-devices-page"] button:hover  {background-color:black !important;}
.hpn-Select__CustomInput {background-color:black !important;}
.hpn-Select__Label label{color:white !important;}
.hpn-AccordionHeading{color:white !important;}
.hpn-AccordionContent span{color:white !important;}
.hpn-AccordionHeading span{color:white !important;}
button[data-testid="copy-results-button"]:hover {background-color:white !important;}
button[data-testid="copy-results-button"]:hover div{background-color:white !important;}

/*Notification pop up- 13-4*/
div[data-testid="testid-notification-preview-container"] div{background-color: #HEXCOLOR !important;}
button[pattern="primary"]{background-color: black !important; color:white !important;}
button[pattern="primary"]:hover{background-color: white !important; color:black !important; border: .0625rem solid white;}
button[pattern="secondary"]{background-color: black !important; color:white !important; border: .0625rem solid black;}
button[pattern="secondary"]:hover{background-color: white !important; color:black !important; border: .0625rem solid white;}

/*Schedule a meeting modal*/
.hpn-TextField__Input {color: white; border: 1px solid rgba(255,255,255, 0.2);}
.css-1sz9hc1-control {color: white !important; background-color: black;}
.css-1sz9hc1-control div {color: white !important;}
.css-1siq1wa-menu{color: white !important;}

Wenn Sie für Ihre Veranstaltung eine andere helle und dunkle Farbe anstelle von reinem Weiß und reinem Schwarz verwenden, ersetzen Sie die Farbwerte „schwarz“ und „weiß“ durch Ihre Farbcodes.

Es kann einfacher sein, command + F (für Mac) or Ctrl + F (für Windows) zu verwenden, um die erforderlichen Werte zu finden und zu ersetzen.

Video-Tutorial

Sehen Sie sich dieses praktische Video-Tutorial zu allen Punkten an, die wir oben beschrieben haben!

Dynamische Klassennamen

Es gibt einige Veranstaltungsbereiche und Elemente (z. B. Wiederholung, Netzwerken usw.), die dynamische Klassennamen haben. Aus diesem Grund sind wir derzeit nicht in der Lage, Event-Organisatoren einheitliche benutzerdefinierte CSS-Codes zur Verfügung zu stellen, die für jede Veranstaltung funktionieren würden. Wenn Sie mit der Verwendung von CSS vertraut sind, können Sie sie für Ihre Veranstaltung anpassen.

Hopin verändert sich ständig!

Bitte beachten Sie, dass die Hopin-Plattform häufig aktualisiert wird, sodass die vorgeschlagenen benutzerdefinierten CSS-Codes möglicherweise nicht mehr funktionieren. Wir tun unser Bestes, um diesen Leitfaden auf dem neuesten Stand zu halten. Wenn Sie jedoch nach Befolgen aller Schritte und Anwenden dieses Themas feststellen, dass einige Farben nicht funktionieren, zögern Sie nicht, uns unter support@hopin.com zu kontaktieren.

Wir empfehlen, die Veranstaltung mindestens 1 Woche vor Beginn noch einmal in der Vorschau anzuzeigen. So bleibt genügend Zeit, um Fehler zu korrigieren und ggf. letzte Änderungen vorzunehmen.

Sie können das Ereignis auch duplizieren, um einen Testlauf durchzuführen und zu überprüfen, wie die Farben in den Zielbereichen wie dem hervorgehobenen geplanten Segment, dem "Was passiert gerade"-Banner oder dem Aktivitätsfeld aussehen.

Andere Themen

Wenn Sie nach etwas anderem suchen, empfehlen wir Ihnen, unsere Leitfäden zu einfachen Themenereignissen und hervorgehobenen Themenereignissen zu lesen.

Zögern Sie nicht, uns unter support@hopin.com zu kontaktieren, falls Sie eine spezielle CSS-Anfrage haben oder Hilfe bei der Erstellung Ihrer Veranstaltung benötigen.

 

War dieser Beitrag hilfreich?