CSS Customization

Hey @style960,

I have plans to make the plugin styling more customizable but nothing to report right now. I did however add css classnames to all the elements so folks can override the style themselves (with css knowledge).

Try adding some of these custom css styles and feel free to expand on them to fit your needs:

Theme font:

.blocks-for-eventbrite-css-wrapper .event__single * {
    font-family: Inter !important;
}

Event List:

.blocks-for-eventbrite-css-wrapper .event__single {
    max-width: none !important;
    flex: 1;
}

Margin Bottom:

@media (max-width: 767px) {
.blocks-for-eventbrite-css-wrapper .event__single {
    margin-bottom: 20px;
}
}

Honestly not sure, I think you’re going to run into problems trying to make this layout work since each event card (when i first built it) was expected to have a certain width so that the featured image and event details don’t get blown out or too squished. I also wanted to make sure they generally look good one you only have 1 or 2 events in a row.

The event grid is using css flex-box which these days is not the best at defining grid columns and rows. I will eventually switch this over to use css Grid since you can define grid details much easier. I think in its current state it would be better to stick with the default layout.

If you do want to continue hacking it, there is a css class name available for every element that you can keep overriding. You would probably need to find where the flexbox is set to wrap.

Yeah flexbox is not easy to use for grids. The “Event List” suggestion I made is setting flex: 1 so that’s why the image is going to stretch.

If you want to keep trying to customize this for your specific grid needs you should look at CSS Grid instead of flexbox. Here is an example that will get you close. Beyond this you will need to learn how to use CSS Grid for your specific needs as this should just be used as a starting place (if need be).

CSS Grid:

@media (min-width: 767px){
    .event__list{
        display: grid !important;
        grid-row-gap: 20px;
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    }
}

I don’t have a specific timeline for adding more styling options as I haven’t received many requests for it yet but I do plan on adding more features in the next few months or so when time permits.

Hope this helps and good luck with your styling!

Jon