Farbänderungen an der Plattform mit benutzerdefiniertem CSS

  • Aktualisiert

7.2.jpg

Sie können einige der CSS-Klassen, die Hopin vordefiniert hat, überschreiben. Es ist empfiehlt sich, CSS-Grundkenntnisse dafür zu haben.

Hinweis: Custom CSS funktioniert in amerikanischem Englisch (z.B.: Farbe, nicht Farbe).

 

1. In Ihrem Event klicken Sie mit der rechten Maustaste auf die Komponente, die Sie bearbeiten möchten. Wähle, Sie „Prüfen“ aus

Screen_Shot_2020-07-28_at_5.24.51_PM.png

 

2. Im Pop-Up-Fenster mit HTML-Elementen wählen und kopieren Sie den Text, der sofort nach <Schaltflächenklasse="
erscheint

Screen_Shot_2020-07-28_at_5.50.47_PM.png

3. Setzen Sie einen Punkt hinzu, fügen Sie dann das kopierte HTML-Element und anschließend den benutzerdefinierten CSS-Code hinzu.

Die automatisch generierten Tags am Ende des Klassennamens (in diesem Beispiel: __FHok6) funktionierten manchmal nicht bei duplizierten Events. Wir würden vorschlagen, [class*="..."] ohne __FHok6 zu verwenden. Falls [class*=""] nicht funktioniert, probieren Sie es auch mit dem automatisch generierten Tag aus.

In diesem Beispiel lautet der hinzuzufügende CSS-Code:

.form-button-styles_button_FHok6 {background-color: orange;}

4. Gehen Sie zu Ihrem Event-Dashboard > Konfiguration > Theme. Sie sehen eine Kopfzeile namens „Farbe“. Geben Sie im Feld „Primärfarbe“den HEX-Code (beginnend mit dem # -Symbol) Ihrer bevorzugten Markenfarbe ein.

Hinweis: Es ist wichtig, hier den HEX-Code und nicht einen RGB-Wert oder Farbennamen (wie etwa „Blau“ oder „Rot“) einzugeben, da das zu einem Fehler führen könnte. 

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

image3.gif

5. Klicken Sie als Nächstes auf Erweiterte Einstellungen anzeigen und fügen Sie den in Schritt 2 und 3 gefundenen CSS-Code in das Feld „Benutzerdefiniertes CSS“ unten auf der Theme-Seite ein.

Screenshot_2021-03-13_at_10.53.13.png

 

5. Klicken Sie auf Speichern. Überprüfen Sie Ihre neue Funktion, indem Sie dazu Vorschau oben rechts in Ihrem Browser aktivieren.

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 benutzerdefinierte CSS-Codes nach einer Weile möglicherweise nicht mehr funktionieren. Wir tun unser Bestes, um unsere Leitfäden auf dem neuesten Stand zu halten. Wenn Sie jedoch feststellen, dass einige Codes oder 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.

 

Wir stehen Ihnen gerne unter support@hopin.com zur Verfügung, falls Sie Fragen haben oder Hilfe benötigen.

War dieser Beitrag hilfreich?