ダークテーマのイベントを10分で作る(CSSの知識は不要)

  • 更新

Biz_Enter.pngorganizers_only.jpg

Screenshot_2021-03-13_at_13.31.24.png

Hopinイベント会場の色をブランディングに合わせたい場合は、このガイドに従ってダークテーマを作成してください。 テーマの色を変更したり、カスタムCSSコードを追加したり、イベントに該当する場合は特定のエリアをさらにカスタマイズする必要があるため、このテーマの適用には時間がかかる場合があります。

ダークテーマを使用すると、イベント会場全体でHopinのデフォルト色を置き換え、すべての背景にダークカラーを使用できます。 これは、どのように表示されるかの例です。

Screen_Shot_2020-07-28_at_5.11.52_PM.png

HEXカラーコードを見つける方法

始める前に、ブランドの色のHEXコードを知っておく必要があります。 Hexコード(通常は企業のHexカラー)を使用します。 また、このWebサイトで希望の色のHexコードを見つけることもできます。 任意の画像エディターの「カラーピッカー」ツールを使うこともできます。

ブランドカラーの変更

[イベントダッシュボード] > [セットアップ] > [テーマ]に移動します。 「色」という名前のヘッダーが表示されます。 [原色]というタイトルのフィールドに、ご希望のブランドカラーのHEXコード(#記号で始まる)を入力します。

注:ここには必ずHEXコードを入力してください。 RGB値や色の名前(「青」または「赤」など)を入力するとエラーを引き起こす可能性があります。

変更を適用するには、[保存]をクリックしてください。 

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

ヒント:コントラストを確認して最適な結果を得る

このダークテーマでは、段落と見出しが読みやすいことを確認するために、このオンラインツールでブランドカラーと黒の色を確認できます。 大型テキストとグラフィカルオブジェクト、およびユーザーインターフェイスコンポーネントのAA規格への適合が重要であることをお忘れなく。

例:

アイコンを明るい色に変更する

次に、[詳細設定を表示]をクリックし、次の色値を変更します。ブランドカラーの16進数コードと、指定された色名またはRGBAコードを入力します。

注:ブランドカラーのHEXコードをRGBAに変換するには、このオンラインツールを使用できます。 ブランドカラーに異なる透明度を追加できるようにするには、これを行う必要があります(最後のコンポーネントは透明度を表します。たとえば、RGBAコードがrgba(128, 0, 128, 0.25)、 0.25 = 25% 透明度)の場合。

純粋な白と純粋な黒ではなく、異なる明るい色と暗い色をイベントに使用することもできます。 テキストやヘッドラインはピュアホワイトを使用することを強くお勧めしますが、ピュアブラックではなくダークグレーまたはダークブルーを自由に選択できます。

入力テキスト

色の値

プライマリ100

ブランドカラーのRGBAコード 

例: rgba (128, 0, 128, 0.2) 

透明度に0.2 (20%)⚠️を使用する 

このオンラインツールでHEXコードをRGBAに変換します

プライマリ200

ブランドカラーのRGBAコード 

例: rgba (128, 0, 128, 0.25) 

透明度に0.25 (25%)⚠️を使用する

このオンラインツールでHEXコードをRGBAに変換します

プライマリ300

ブランドカラーのRGBAコード 

例:rgba (128, 0, 128, 0.3) 

透明度に0.3 (30%)⚠️を使用する

このオンラインツールでHEXコードをRGBAに変換します

グレー100

グレー200からrgba(255、255、255、0.15)

グレー200

グレー300からrgba(255、255、255、0.19)

グレー300

rgba (255,255,255, 0.19)

グレー600

ホワイト

グレー650

ホワイト

グレー700

ホワイト

テキストの見出し(大)

ホワイト

テキストの見出し(中)

ホワイト

テキストの見出し(小)

ホワイト

テキストラベル

ホワイト

ボタンのセカンダリ背景

ブラック

ボタントグル(デフォルト)

ホワイト

サイドナビゲーションアイコンのデフォルトの背景

ブランドカラーのRGBAコード 

例: rgba (128, 0, 128, 0.5) 

透明度に0.5 (50%)⚠️を使用する 

このオンラインツールでHEXコードをRGBAに変換します

ボタントグル(選択時)

ホワイト

入力背景

ホワイト

検索背景

ブラック

検索テキスト

ホワイト

メニュー背景

ブラック

ヘッダー背景

ブラック

サイドナビゲーション背景

ブラック

イベント本文背景

ブラック

タブパネル背景

ブラック

サイドナビゲーションアイコン(デフォルト)

ブラック

サイドナビゲーションアイコンのデフォルトテキスト(ホバー)

ホワイト

サイドナビゲーションアイコン(ホバー)

ホワイト

サイドパネルタブのデフォルトの背景

ブラック

サイドパネルタブのアクティブな時の背景

ブランドカラーのRGBAコード 

例: rgba (128, 0, 128, 0.5) 

透明度に0.5 (50%)⚠️を使用する 

このオンラインツールでHEXコードをRGBAに変換します

メニューテキスト

ブラック

メニューテキスト

ホワイト

モードヘッダー背景

ブラック

モードフッター背景

ブラック

モード本文背景

ブラック

カード背景

ブラック

テーブルヘッダー背景

ブラック

メッセージ背景

ブラック

現在進行中カードのテキスト

ホワイト

レセプションの個々のスケジュールカードの背景の変更

ホワイト

スケジュールカードのハイライトタイトル

ホワイト

これは、イベント内でテーマの色を編集するときにどのように表示されるかを示しています。 適切なテキストボックスを探す際に時間を節約するには、command + F (Mac)またはCtrl + F (Windows)を使用してウェブページを検索できます。

Screen_Shot_2020-07-28_at_4.37.44_PM__1_.png

待合室のコードは以下の通りで、これもカスタムCSSボックスに追加できます。

CSSコードは、イベントダッシュボードのテーマページの下にある「カスタムCSS」ウィンドウで以下のように表示されます。

テーマウィンドウの下のカスタムCSSフィールドに下のコードを追加します (必要に応じて「黒」を「独自の背景色」に変更します)

image4.png

備考:新しいHexカラーコードを追加する際は、最初の#も含めて完全なコードを入力してください(例:黒の場合は#000000)。

純粋な白と純粋な黒ではなく、異なる明るい色と暗い色をイベントに使用する場合は「黒」と「白」の色の値をカラーコードで置き換えます。

必要な値を見つけて置き換えるには、command + F (Mac)またはCtrl + F (Windows)を使用するほうが簡単かもしれません。

/* 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;}

変更を適用するには、[保存]をクリックすることをお忘れなく。

変更が保存されたら、右上隅にある [イベントをプレビュー]ボタンをクリックして、ハイライトテーマを適用した状態でイベントがどのように表示されるかをプレビューします。

ビデオチュートリアル

上記で概説したすべてのポイントについて、この便利なビデオチュートリアルをご覧ください。 

動的クラス名

動的クラス名を持つイベントエリアと要素(リプレイ、ネットワークなど)がいくつかあります。 そのため、現時点ではすべてのイベントで機能する統一されたカスタムCSSコードをイベントオーガナイザーに提供することはできません。 CSSを「公式」のイベントに使用する前に、まずはテストイベントで試してみることをお勧めします。

Hopinは常に変化しています!

Hopinプラットフォームは頻繁に更新されるため、推奨されるカスタムCSSコードが動作しなくなる可能性があることにご注意ください。 このガイドを最新の状態に保つために最善を尽くしています。 ただし、すべての手順に従ってこのテーマを適用したあとに一部の色が機能していないことに気づいた場合は、お気軽にお問い合わせください。  

イベントを開始する1週間前までに再度プレビューすることをお勧めします。 これにより、間違いを修正し、必要に応じて最終的な変更を行うのに十分な時間が残ります。

イベントを複製してテストを行い、強調されたスケジュール済みのセグメント、[現在進行中]バナー、またはアクティビティパネルなどのターゲット領域で色がどのように表示されるかを確認することもできます。 

その他のテーマ

必要に応じてイベントのフォントを変更する方法が詳細に関しては、こちらのガイドをご覧ください。

nth-child(カード数)を必ず変更してください

 

この記事は役に立ちましたか?