Code by Day | Explore By Weekend

Bonus Customization Resources for the Divi Events Calendar Plugin by Pee Aye Creative

Home » Docs » Divi Events Calendar » Bonus Customization Resources

Documentation & Support

Bonus Customization Resources

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 text of the no results message*/ 
.no-events.et_pb_module > div { 
  font-size: 24px; 
  color: #000000; 
  font-weight: bold; 
  text-align: center;
} 
/*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

Make More Info Button Fullwidth
/*made Events Feed more info button fullwidth*/
.act-view-more {
  display: block;
}
Two Columns On Tablet
/*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 To The Single Event Page
/*disable the event title link in the Events Feed*/
.decm_event_display .entry-title a {
pointer-events: none;
}
Disable The Event Category Links
/*disable the event category link in the Events Feed*/
.decm_event_display .ecs-categories a {
    pointer-events: none;
}
Adjust Event Details Spacing
/*adjust spacing around the event details*/

.decm-show-detail-center {
	margin: 20px;
}
Set The Featured Image Height
/*set the event image height*/

.decm_event_display .ecs-event .act-post img {
	position: relative;
	height: 200px;
	object-fit: cover;
}

Events Carousel Module

Make Each Event Equal Height
/*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 Featured Image Height
/*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
/*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 Tooltip
/*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 Calendar Is Small
/*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
/*past calendar days background color*/
.fc-day.fc-past {
  background: #efefef;
}
Past Calendar Days Text Color
/*past calendar days text color*/
.fc-past .fc-day-number {
color: green!important;
}
Hide Saturday And Sunday Columns
/*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%;
}
Event Title Link Color
/*style the Events Calendar module title links*/
.decm_divi_event_calendar .fc-calendar-title a {
    color: red!important;
}

Events Page Module

Style Event Has Passed Notice
/*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;
}
Hide Event Has Passed Notice
/*hide the event has passed notice*/
.event_passed_notice {
  display: none;
}

Last updated Jan 19, 2021 @ 4:17 pm

Get Support

Something not going well? We are happy to help!

All we ask is that you browse our documentation first before contacting us. We add anwers to every question we receive.

Is the question or issue related to WordPress?

If yes, please contact your hosting provider for help.

Is the question or issue related to Divi?

If yes, please be sure read the Divi documentation or contact Elegant Themes support.

Is the question or issue related to our product?

If you think the answer is yes, then please fill out the form and we will be happy to help get this resolved!

Pin It on Pinterest

0

Your Cart