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

In order to hide the cookie banner, you need to add the following under Event/Agency > Design > Event Overview Page: Overwrite CSS:

• .cookieinfo { display: none !important; }
  

Note: Since we only use technically necessary cookies, the notification banner is not displayed.

Copy the code below into the Design tab > Section: CSS Microsite AND CSS Login Form:

• .langSwitcher {display: none !important;}

Note: You can hide the language switcher in the ”Design” tab of your event. For more information, see our documentation.

Design > Event microsite & registration form: Overwrite CSS > CSS for event, code entry and cancellation page

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

In guestoo's standard emails, we embed the event/header image and the logo directly into the email and link to all other images, resulting in the recipient often having to click on a link in their email program to load these linked images.

We do this because the emails would otherwise become too large. However, you can embed your own images into your emails via Section > HTML or directly into the email text using HTML tags. Here’s how:

1. Convert image
   First, the image needs to be converted to text. You can do this, for example, using the following online tool: www.base64-image.de
2. Insert an HTML tag for the image
   
   <img alt="Description of the image" src="" />
   
   
3. Copy the "text" of the image in src="HERE"
   The text should look like the screenshot… or similar to that ;)
   
   <img alt="Description of the image" src="data:image/png;base64,iVBORw0KGg…" />
   
   
4. Adjust image size
   Add the image size to the HTML tag
   
   <img alt="Description of the image" src="data:image/png;base64,iVBORw0KGg…"  width="100%" style="width: 100%; height: auto;" />
   
   
5. Done :)

Design > Event microsite & registration form: Overwrite CSS > CSS for event, code entry and cancellation page

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

Display the net price on the registration form:

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

Add the following to the CSS:

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

If you'd like to reward your guests by showing them the photo gallery from an event, you can include the following in the survey's confirmation message:

Since users often don't want the terms and conditions to be so prominent, there isn't a separate menu item for them here. However, this can be achieved by using CSS:

• .navConditions { display: block !important; }

You can use this CSS snippet in order to hide the Google Maps button on the event microsite:

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

Hide the “Go to Guest Dashboard” button on the confirmation page after cancellation:

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

If you want to create a two-column layout in your email, create an HTML section in your mailing and use this HTML snippet. It also works if you insert it into default email text:

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

Add the following to the CSS:

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

Hides the entire header section, including the logo and menu (mobile and desktop views):

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