Bonus, Bonus, Bonus
Our modules have tons of features, and we are adding new settings all the time! But sometimes you may want something unusual or custom, and that’s the beauty of WordPress. On this page, you will see a list of code snippets related to each module. You are welcome to use these, but just keep in mind that these are bonus snippets, and we cannot provide support or additional customization for them. These are for you to get started and use.
Where To Place The Code
Most of the code below is CSS, but there is a few snippets of jQuery. You can find the instructions for each in the toggles below.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
Snippets To Features
From time to time if a snippet is very popular we will consider adding it as a setting in the modules, so keep that in mind and always check our changelog and release posts.
Tutorials
Besides the snippets, sometimes we make short guides about how to implement them. Here is a list of those bonus tutorials:
Events Feed Module
You can target the Events Feed module with .decm_event_display
Change The Order Of Event Image And Details
This will move the entire details section (title, details, excerpt, button) to the top, and move the image to the bottom.
/*make the event elements flexible*/
.decm_event_display .ecs-event .row {
display: flex;
flex-direction: column;
}
/*details*/
.decm_event_display .ecs-event .col-md-12 {
order: 1!important;
}
/*image*/
.decm_event_display .ecs-event .decm-show-image-left {
order: 2!important;
}Change The Order Of Event Items
This allows you to change the default order of the title, details, excerpt, and button. Make sure to assign a number from 1 through 4 for each item.
/*make the event elements flexible*/
.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 sure 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;
}Change The Order Of Callout Box Items
This allows you to change the default order of the items in the Callout Box. Make sure to assign a number from 1 through 4 for each item.
/*make the callout box display flex*/
.decm_event_display .callout-box-grid,
.decm_event_display .callout-box-cover,
.decm_event_display .callout-box-list {
display: flex;
flex-direction: column;
}
/*date*/
.callout_date {
order: 4;
}
/*month*/
.callout_month {
order: 3;
}
/*day of the week*/
.callout_weekDay {
order: 1;
}
/*year*/
.callout_year {
order: 4;
}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;
}
Stack List Layout Columns On Tablet
/*stack list layout columns on Tablet*/
@media (max-width: 981px) {
.decm_event_display .col-md-2 {
width: 100%;
}
.decm_event_display .col-md-4 {
width: 100%;
}
.decm_event_display .col-md-5 {
width: 100%;
}
}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 Featured Image Height
/*set the event image height*/
.decm_event_display .ecs-event .act-post img {
position: relative;
height: 200px;
object-fit: cover;
}Make Entire Event Clickable In Cover Layout
/*add a neceassry position to the events*/
.decm-events-details-cover {
position: relative;
}
/*make the title link spread over the entire event*/
.decm-cover-overlay-details>.decm-events-details-cover>.entry-title a:after {
position: absolute;
display: block;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
}
/*change the mouse cursor into a pointer*/
.decm-events-details-cover:hover {
cursor: pointer;
}Events Filter Module
You can target the Events Filter module with .decm_event_filter
Change The Word "Search" In The Search Button To Something Else
<script>
jQuery(document).ready(function(){
setInterval(function(){
jQuery(".dec-search-filter-button").html("Custom Text");
},100)
})
</script>Style The Filter Reset Button
/*style the filter reset button*/
.decm_event_filter #dec-filter-remove{
color:red;
}Change The Width Of Filter Dropdowns
/*change width of filter dropdowns*/
.decm_event_filter_0 .dec-filter-list, .daterangepicker .ranges ul {
width: 300px;
}Style The Inline Category Filter Buttons Differently
/*style the inline category filter buttons*/
.dec-filter-event-inline li:nth-child(1) {
background: red;
}
.dec-filter-event-inline li:nth-child(2) {
background: blue;
}
.dec-filter-event-inline li:nth-child(3) {
background: green;
}
.dec-filter-event-inline li:nth-child(4) {
background: yellow;
}
.dec-filter-event-inline li:nth-child(5) {
background: purple;
}
.dec-filter-event-inline li:nth-child(6) {
background: orange;
}Events Calendar Module
You can target the Events Calendar module with .decm_divi_event_calendar
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;
}Replace Navigation Arrows
/*replace previous navigation arrow*/
.decm_divi_event_calendar .fc-icon-chevron-left:before {
content: "";
font-family: ETModules;
}
/*replace next navigation arrow*/
.decm_divi_event_calendar .fc-icon-chevron-right:before {
content: "";
font-family: ETModules;
}Style Featured Events
/*style the main event in the calendar grid*/
.decm-featured-event {
background-color: red !important;
border: 2px solid blue !important;
color: #000 !important;
/*Change Timing color*/
transition: all 0.2s ease-in-out;
cursor: pointer;
}
/*change color of event title*/
.decm-featured-event .fc-calendar-title a {
color: #000 !important;
/*Change title color*/
transition: all 0.2s ease-in-out;
cursor: pointer;
}
/*style the featured event background and time text on hover*/
.decm-featured-event:hover {
background-color: blue !important;
border: 2px solid red !important;
color: #fff !important;
}
/*change the color of event title on hover*/
.decm-featured-event:hover .fc-calendar-title a {
color: #fff !important;
}
/*adjust the list view for similar results*/
.decm-featured-event:hover td {
background-color: blue !important;
color: #fff !important;
transition: all 0.2s ease-in-out;
}Style The Time In Day/Week View
/*day and week view all day*/
.decm_divi_event_calendar .fc-axis {
color: red;
}
/*day and week view time*/
.decm_divi_event_calendar .fc-axis.fc-time {
color: red;
}Style The Time In List View
/*list view time*/
.decm_divi_event_calendar .fc-list-item-time {
color: red;
}Hide The Time In List View
/*hide time in Events Calendar List View*/
.decm_divi_event_calendar .fc-list-item-time.fc-widget-content {
display: none;
}Style Multi-Day Events
/*style multi-day events*/
.decm_divi_event_calendar .fc-start.fc-not-end, .decm_divi_event_calendar .fc-end.fc-not-start {
background: red!important;
}Move Loader Animation Up
/*move loading animation up*/
.decm_divi_event_calendar.spinner_calendar {
margin-top: -400px;
}Hide Event Title Text On Desktop
/*hide event title text on desktop*/
.decm_divi_event_calendar .fc-content {
display: none;
} Change Order Of Date And Title In Calendar Days
.fc-title {
display: flex;
flex-direction: column;
}
.fc-calendar-title {
order: 1;
margin-top: -16px;
}
.fc-calendar-time {
order: 2;
}Events Carousel Module
You can target the Events Carousel module with .diec_event_carousel
Hide Navigation Dots On Desktop
/*hide navigation dots on desktop*/
@media (min-width: 981px) {
.diec_event_carousel .owl-dots {
display: none;
}
}
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 .row {
min-height: 500px!important;
}Disable The Event Title Link To The Single Event Page
/*disable the event title link in the Events Carousel*/
.diec_event_carousel .entry-title a {
pointer-events: none;
}Disable The Event Image Link To The Single Event Page
/*disable the event image link in the Events Carousel*/
.diec_event_carousel .decm-show-image-left a {
pointer-events: none;
}
Disable The Event Category Link To The Event Category Page
/*disable the event category link in the Events Carousel*/
.diec_event_carousel .ecs-categories a {
pointer-events: none;
}
Set The Featured Image Aspect Ratio
/*set the event image aspect ratio*/
.diec_event_carousel .ecs-event .act-post img {
aspect-ratio: 4 / 3;
object-fit: cover;
}Also refer to this resource to learn more about aspect ratio.
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;
}Change The Scroll Transition Speed
/*change the transition speed of the Events Carousel module*/
.diec_event_carousel .owl-stage {
transition: all 1.25s ease!important;
}Remove @ Symbol Before Time
<script>
jQuery('.ecs-eventTime.duration.time').text(function (_,txt) {
return txt.replace(/@/g, '');
});
</script>Make Entire Event Clickable
/*add a neceassry position to the events*/
.diec_event_carousel .ecs-event .act-post {
position: relative;
}
/*make the title link spread over the entire event*/
.diec_event_carousel .ecs-event .act-post .entry-title a:after {
position: absolute;
display: block;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
}
/*change the mouse cursor into a pointer*/
.diec_event_carousel .ecs-event .act-post:hover {
cursor: pointer;
}Events Page Module
You can target the Events Page module with .diec_event_page
Style The Add To Calendar Links As Buttons
/*style the add to cart links as buttons*/
.diec_event_page p.ecs-show_calendar,
.diec_event_page p.ecs-showical-export,
.diec_event_page p.ecs-showoutlook-link {
border-radius: 50px;
background-color: #0048FF;
padding: 15px 30px!important;
text-decoration: none;
margin-right: 10px;
}Single Events Page
Target Past Evens With CSS Class
You may want to change styling, hide modules, etc. on past events. However, The Events Calendar does not have a default class to target past events. This is not related to our plugin specifically, but we wanted to know the answer too. A customer Bryan Howell shared the following code with us that adds a class “.tribe-is-past” to single event pages that are past events. You can use to target any item within the body of single events.
Add PHP To Functions.php file
add_filter('body_class', 'tribe_events_past_events_body_class');
function tribe_events_past_events_body_class($classes) {
if (tribe_is_event()):
global $wp_query;
$event_date = tribe_get_start_date(null, false, 'Y-m-d');
if (isset($event_date)) {
$today = current_time('Y-m-d');
$is_past = strtotime($event_date) < strtotime($today);
if ($is_past) {
$classes[] = 'tribe-is-past';
}
}
endif;
return $classes;
}
Add CSS to Divi Theme Options or style.css file
body.tribe-is-past .YOUR CLASS HERE {
YOUR CODE HERE
}
