Customizing Listing Buttons

The purchase ticket buttons are generated entirely by CSS, which means they are crazy easy to customize. Here’s all you have to do…

Pro Tip: you can add different styles for first and second links if desired, these styles apply to both.

Here are the default styles, modify as desired and include as Custom CSS.

.vem-listing a.purchase-tickets-link {
padding: 12px 16px;
background-color: #cfcfcf;
color: #151515;
display: inline-block;
}
.vem-listing a.purchase-tickets-link:hover {
background-color: #666666;
color: #ffffff;
text-decoration: none
}
.vem-listing .vem-single-event-date-ticket-link {
margin: 16px 0;
}

Calendar Import Buttons

You can follow the same process for the Google and iCal import buttons. Here are the default styles, modify as desired and include as Custom CSS.

.vem-single-event-date-import-link a.google {
background-color: #cfcfcf;
padding: 6px 12px;
color: #000000;
margin-right: 8px;
}
.vem-single-event-date-import-link a.google:hover {
background-color: #666666;
color: #ffffff;
text-decoration: none;
}
.vem-single-event-date-import-link a.ics {
background-color: #cfcfcf;
padding: 5px 8px;
color: #000000;
margin-right: 8px;
}
.vem-single-event-date-import-link a.ics:hover {
background-color: #666666;
color: #ffffff;
text-decoration: none;
}
.vem-listing .vem-single-event-date-import-link {
margin: 20px 0;
}
.vem-listing .vem-one-occurrence {
margin-bottom: 24px;
}