Styling the plugin

Hi Melanie,

Thank you! ??

Yes, a custom CSS would be a way to do that. Check this article in our documentation for all possible CSS selectors.

For example, if you want to style the event description the same way as the other body text on your website, the custom CSS would be like this:

.event-feed-for-eventbrite-app-id-3481 .eventbrite-feed .eventbrite-item-description {
    font-size: 16px;
    color: #515151;
}

With the help of developer tools in your browser (for getting the correct CSS selector for the element you want to customize), you can style all the aspects of the event feed. Still, it can be a bit challenging if you are not a developer.

If you are unsure how to use developer tools, I recommend asking a web developer to help you with this. For him, it should be an easy task.

Let me know if you need any more help with this ??

• This reply was modified 2 years, 9 months ago by Jan Pencik. Reason: code edit

Thank you Jan!

That is most helpful. I have managed to change all the different content sections, however can’t get the buttons to change. Any ideas what I’m doing wrong?

.event-feed-for-eventbrite-app-id-3481 .eventbrite-feed .eventbrite-item-buttons {
  font-size: 14px !important;
	letter-spacing: 0.7px !important;
	border-radius: 2px !important;
	text-transform: uppercase !important;
	padding: 14px 30px 14px 30px !important;
}

Also wondering if it’s possible to adjust the date format? My WordPress settings are set to day-month-year, however the Eventbrite feed is displaying month-day-year. I can’t see any settings to adjust this in either Eventbrite or your plugin.

Thank you
Melanie

Hi Melanie,

great job! With the button, you were almost there. Just target the button element that is descendant to your selector. So the code will be:

.event-feed-for-eventbrite-app-id-3481 .eventbrite-feed .eventbrite-item-buttons button {
    font-size: 14px !important;
    letter-spacing: 0.7px !important;
    border-radius: 2px !important;
    text-transform: uppercase !important;
    padding: 14px 30px 14px 30px !important;
}

Or if you want to style Buy button and View details button differently, replace the button selector with either .eventbrite-item-checkout or .eventbrite-item-details class.

Fantastic! Thanks Jan.

Any ideas about the date formatting issue I mentioned above?

Regards
Melanie

Hi Melanie,

the plugin has its own settings for date formatting. You can find it in Eventbrite Events → Settings and then click on the Date & address tab on top.

You can also find more information about this in our documentation.

Best Regards
Jan

Thank you! Not sure how I missed that one …

Regards
Melanie