How do I customize the upcoming events widget on my website?

See how to customize the appearance of your upcoming Zoom events on your website using the Zoom ticketing platform, Tixoom.

Written by AlexLast update 3 years ago

Once you've added your widget showcasing your upcoming events, you might want to change how it looks.

We've made it easy to do this by setting a number of classes which you can customize using CSS stylesheets. Here's each element:

  • table.tixoom- this is the outermost table
    • div.tixoom-event- this is the event name
      • span.tixoom-date - this is the date the event's happening on, by default has opacity: 0.3 but you can override this using !important
    • a.tixoom-button - this is the 'Get a ticket...' link, visible if tickets are available for sale.

Here's an example, styling the widget to use a specific font and customizing how the 'Get a ticket...' buttons look:

.tixoom {
  font-family: Arial, Helvetica, sans;
.tixoom-event {
  font-size: 24px;
.tixoom-date {
  font-size: 12px;
a.tixoom-button {
  display: inline-block;
  padding: 6px 12px;
  font-size: 18px;
  text-decoration: none;
  color: white;
  background-color: blue;
  border-radius: 4px;


Did this answer your question?