Styling

Blocks sit directly in your page, with no shadow DOM and no iframe. They load no CSS. Everything you've written for the rest of your website therefore applies to them too: your font, your links, your buttons.

Classes

Every part has a fixed class starting with ts-, and parts within a block use two underscores:

.ts-ticket { border: 1px solid #ddd; border-radius: 1rem; padding: 1rem; }
.ts-ticket__name { font-weight: 700; }
.ts-ticket__price { font-size: 1.25rem; }
.ts-cart-button__button { background: #e8503a; color: #fff; border: 0; }

The blocks themselves are tags of their own and display: inline in the browser by default. If one should be a block, tell it so:

ts-event-cover, ts-ticket-list { display: block; }

States

What changes is set as data-… on the element. That lets your CSS react without any JavaScript:

Element	Attribute	Values
.ts-ticket	data-state	open, selected, soldout, unavailable
.ts-product	data-state	open, selected
.ts-seat	data-state	free, picked, taken
.ts-seat-area	data-state	free, picked, taken
.ts-event-list	data-state	loading, ready
.ts-event-status	data-state	cancelled, past, salesOver, salesPaused
.ts-cart-button	data-state	empty, ready, pending
.ts-order-timer	data-urgent	present with less than a minute left
.ts-field, .ts-check	data-invalid	present if the input is missing or wrong
.ts-notice	data-tone	info, success, warning, danger
.ts-calendar__cell	data-events, data-today, data-selected	present if it applies
.ts-ticket-card	data-state	valid, cancelled, blocked

.ts-ticket[data-state="selected"] { border-color: #e8503a; }
.ts-ticket[data-state="soldout"] { opacity: .5; }
.ts-order-timer[data-urgent] { color: #c00; font-weight: 700; }

A complete example with cards and a grid is in the article What are Elements?.

Seat map

The seat map is an SVG graphic. It adapts to the width and needs no fixed height. Every seat is an element of its own you can change with CSS. The category's colour is its default, and your CSS takes priority:

.ts-seat-map__svg { max-height: 70vh; width: 100%; }
.ts-seat[data-state="free"] .ts-seat__circle:hover { stroke: #171331; stroke-width: 2; }
.ts-seat[data-state="taken"] .ts-seat__circle { fill: #ccc; }
.ts-seat[data-state="picked"] .ts-seat__circle { fill: #e8503a; }

The legend gives you your categories' colours as the CSS variable --ts-seat-color:

.ts-seat-map__legend-item::before {
  content: ""; display: inline-block; width: .75rem; height: .75rem;
  border-radius: 50%; background: var(--ts-seat-color, #ccc);
}

Changing texts

All texts come translated from TickySmart. You set your own at startup, and the names are under JavaScript and events:

<script>
  addEventListener("DOMContentLoaded", () => {
    TickySmart.init({ messages: { "shop.checkout": "Buy now" } });
  });
</script>

For single buttons and links it also works with no script: <ts-cart-button label="Buy now"></ts-cart-button> and <ts-event-link label="Tickets"></ts-event-link>.

Language

The language comes, in this order, from: data-locale on the script, ?lang= in the address, the choice in the ts-language-switch switcher, <html lang="…"> of your page and finally the browser. Your event texts appear in this language, otherwise in your workspace's default language.

Amounts, dates and times follow the language and your workspace's country.

Common questions

Why does everything look so plain without CSS?

That's on purpose. We don't impose a design you'd have to work against. Buttons, lists and headings look like the ones on your page or the browser's defaults.

How big is the QR code?

As wide as its space. Limit it with .ts-qr { width: 10rem; }. Its background stays white, otherwise some scanners can't read it. Give it a white margin on dark pages.