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;
}Replace Details Label Text
If you want to change the words of the details labels, you first need to find the selector for that label, then add some jQuery snippet to change the text. This example is changing the location label.
Also check our general tutorial on this subject: Replace Any Text On Your Website
<script>
jQuery(document).ready(function(){
setInterval(function(){
jQuery(".decm_event_display .ecs-location .ecs-detail-label").html("Custom Text ");
},100)
})
</script>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 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;
} 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;
}
Also refer to this resource to learn more about aspect ratio.
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;
}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;
}Events Filter Module
You can target the Events Filter module with .decm_event_filter
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
/*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;
}