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

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:

<style>
.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;
}
</style>