Task · Custom themes

Write your own CSS

Restyle Tito's pages, emails, invoices, receipts and printed tickets with your own stylesheet, without replacing them.

5 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, a preview on the right.

   go.tito.io/acme/admin/customize?tab=look&code=1&zoom=50

3. Write a rule

   The preview follows as you type, so you can see a rule land before you keep it. To find a part's name, point at it in the preview, then click it to start a rule for it.

4. Select Save when you have finished

   What you write is kept as you go, so nothing is lost if you leave before you select it.

5. 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.

Writing in the editor

The editor colors selectors, properties and values, and numbers each line. A bracket or quote you open is closed for you. Press Cmd-F (Ctrl-F on Windows) to find text in your stylesheet, and Cmd-S (Ctrl-S) to save it.

If a rule can't be read, a red box above the editor quotes it as you type, and a mark appears beside its line. A missing closing bracket is the usual cause.

To leave the editor with the keyboard, press Esc and then Tab.

Choosing a screen

The menu above the preview chooses the screen. It has every page somebody booking passes through, so you can write a rule for the order page or a ticket and see it there.

The dropdowns beside it change who is booking and how, the same way they do in the rest of Customize.

What you can style

The panel under the editor lists the parts of the screen you're previewing, 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.

You can also start from the preview. Point at a part of the page and its name appears above it. Click it and the editor starts a rule for that part. If your stylesheet already has a rule for it, the editor takes you to that rule.

Some screens have no named parts. The variables listed above still reach them.

These are names in the page, 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.

Some parts are named by an attribute, written in square brackets. On the event page, [data-event-title] is the event's name, [data-event-meta] is the date and venue line under it, [data-ticket-name] is the name of each ticket, [data-ticket-price] is the price on each ticket, [data-stock] is the label saying how many are left or that a ticket is sold out, and [data-checkout-button] is the button that goes on to checkout. Write the rule with the brackets, as in [data-event-title] { font-size: 3rem; }. These names don't change either.

