Divi Design Tips Blog

Frustration Vented (#01) : CSS Styling On Eventbrite Feed

Here's how we used some basic CSS to style an Eventbrite feed in WordPress using Divi.

What We Created: An Eventbrite Feed
How We Did It: WordPress, Divi, one plugin, an API and some CSS
Main Features: It looks better than it did!
Plugins We Used:

See It In Action

In a new blog mini-series, where we vent our frustrations on how sometimes things don’t look as good as you want them to, we show how we styled an Eventbrite plugin using CSS.

Before we start, as a little disclaimer: there is a premium version of the Display Eventbrite Events plugin available, which probably has more styling options – this is not a dig at the plugin developers (who are UK based, which we love).

The backstory is… we built a simple Divi module layout for a client to display their upcoming events. But they kept forgetting a) how to do it and b) to do it full stop.

So, we looked for a free plugin to automate the feed and found one that does the job.

However (and this is possibly due to a Divi CSS conflict) the feed didn’t display as we’d expected….

Before adding CSS rules, the image was the wrong with and the text was un-styled and plain.

By inspecting the CSS that was styling the feed as it was, we were able to change the following:

/* Eventbrite Styling */

.widget {
text-align: center;
}

.widget .eaw-block .eaw-thumb {
width: 1000px;
}
.widget .eaw-block h3 {
font-size: 40px;
color: #1b545d;
font-weight: bold;
}
.widget .eaw-block .eaw-time {
color: #d14e54;
font-size: 20px;
font-weight: bold;
}
.widget .eaw-block .eaw-summary {
font-size: 16px;
line-height: 1.2em;
margin-top: 20px;
margin-bottom: 20px
}

/* End of Eventbrite Styling */

This CSS centralised everything, adjusted the width of the image and made more of the text.

Eventbrite Feed In WordPress

After adding the CSS, the feed is more on-brand for the client.

About The Divi Design Tips Blog

We use Divi as our primary way to build WordPress websites. Our main focus in always on the design, ‘look and feel’ and the user experience of the websites we create. 

The Divi Design Tips Blog isn’t intended as a how-to-use Divi guide, as there are loads of great resources out there for that already. 

Instead, we launched the blog series as our way of giving an insight into some of the ways we use Divi, associated plugins, and custom CSS, Javascript and PHP, to get things looking – and working – how we want them for our clients.