Here are some extra code snippets that we have used to answer certain questions from customers that go beyond the features of the plugin. If you are using our free Divi child theme, place these snippets into the style.css file. Otherwise, place these in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
Style The No Results Message
If you want to change how the no results message looks, you can target the module by first adding a custom CSS class “no-events” to the module. Then, add the snippet below and customize it however you want.
Note that actually changing the text is a feature coming in a future version.
/*style the text of the no results message*/
.no-events.et_pb_module > div {
font-size: 24px;
color: #000000;
font-weight: bold;
text-align: center;
} Change The Order Of Event Details
The modules are made of several main parts like image, title, details, excerpt, and button. We can’t actually change the order of those, but you can change all of the items with the event details like category, date, time, etc. Below is the snippet that is set with the default order. So to change the order, you would need to make sure you have 1 through 7 assigned.
/*make the event details order flexible*/
.decm-show-detail-center {
display: flex;
flex-direction: column;
}
/*event date order*/
.ecs-eventDate {
order: 1;
}
/*event time order*/
.ecs-eventTime {
order: 2;
}
/*event venue order*/
.ecs-venue {
order: 3;
}
/*event location order*/
.ecs-location {
order: 4;
}
/*event organizer order*/
.ecs-organizer {
order: 5;
}
/*event price order*/
.ecs-price {
order: 6;
}
/*event details order*/
.ecs-categories {
order: 7;
}Events Feed Module
You can target the Events Feed module with .decm_event_display
/*made Events Feed more info button fullwidth*/
.act-view-more {
display: block;
}/*make events in Events Feed two columns wide on Tablet*/
@media (min-width: 768px) and (max-width: 980px) {
.ecs-event-list .col-sm-12 {
width: 50%!important;
}/*disable the event title link in the Events Feed*/
.decm_event_display .entry-title a {
pointer-events: none;
}/*disable the event category link in the Events Feed*/
.decm_event_display .ecs-categories a {
pointer-events: none;
}
/*adjust spacing around the event details*/
.decm-show-detail-center {
margin: 20px;
}
This snippet will make the event featured image square in the Events Feed module. This can be sued in the Events Feed module. The idea here is to use the snippets from our regular image aspect ratio tutorial.
/*set the event image height*/
.decm_event_display .ecs-event .act-post img {
position: relative;
height: 200px;
object-fit: cover;
}Events Carousel Module
/*set a min height for each event in the carousel to make them equal*/
.diec_event_carousel .ecs-event .act-post {
min-height: 250px!important;
}/*set the event image height*/
.diec_event_carousel .ecs-event .act-post img {
position: relative;
height: 200px;
object-fit: cover;
}Events Calendar Module
/*disable the event title link in the Events Calendar*/
.fc-calendar-title a {
cursor: none !important;
pointer-events: none !important;
}/*disable the event title link in the Events Calendar tooltip*/
.event_title_style h3 {
cursor: none !important;
pointer-events: none !important;
}
.event_title_style h3:hover {
text-decoration: none !important;
cursor: none !important;
pointer-events: none !important;
}/*adjust Days of the Week padding when the calendar is small*/
.decm_divi_event_calendar .fc-head-container .fc-widget-header th {
padding: 4px;
}/*past calendar days background color*/
.fc-day.fc-past {
background: #efefef;
}/*past calendar days text color*/
.fc-past .fc-day-number {
color: green!important;
}
/*hide Saturday and Sunday columns*/
.decm_divi_event_calendar .fc-sun, .decm_divi_event_calendar .fc-sat {
display: none;
}
.decm_divi_event_calendar .fc .fc-row .fc-content-skeleton td {
width: 100%;
}/*style the Events Calendar module title links*/
.decm_divi_event_calendar .fc-calendar-title a {
color: red!important;
}Events Page Module
When the event date has passed, and you view the single events pages, you will see a notice that says “This event has passed.” If you want to customize the colors, border, background, text, etc. then you just have to add this CSS snippet.
NOTE: This snippet is just the default styling, so you will need to remove or change each item below to achieve the desired result.
/*style the event has passed notice*/
.tribe-events-notices {
background: #d9edf7;
border-radius: 4px;
border: 1px solid #bce8f1;
color: #3a87ad;
margin: 10px 0 18px;
padding: 8px 35px 8px 14px;
text-shadow: 0 1px 0 #fff;
}When the event date has passed, and you view the single events pages, you will see a notice that says “This event has passed.” If you want to hide this notice, just add the following CSS snippet to your website.
/*hide the event has passed notice*/
.event_passed_notice {
display: none;
}