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.
![Alex](/files/image/128.png)
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.
- div.tixoom-event- this is the event name
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>
Did this answer your question?