Custom CSS styling guide

Open the Switchboard, go to Custom CSS Override and press Copy AI brief. Paste it into ChatGPT, Claude or any AI chat, then describe the look you want after the last line, for example: make the event titles bigger and the buttons square.

Paste the CSS it gives you into the Custom CSS box and press Save.

Custom CSS shows on your live website, not in the Switchboard preview. After saving, open the page on your site where the widget appears and refresh it. If you do not like the result, open History in the Switchboard, load the version from before, and press Save to put it back.

1. Start every selector with a StageWire class (the ones beginning .sw-). Do not write html, body, :root or .stagewire-embed-wrapper: everything you write is already placed inside the widget.
2. To style the widget's outer box itself, or to change a variable, use the & selector, for example: & { --sw-accent: #e4572e; border-radius: 16px; }
3. No @import, @font-face or @keyframes. They are removed or will not work. Use one of the fonts already loaded, or a system font such as Georgia or Arial.
4. Match the selector you are overriding. A rule for .sw-card will not beat the built-in .sw-list .sw-card rule; write .sw-list .sw-card instead.
5. Do not set display, opacity, filter or transform on .sw-card, .sw-tvcard or .sw-img. Search, TV paging, Cinematic Scroll and Image Zoom control those while the page runs.
6. To react to the widget's width rather than the screen's, use @container (max-width: 500px) { ... }. Ordinary @media queries also work.
7. Background images must use full https:// addresses.
8. Prefer the Switchboard settings for colours, fonts and sizes. Use Custom CSS for what the settings cannot do.

Shown when search or the List, Grid and Month switcher is turned on

Opens when a visitor clicks a card or Read More

Shown when Month is the layout or is turned on in the switcher

Shown when the layout is Carousel

Shown when the output is a TV Display

These hold the values set in the Switchboard. Read them with var(--sw-accent) in your own rules, or change one inside & { }.

Inter, Roboto, Poppins, Montserrat, Lato, Oswald, Bebas Neue, Anton, Playfair Display, Merriweather, Cormorant Garamond. You can also use system fonts such as Georgia, Arial or Helvetica.

One event in List layout, trimmed to the parts you can style.

<div class="stagewire-embed-wrapper">
  <header class="sw-header">
    <div class="sw-kicker">Venue name</div>
    <h2 class="sw-title">Live <span class="sw-accent">Music</span></h2>
  </header>
  <div class="sw-toolbar">
    <div class="sw-tabs"><button class="sw-tab on">List</button><button class="sw-tab">Grid</button></div>
    <input class="sw-search" type="search">
  </div>
  <div class="sw-feed sw-list">
    <article class="sw-card">
      <div class="sw-imgwrap"><img class="sw-img"></div>
      <div class="sw-body">
        <div class="sw-date">Fri 10 Oct · 8:00 PM</div>
        <h3 class="sw-name">Event title</h3>
        <div class="sw-meta">Venue · Address</div>
        <p class="sw-desc">Short description</p>
        <div class="sw-actions">
          <button class="sw-btn ghost">Read More</button>
          <a class="sw-btn">Get Tickets</a>
        </div>
      </div>
    </article>
  </div>
</div>