CSS & HTML snippets and tips

Copy the code below into the Design tab > Section: "Event microsite & registration form: Overwrite CSS"

• .deputy_mail {display: none !important;}

This code always displays the background image in its entirety. Instead of using the value 56.34%, you need to divide the height of your image by its width and then multiply by 100 to get the percentage.

The actual event image is hidden.

• /* Header image */
  @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;
  }
  }

In order to hide the note indicating the deadline for signing up for the event, insert the following code snippet under “Event microsite & registration form: Overwrite CSS”: 

• .event-details-header .date-and-location .date .miniHint { display: none !important; } 

If you want to hide the quotation marks before the intro and info texts, add the following code snippet under “Event microsite & registration form: Overwrite CSS”: 

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

If you want to hide the country field in address fields, add the following code snippet under “Event microsite & registration form: Overwrite CSS”: 

• .countryField {display: none !important;}

In order to hide the “No selection” reset field for time slots, add the following code snippet under “Event microsite & registration form: Overwrite CSS”: 

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

To ensure that the time slots appear at the very top of the registration form, add the following under Event/Agency > Design > CSS for the event page, event overview page, and iFrame:

• /* Timeslots to the top */

  .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 passes the guest's status as a class to the body of the event microsite. This allows you to customize the appearance of the event page even more precisely based on the guest's status.

The following classes are added to the body (only one at a time):

• guestStatus__DELETED ("Deleted")
• guestStatus__PENDING ("Waiting for confirmation")
• guestStatus__ADDED ("Added")
• guestStatus__INVITED ("Invited")
• guestStatus__OPEN ("Open")
• guestStatus__DECLINED ("Declined")
• guestStatus__CONFIRMED ("Confirmed")
• guestStatus__APPEARED ("Appeared")

ATTENTION: This is not a secure way of hiding important information. Elements hidden using “display: none” can still be viewed if you know how.

/* Boxes */

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

Copy the code below into the Design tab > Section: Event microsite & registration form: Overwrite CSS in BOTH fields:

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

<!-- Edit guest data -->
<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>
<!-- // Edit guest data -->

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 präsent gewünscht sind, gibt es hier keinen extra Menüpunkt. Dieser kann aber per CSS eingeblendet werden:

• .navConditions { display: block !important; }

Mit Hilfe dieses CSS-Snippets kannst Du den Google-Maps-Button auf der Event-Microsite ausblenden:

• .eventAddress-routeLink { display: none !important; }

Den Button "zum Gästedashboard" nach der Absage auf der Bestätigungsseite ausblenden:

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

Wenn Du in Deiner E-Mail einen 2 Spaltigen Text machen willst, dann erstelle einen Abschnitt im Mailing vom Typ HTML und nutze dieses HTML-Snippet. Es funktioniert auch wenn Du es in die Standard-Mailtexte einfügst:

• <table class="container" border="0" cellspacing="0" cellpadding="0">
  <tr>
  <!-- Linke Spalte -->
  <td class="column">
  <p class="name">Dr. Mara Musterfrau</p>
  <p class="title">CEO</p>
  <p class="company">Beispielfirma</p>
  </td>

  <!-- Rechte Spalte -->
  <td class="column">
  <p class="name">Max Mustermann</p>
  <p class="title">CEO</p>
  <p class="company">Beispielfirma</p>
  </td>
  </tr>
  </table>

Folgendes ins CSS einfügen:

• .guestDecline-reason {display: none !important;}

Blendet den kompletten Kopfbereich mit Logo und Menü aus (Mobile- und Desktop-Ansicht)

• .mainNav { display: none !important};#page-header, #page-header-spacer {display: none;}