Ticxz

Styling Your Event

The styling options allow you to customize the appearance of your event's ticket shop to match your brand identity. This guide explains the available customization options.

Accessing Styling Options

There are two places to customize your event's appearance:

  1. Branding tab: In Event Settings, the Branding tab lets you upload images and set primary and secondary colors
  2. Styling page: The dedicated Styling page provides a full editor with live preview and advanced options

Images

Banner

  • Upload a banner image for your event
  • The image is cropped to a fixed aspect ratio (100:30)
  • A cropping tool is provided to select the visible area

Logo

  • Upload your event or organization logo
  • Displayed at 200x200 pixels (aspect ratio is preserved)

Colors

Customize the color scheme of your ticket shop:

  • Primary: Used for buttons, headers, and key elements
  • Secondary: Used for accents and secondary elements
  • Background: The main background color of your ticket shop (available on the Styling page)
  • Card: The background color of card elements (available on the Styling page)

Colors are entered as hex values or selected using the color picker.

Card Styling

Customize the appearance of card elements in your ticket shop:

  • Variant: Choose between "Basic" (filled) or "Outlined" (border only)
  • Border Width: Adjust the border thickness (0-10), only available for the Outlined variant
  • Border Color: Set the border color, only available for the Outlined variant
  • Border Radius: Adjust the corner rounding (0-10)
  • Elevation: Set the shadow depth (0-24)

Typography

Choose fonts for your ticket shop:

  • Text Font: The font used for body text
  • Header Font: The font used for headings

A selection of fonts is available, including Inter, Plus Jakarta Sans, Noto Sans, Helvetica, Georgia, Times New Roman, JetBrains Mono, Dancing Script, Concert One, Orbitron, and more.

Theme Mode

Toggle between light and dark mode for your ticket shop using the sun/moon icon.

Live Preview

The Styling page includes a live preview that shows how your ticket shop will look with the current settings. On desktop, the preview is shown alongside the controls. On mobile, a floating button opens the settings drawer.

Next Steps

After styling your event, you may want to:

  1. Set up ticket types for your event
  2. Configure time slots if you're running a time-slotted event
  3. Create promo codes for special discounts