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

Auto Vertically Center Align The Image And Details
/*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;
}

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;
}
Custom Pagination Text
/*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

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;
}
Center The Tooltip On Mobile (Will Be Fixed In Future Update)
/*center tooltip on mobile*/
.tooltip {
    left: 10%!important;
    top: 50%!important;
    width: 80%;
    transform: 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;
}
Replace Navigation Arrows
/*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

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 Mar 5, 2021 @ 12:05 pm

Get Support

Have a question? Something not going well? I am happy to help!


Pin It on Pinterest

0

Your Cart