CSS & HTML Snippets und Tipps

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

• .deputy_mail {display: none !important;}

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

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

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

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

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

• .countryField {display: none !important;}

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

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

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.

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

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

Um den Cookie Banner auszublenden, musst Du unter  Event/Agentur > Design > CSS für Eventseite, Eventübersichtsseite und iFrame folgendes hinzufügen:

• .cookieinfo { display: none !important; }
  

Hinweis: Da wir nur technisch notwendige Cookies verwenden entfällt der Hinweis-Banner

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.

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

• .reRegister-Dashboard {display: none !important;}

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 :)

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

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

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

Folgendes ins CSS einfügen:

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

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

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

• .likes.image-download { display: none !important;}

• .date-and-location .time-word-from { display: none; } 

Wenn Du Deinen Gästen als Belohnung die Galerie eines Events zeigen möchtest, kannst Du in den Bestätigungstext der Umfrage folgendes schreiben:

Da die Bedingungen oft nicht so present gewünscht sind, gibt es hier keinen extra Menüpunkt. Dieser kann aber per CSS eingeblendet werden:

• .navConditions { display: block !important; }