CSS & HTML Snippets und Tipps

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.
Feature: HTML/CSS zu Eventseite hinzufügen

Du kannst für das guestoo Back-End zwischen zwei Darstellungsoptionen wählen. Die Screenshots in der Doku basieren auf dem "Klassischen Design".
Hier siehst Du die Unterschiede, damit Du dich auch im "Modernen Design" zurecht findest: » guestoo Back-End-Design
Inhalte dieser Seite:

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: 

  • .event-details-header .date-and-location .date .miniHint { 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, .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.

Tile Rounded - Eckige Boxen (CSS)

/* Boxen */

.TEMPLATE_4 #content-sections .type-BUTTON .section-item a.section-cta-button,
.TEMPLATE_9 #content .mainInfos .event-image-inside,
.TEMPLATE_9 #content .mainInfos .event-details-header,
.TEMPLATE_9 #content .mainInfos .more-content.agency-details,
.TEMPLATE_9 #content-sections .type-IMAGEONLY,
.TEMPLATE_9 #content-sections .type-HEADLINE,
.TEMPLATE_9 #content-sections .type-IMAGEONLY .section-item,
.TEMPLATE_9 #content-sections .type-IMAGEONLY .section-item .section-content,
.TEMPLATE_9 #content-sections .type-IMAGEONLY .section-item .section-content:after,
.TEMPLATE_9 div.teaser-tabs-wrapper,
.TEMPLATE_9 #content .mainInfos .more-content,
.TEMPLATE_9 #content-sections .type-COLLAPSIBLE,
.TEMPLATE_9 #content-sections .type-EXPLANATION,
.TEMPLATE_9 #content-sections .type-MULTI_IMAGE,
.TEMPLATE_9 #content-sections .type-MULTI_FILE,
.TEMPLATE_9 #content-sections .type-MULTI_FILE,
.TEMPLATE_9 #content-sections .type-EVENT_ACTIONS,
.TEMPLATE_4.TEMPLATE_9 #content-sections .type-REGULAR,
.TEMPLATE_9 #content .mainInfos .event-details-header,
.TEMPLATE_4.TEMPLATE_9 #content-sections .type-TEXTONLY,
.TEMPLATE_4.TEMPLATE_9 #content-sections .type-HTML,
.TEMPLATE_4.TEMPLATE_9 #content .mainInfos .event-description {
border-radius: 0px !important;
}

/* Buttons */
.TEMPLATE_9 .gastMenge-choices .choice,
.TEMPLATE_9 .message-default .callToAction-list li a,
.TEMPLATE_9 .info-message,
.TEMPLATE_9 .framedInputs .label-special,
.TEMPLATE_9 #content .sideInfos a.callToAction,
.TEMPLATE_9 .registerCallToAction-button {
border-radius: 0px !important;
}

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

Gastdaten ändern Button für Mails

<!-- Gastdaten ändern -->
<br style="-webkit-font-smoothing: antialiased;"><br style="-webkit-font-smoothing: antialiased;">
<table border="0" cellpadding="0" cellspacing="0" class="callToActionTable inner-width" width="100%" style="-webkit-font-smoothing: antialiased; box-sizing: border-box; border-spacing: 0; background-color: ; border-radius: 20px; margin: 0px auto; overflow: hidden; width: 100%; max-width: 100%; overflow-x: hidden;" bgcolor=""><tr style="-webkit-font-smoothing: antialiased; box-sizing: border-box;"><td height="60" align="center" bgcolor="" style="-webkit-font-smoothing: antialiased; box-sizing: border-box; align-content: center; text-align: center; align-items: center; height: 60px;"><a href="/frame?container&change" class="callToActionTable-link" style="-webkit-font-smoothing: antialiased; box-sizing: border-box; background-color: ; border-radius: 20px; height: 60px; line-height: 60px; font-weight: 400; display: block; text-decoration: none; text-align: center; font-size: 22px; color: #fff; "></a></td></tr></table>
<!-- // Gastdaten ändern -->

(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.

Bilder in E-Mails einbetten

Die Bilder sind immer sichtbar und müssen nicht erst durch den Empfänger geladen werden

In den Standard-Mails von guestoo betten wir das Event/Headerbild und das Logo in die E-Mail ein und refferenzieren alle anderen Bilder - die Refferenzierten Bilder muss der Empfänger dann oft durch einen Klick in seinem E-Mailprogramm nachladen.

Das machen wir, da die E-Mails sonst zu groß werden. Du kannst aber per Abschnitt > HTML oder direkt in den Mailtext per HTML-Tag eigene Bilder in Deine E-Mails einbetten. So gehts:

  1. Bild umwandeln
    Das Bild muss "in Text" umgewandelt werden. Dies geht zum Beispiel mit folgendem Online-Tool: www.base64-image.de
  2. Füge einen HTML-Tag für das Bild ein

    <img alt="Beschreibung des Bides" src="" />

  3. Kopiere den "Text" des Bildes in src="HIER"
    Der Text sieht wie im Screenshot aus … also ähnlich ;)

    <img alt="Beschreibung des Bides" src="data:image/png;base64,iVBORw0KGg…" />

  4. Bildgröße anpassen
    Erweitere den HTML-Tag um die Größe des Bildes

    <img alt="Beschreibung des Bides" src="data:image/png;base64,iVBORw0KGg…"  width="100%" style="width: 100%; height: auto;" />

  5. Fertig :)

Switcher für Stellvertreter E-Mail ausblenden

Design > Event-Microsite & Anmelde-Formular: CSS-Überschreiben > CSS für Event-, Codeeingabe- und Absagen-Seite

  • .masterData-email .deputy_mail { display: none; }

Netto-Preise statt Brutto-Preise hervorheben

Für B2B-Events

Zeige den Netto-Preis im Registrierungsformular an:

  • /* NETTO STATT BRUTTO */
.ticketNetPrice {
	display: inline-block;
}
.ticketGrossPrice {
	display: none;
}
/* Schriftgröße und Farbe anpassen */

.ticket-price-table tr.total td {
	font-size: 12px;
	line-height: 12px;
}
.ticket-price-table tr.mwst.nettprice td {
font-size: 15px;
line-height: 15px;
color: red !important;
}
.ticket-price-table tr.total td {
color: lightgrey !important;
}

Begleitpersonenabfrage mit Zahlen statt "Ich + 1"

Begleitpersonenabfrage mit Zahlen statt

Folgendes ins CSS einfügen:

  • .accompanying-plus-number {
    display: none !important;
    }
    .number-without-accompanying {
    display: inline-block;
    }

Kontakt-Abschnitt: Agenturname ausblenden

Blendet auf der Microsite den Agenturnamen im Abschnitt Kontakt aus

  • #content .mainInfos .agency-details h2 {
    display: none;
    }
    #content .mainInfos .agency-details .header-label {
    font-size: 28px;
    line-height: 28px;
    padding-bottom: 20px;
    }

Schriftgröße Introtext anpassen

  • #content .mainInfos header p.introtext {
    font-size: 20px;
    line-height: 24px;
    }

Galerie > Download-Button ausblenden

  • .likes.image-download { display: none !important;}
Vorherige Seite Nächste Seite