1. Home
  2. Docs
  3. Plugin Features
  4. Events Calendar
  5. Display Block of Events
  6. CSS Styling Options EC

CSS Styling Options EC

Add a background to even or odd event listings

To add a background to all of your event block listings, add this code to your CSS customizer. Change the border color by updating #f8f8f8 to the HTML color of your choice (external link).

.single_event {background: #f8f8f8;}

To add a background to odd or even event block listings only, add this code to your CSS customizer:

.single_event.odd_post {background: #f8f8f8;}

or…

.single_event.even_post {background: #f8f8f8;}
Upcoming-Events-Block-background

Change font size – event title

To change the font size of the event title, use the Display Event block settings.

Add a border to event listings

To add a border to your event listings, use the Display Event block settings.


Add space around event title

To add some space above and below the event title, add this bit of CSS to your customizer:

.event_title {padding: 26px;}
Upcoming-Events-Block-title-padding

Make event date larger

To make the event date a bit larger, add this CSS to your customizer:

.event_date {font-size: x-large;}
Event-Calendar-plugin,-upcoming-event-page-WordPress-10

Are you trying to create a specific look not displayed here?
Reach out to our support team, we’d be happy to help!

Was this article helpful to you? Yes No