CSS & HTML Snippets

Nützlicher CSS und HTML-Code zum Anpassen Deiner Eventseite

Hier findest Du nützliche HTML- und CSS-Snippets um Deine guestoo Eventseite noch weiter zu individualisieren.
Kopiere die Snippets einfach unter dem Reiter "Design" in die Felder CSS oder HTML (Microsite oder Anmeldeformular).

Die Möglichkeit eigenen CSS- oder HTML-Code einzubinden hängt von Deinem Tarif ab.

Stellvertreter Hinweis ausblenden

Blendet die Info und Option zur Stellvertreter Email-Adresse aus

Stellvertreter Hinweis ausblenden - Blendet die Info und Option zur Stellvertreter Email-Adresse aus

Kopiere den untenstehenden Code in den Reiter Design > Abschnitt: CSS-Microsite und CSS-Anmeldeformular

  • .deputy_mail {display: none !important;}

Hintergrundbild manipulieren

Dieser Code zeigt das Hintergrundbild immer komplett an. Anstatt dem Wert 56,34% müsst Ihr die Höhe Eures Bildes durch die Breite teilen und dann mal 100 rechnen, um den Prozentwert zu erhalten.

Das eigentliche Eventbild wird ausgeblendet.

  • /* Headerbild */
    @media (min-width: 651px) {
    .eyecatcher-content {
    display: none;
    }
    .eyecatcher:before {
    display: none;
    }
    .eyecatcher {
    padding: 0px !important;
    min-height: auto !important;
    height: auto !important;
    padding-bottom: 56.34% !important;
    }
    .keyvisual {
    display: none;
    }
    #content .mainInfos {
    width: 100%;
    }
    }
    @media (max-width: 650px) {
    .bg-image-mobile {
    background-image: none !important;
    background-color: #f9f9f9;
    }
    .bgImagePublic #content {
    margin-top: 10px !important;
    }
    }

"Anmeldung möglich bis" ausblenden

Um den Hinweis, bis wann die Anmeldung zum Event möglich ist, auszublenden, füge folgenden Code-Schnipsel unter "Event-Microsite & Anmelde-Formular: CSS-Überschreiben" ein: 

  • .langSwitcher {display: none !important;}

Anführungszeichen vor dem Introtext und dem Infotext ausblenden (Template: Tile)

Um die Anführungszeichen vor den Intro- und Infotexten auszublenden, füge folgenden Code-Schnipsel unter "Event-Microsite & Anmelde-Formular: CSS-Überschreiben" ein: 

  • .introtext-icon, .event-description-icon {display: none !important;}
 

Land bei Adressfeldern ausblenden

Um das Land bei Adressfeldern auszublenden, füge folgenden Code-Schnipsel unter "Event-Microsite & Anmelde-Formular: CSS-Überschreiben" ein: 

  • .countryField {display: none !important;}
 

-- Keine Auswahl -- Bei Timeslots ausblenden

Um das Reset-Feld "Keine Auswahl" bei Timeslots auszublenden, füge folgenden Code-Schnipsel unter "Event-Microsite & Anmelde-Formular: CSS-Überschreiben" ein: 

  • .ts-noSelection {display: none !important;}
 

Timeslots immer nach oben setzen

Damit die Timeslots in der Anmeldemaske ganz nach oben kommen, folgendes bei Event/Agentur > Design > CSS für Eventseite, Eventübersichtsseite und iFrame hinzufügen:

  • /* Timeslots nach oben */
    .framedInputs .visitor-choice-box-text {
    order: -3;
    }
    .framedInputs .visitor-choice-box,
    .framedInputs .visitorCountTwoPersons {
    order: -2;
    }
    .framedInputs .type-TIMESLOT{
    order: -1;
    }
    .framedInputs .userAccountContainer{
    order: -4;
    }

Auf den Gast-Status reagieren

guestoo übergibt den Status des Gastes als class in den Body der Event-Microsite. Damit kannst Du noch feiner das Aussehen der Eventseite an den Status des Gastes anpassen.

Folgende Klassen werden dem Body hinzugefügt (immer nur eine):

  • guestStatus__DELETED ("Gelöscht")
  • guestStatus__PENDING ("Wartet auf Bestätigung")
  • guestStatus__ADDED ("Hinzugefügt")
  • guestStatus__INVITED ("Eingeladen")
  • guestStatus__OPEN ("Offen")
  • guestStatus__DECLINED ("Absage")
  • guestStatus__CONFIRMED ("Bestätigt")
  • guestStatus__APPEARED ("Erschienen")

ACHTUNG: Das ist keine sichere Methode, um wichtige Informationen zu verstecken. Per "display: none" ausgeblendete Elemente sind trotzdem einsehbar, wenn man weiß wie.

Button "Daten übernehmen" ausblenden

Kopiere den untenstehenden Code in den Reiter Design > Abschnitt: Event-Microsite & Anmelde-Formular: CSS-Überschreiben in BEIDE Felder:

  • .begleitperson-container .takeOver { display: none !important; }

(veraltet) Sprachwechsler ausblenden

Blendet den Sprachwechsler am Ende der Seite oder des Anmeldeformulars aus

Kopiere den untenstehenden Code in den Reiter Design > Abschnitt: CSS-Microsite UND CSS-Anmeldeformular

  • .langSwitcher {display: none !important;}

Hinweis: Du kannst den Sprachwechsler im "Design"-Tab Deines Events ausblenden. Weitere Informationen findest Du in unserer Doku.