Single post

Vizou Events Manager – Styles

Default styling

The plugin comes with default CSS and a basic layout. Both can be overridden via a folder and files added to your theme. Images added to the main editor area will appear in the “notes” for the event, allowing for flexible display of photos, logos, etc. This allows for more flexibility with or without using style or layout overrides.

Override the default CSS

  1. In your WordPress admin, visit the Events/Settings page and tick the box to override the default stylesheet.
  2. Copy the plugin’s default stylesheet vizou-events.css (from assets/css/vizou-events.css)
  3. Open it in a text editor and copy the contents into your own theme’s style.css
  4. Customize the events CSS to taste

Below are a list of available classes that you can modify. Depending upon your own stylesheet and where you add the events to it, you may need to use !important to override a particular class or selector.

.event h3 { font-size: 1.5em !important; }

  • .vizou-events-container
  • .single-event-wrapper
  • .event
  • .event-date
  • .event-time
  • .event-start-date
  • .event-end-date
  • .event-tickets
  • event-status
  • .event-info-link
  • .event-thumb
  • .event-address
  • .event-street
  • .event-city
  • .event-province
  • .event-country
  • .event-artist
  • .event-venue
  • .event-tour
  • .venue-first
  • .artist-first
  • .event-past
  • .event-cancelled
  • .request-show-link

Use .single-event-wrapper to target styles on the single Event template.

The current default CSS hides certain elements by default when events are past – you can hide other elements – or make them visible – by copying the following to your theme’s style.css and modifying it.

.event.event-past .event-cancelled,
.event.event-past .right,
.event.event-past .tour,
.event.event-past .event-end-date,

.event.event-past a.post-edit-link,
.event.event-past .event-tickets,
.event.event-past .event-time,
.event.event-past .event-thumb,
.event.event-past .event-street,
.event.event-past .event-notes,
.event.event-past .event-status {
display: none;
}