Task · Custom themes

Write your own CSS

Restyle Tito's pages with your own stylesheet, without replacing them.

4 steps · About 6 minutes

1. Open Customize on the event, then the Look tab

2. At the foot, under the line saying what the event is based on, select Your own CSS

   The editor takes over the window. Your stylesheet is on the left, your event page on the right.

3. Write a rule, and select Save

   The preview redraws with the change.

4. Go back to Look when you're done

   Your CSS belongs to the look the event is based on, so every event on that look gets it.

   Everything the Look tab does keeps working: your stylesheet loads on top of it. A theme file replaces a whole page and you write every part of it. A stylesheet changes how our page looks and leaves the page to us.

What you can style

The panel under the editor lists the parts of your event page, and what each one is. Choose one and it starts a rule for that part, then flashes the part in the preview. If the part is further down the page than the preview can show, the preview scrolls to it.

These are element names, not classes. ticket-row is a real tag in the page, and we don't change those names. Class names inside them are ours and do change, so a rule that uses one stops working without warning.

Your own header and footer

Two boxes take your own HTML: one at the top of every page, one at the foot. This is the one thing CSS can't do, which is put something on the page that wasn't there. Your site's navigation, a row of sponsors, a footer with your own links.

Words inside the page aren't here. What goes under the tickets, or on the order page once somebody has booked, is in the Words tab.

Where it shows

Your styling shows on your own address, youraccount.go.tito.io. Anybody arriving at the shorter go.tito.io/youraccount sees Tito's standard page instead, so share the first link.

We don't run anybody's own code on the address people sign in on. The colours and fonts you pick in Look reach both addresses, because those are values we check rather than code we run.

The colours you already picked

The palette from the Look tab is there as variables, listed beside the editor. var(--custom-button-background-color) is the button colour you set, so a rule can follow it instead of repeating the value, and changing it in Look changes the rule too.

These names don't change.

Mistakes

A rule the browser can't read is named, with the line it's on. Everything else in the stylesheet still applies.

Nothing reaches anybody booking until you select Publish in Customize. Discard throws it away.