[data-checkout-button] names that button on every step of a booking, from the event page to the booking form and the payment. One rule, such as [data-checkout-button] { background: #1f7a3a; }, changes it on all of them.

The total, [data-total], isn't in the list. It only appears once somebody picks a ticket, so the preview has nothing to flash.

The widget

Your stylesheet reaches your widgets too, on every step. A widget uses the same names as the event page: ticket-row, [data-ticket-name], [data-ticket-price] and [data-checkout-button], which is the button at the foot of every step from Get tickets to the payment. A rule for one of them changes both.

A rule with one selector is enough. Tito's own styling on these parts gives way to yours. A color on ticket-row reaches each ticket's name too, as it does on the event page.

To see a widget as you write, choose The widget from the menu above the preview. Choose Event page to check the same rules there.

To color the bar at the top of each step of the widget, set --custom-step-header-background in your :root block. Set --custom-step-header-color too, and the step's name, Back and the close button take that color, as in :root { --custom-step-header-background: #0164b1; --custom-step-header-color: #ffffff; }.

To style the widget alone, start the rule with [data-widget], as in [data-widget] ticket-row { padding: 1rem; }. To leave the widget out, start it with :root:not([data-widget]).

The stylesheet of the website your widget is on doesn't reach the widget. Write those rules here instead.

Your rule for [data-checkout-button] also styles the Get tickets button Tito shows on your website. That's the button that opens a widget, and the copy that stays at the bottom of the screen while somebody picks tickets from a list. It takes the colors, background gradient, border, corners, shadow, capitals, letter spacing and font weight from your rule, and keeps your website's font. A rule inside @media or for :hover applies inside the widget only.

A font you load with @font-face works in the widget too. The website the font files are on has to allow your Tito address to load them.

The invitation's buttons

On the Invitation screen, each button is named by the answer it gives. button[data-response="yes"] accepts the invitation and button[data-response="no"] declines it. The button that confirms the attendee details afterwards is button[data-response="yes"] too.

The buttons are inside button-group, and a rule on it arranges them. button-group { flex-direction: row; } puts them side by side, and row-reverse puts the decline button first. Add button-group > button { flex: 1; } to make them the same width.

To make the two buttons look the same, give the decline button the button colors from Look: background: var(--custom-button-background-color), color: var(--custom-button-text-color) and border-color: transparent.

A rule with one selector is enough. Tito's own styling on these buttons gives way to yours, and these names don't change either.

Invoices, receipts and tickets

Your documents have a stylesheet of their own, so a rule written for your pages never changes an invoice's PDF. The page a buyer opens an invoice on uses your pages' stylesheet for its header and footer, and a rule as broad as h1 can reach the invoice shown there too. Select Documents at the top of the editor to switch to it, and Pages to switch back. Choosing a document from the menu above the preview switches to the documents' stylesheet too.

It covers the invoice, the receipt, the refund receipt and the printed ticket, in the PDF and on the page a buyer opens. Each document's parts are listed under the editor, as a page's are:

• doc-invoice, doc-receipt, doc-refund and doc-ticket are each whole document. Put one in front of a part to style that part on that document only, as in doc-receipt doc-totals.
• doc-header, doc-from, doc-to, doc-lines, doc-totals, doc-legal and doc-foot are the parts of the invoice and the receipts.
• doc-payment is the payment details: the bank details on an invoice paid by bank transfer, and who took the payment on a receipt.
• doc-header, ticket-code, ticket-details and doc-foot are the parts of the printed ticket.

The document's own values are listed beside the editor: --doc-paper, --doc-ink, --doc-muted, --doc-line and --doc-font. Set them in a :root block, as you would for a page.

Download a sample PDF downloads the document in the preview with your stylesheet as it is now, saved or not.

Nothing that loads from another address reaches a document, on any address: url(), @import and @font-face are left out, and the editor lists the rules that lost something. For a logo or a font, use Documents on the Look tab.

Emails

Your emails have a stylesheet of their own too. Select Emails at the top of the editor to switch to it. The preview shows the order confirmation, and the menu above it has every other email. It reaches every email sent about the event: the order confirmation, the ticket email, reminders, invoice emails and the messages you send.

An email is built from different parts than a page, and each part has a class name, listed under the editor:

• .email-canvas is the background around the email, and .email-card is the card everything is on.
• .email-banner, .email-logo, .email-event-name and .email-when are the top of the email: the banner, your logo, the event's name, and the date and venue.
• .email-body is the inside of the card. .email-text is a paragraph or a list, and .email-heading is a heading, like Your tickets.
• .email-tickets is the list of tickets on an order's email, and .email-ticket is one person's ticket with its QR code.
• .email-button is a button's fill, edge and corners, and .email-button-label is the words on it.
• .email-section, .email-note, .email-signoff and .email-footer are a block of details like what was paid, your note, the sign-off and who sent it.

A rule only reaches an email when it names one of these. The editor lists any rule that names none of them, because it changes nothing in an email.

Nothing that loads from another address reaches an email: url(), @import and @font-face are left out, and the editor lists the rules that lost something. For your logo, a banner or a font, use the Look tab.

Most email apps show your stylesheet, including Apple Mail, Gmail and Outlook. A few older ones, like Gmail's app reading an address from another provider, show the email without it, so the email still has to read well with none of your rules.

Your rules apply in dark mode too. Switch the preview to dark to check, and add a @media (prefers-color-scheme: dark) block for anything that needs a different color there.

Send me a test sends the email in the preview, with your draft stylesheet, to the address you sign in with. It's the way to see the email in your own email app.

What a stylesheet can't do

It can restyle what's on the page, and move it around, but it can't put something there that wasn't. For your site's navigation and a footer with your own links, add your website’s header and footer to the theme. Anything else new on the page needs a theme file.

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

Where it shows

Your pages' stylesheet dresses every page somebody booking passes through, not only the event page: the booking form, the order page, a ticket, and any page you wrote yourself. Write a rule once and it holds all the way through.

All of it shows on your own address, youraccount.go.tito.io, in the preview beside the editor, and in the preview in Customize.

On the shorter go.tito.io/youraccount, anything that loads from another address is blocked: url(), @import and @font-face. So are properties we don't recognize. Everything else shows there too. When something is blocked, the editor lists what. When every rule is blocked, your pages on that address have no styling of your own.

The colors 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 color you set, so a rule can follow it instead of repeating the value, and changing it in Look changes the rule too.

Set one of these yourself and every page takes it, the same way a rule does. So --custom-button-background-color recolors the buttons on the event page, the booking form and the order page together.

These names don't change.

One name in the list has no control in Look: --custom-outlined-button-color, for the outlined buttons like the receipt button on the order page and Add to calendar. Until you set it, they keep your text color and the border around your fields. Set it and it becomes their text and their outline: :root { --custom-outlined-button-color: #c026f5; }.

Your emails use it too, for their outlined buttons. Emails don't read your pages' stylesheet, so this one name is read from it for them: write it on :root, outside any @media rule, as a color name like red or a hex color like #c026f5.

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.

To throw it away, select the number beside Publish, then Discard all.

Through the API

You can also save the stylesheet through the account API. Use /design/css for account defaults or /events/{slug}/design/css for one event, /design/document-css or /events/{slug}/design/document-css for the documents' stylesheet, and /design/email-css or /events/{slug}/design/email-css for the emails'. A save changes the draft. Publishing the design makes the stylesheet visible on public pages.