Tags position and visibility

  1. Is there a way via custom CSS i can hide the tags from showing on the events tiles but still show in the popup when viewing just one selected event?

  2. Is there a way to order the content on the event popup so that the tags show below the event description rather than above the event description?

1 Like

I got the tags to hide on the event tiles but still show on the popup using the below:

/* Tags display*/
.eapp-events-calendar-tags-component {
display: none;
}

So now just need help with the order of the content in the actual popup!

1 Like

Here is the CSS code to change the order of the tags and description in the popup:

.global-styles,
.eapp-events-calendar-modal-modalContent .eapp-events-calendar-popup-item-inner {
  display: flex;
  flex-direction: column;
}
.global-styles,
.eapp-events-calendar-modal-modalContent [class*="edit-item-button__Container-sc"] {
  order: 1
}
.global-styles,
.eapp-events-calendar-modal-modalContent .eapp-events-calendar-close-component {
  order: 2;
}
.global-styles,
.eapp-events-calendar-modal-modalContent .eapp-events-calendar-popup-item-header {
  order: 3
}
.global-styles,
.eapp-events-calendar-modal-modalContent .eapp-events-calendar-popup-item-media {
  order: 4
}
.global-styles,
.eapp-events-calendar-modal-modalContent .eapp-events-calendar-tags-component {
  order: 6;
}
.global-styles,
.eapp-events-calendar-modal-modalContent .eapp-events-calendar-popup-item-description {
  order: 5;
  margin-bottom: 20px;
}
.global-styles,
.eapp-events-calendar-modal-modalContent .eapp-events-calendar-popup-item-row {
  order: 7;
}
.global-styles,
.eapp-events-calendar-modal-modalContent .eapp-events-calendar-popup-item-mapContainer {
  order: 8;
}
.global-styles,
.eapp-events-calendar-modal-modalContent .eapp-events-calendar-organizer-component {
  order: 9
}
.global-styles,
.eapp-events-calendar-modal-modalContent .eapp-events-calendar-divider-component {
  order: 10;
}

Please add it to the Custom CSS field and let me know if it worked :wink:

As for showing/hiding tags, you don’t have to use a CSS code since the widget includes options to control the display of the widget elements in the event cards and popups:


1 Like