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 Items
This allows you to change the default order of the title, details, excerpt, and button. Make make to assign a number from 1 through 4 for each item.
.decm-events-details, .col-md-8 {
display: flex;
flex-direction: column;
}
/*title*/
.entry-title.title1.summary {
order: 1;
}
/*details*/
.decm-show-detail-center {
order: 2;
}
/*excerpt*/
.ecs-excerpt {
order: 3;
}
/*button*/
.ecs-showdetail.et_pb_button_wrapper {
order: 4;
}
Change The Order Of Individual Event Details
This allows you to change the default order of the individual items within the event details, like date, time, location, etc. Make make to assign a number from 1 through 7 for each item.
/*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
/*prepare the parent div for flex alignment*/
.decm_event_display .act-post .row {
display: flex;
}
/*align two two columns to the center*/
.decm_event_display .col-md-4, .decm_event_display .col-md-8 {
align-self: center;
}
/*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;
}/*remove default previous pagination text*/
a.ecs-page_alignment_left {
visibility: hidden;
}
/*add new custom previous pagination text*/
a.ecs-page_alignment_left:before {
content: 'Custom Text Here';
visibility: visible;
}
/*remove default next pagination text*/
a.ecs-page_alignment_right {
visibility: hidden;
}
/*add new custom next pagination text*/
a.ecs-page_alignment_right:after {
content: 'Custom Text Here';
visibility: visible;
}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;
}/*center tooltip on mobile*/
.tooltip {
left: 10%!important;
top: 50%!important;
width: 80%;
transform: 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;
}/*replace previous navigation arrow*/
.fc-icon-chevron-left:before {
content: "";
font-family: ETModules;
}
/*replace next navigation arrow*/
.fc-icon-chevron-right:before {
content: "";
font-family: ETModules;
}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;
}