🖌️CrowdWork.com Page Styling (Advanced · Community Guide)

Change button colors and fonts on your crowdwork.com event pages with custom CSS, and how it interacts with your cookie notice.

A community guide, for people comfortable with CSS. Your crowdwork.com pages are built and updated by our team, and a future update can change or undo custom styles. Keep changes small, test them, and recheck after updates. To match your website without any of that, embed a widget on your own site and style it with Style Your Widget (Start Here).

How It Works

Your theatre's crowdwork.com pages (your Shows, Classes, Gift Cards, Memberships and Donate pages, plus each event page and its checkout) can include extra HTML you provide. That's the Custom Header HTML field under Custom Tracking Pixels in your theatre settings, the same place tracking pixels go (Tracking Pixels and Conversion Events). A <style> block pasted there applies to those pages.

1. Go to Theatre > Theatre Details > Edit and scroll to Custom Tracking Pixels.

2. Paste your CSS into Custom Header HTML, wrapped in <style> and </style> tags. If the field already holds tracking code, add your styles below it; don't replace it.

3. Save, then open one of your event pages to check the result.

This field is tied to your cookie notice. Anything in Custom Header HTML, styles included, only loads for visitors who click Accept on the cookie notice (or accepted earlier). Visitors who decline, or ignore it, see the standard look. And adding anything to this field turns the cookie notice on for all of your public pages, if it wasn't on already.

Change the Button Color

The main buttons on your event pages and in checkout (Get Tickets, Next, Purchase Tickets, Join Waitlist) share one class. Replace #8c1c3c with your color.

<style>
/* Get Tickets, Next, Purchase Tickets and Join Waitlist */
.btn-checkout,
.btn-checkout:hover,
.btn-checkout:focus {
  background-color: #8c1c3c !important;
  border-color: #8c1c3c !important;
  color: #ffffff !important;
}
</style>

Change the Heading Font

Your pages use Open Sans. This snippet switches the event title and headings to another font stack. Stick to fonts every device has (like Georgia) or ones already on the page, since this field is not the place to load web fonts.

<style>
/* Event and page headings in a font stack of your choice */
h1, h3 {
  font-family: Georgia, "Times New Roman", serif !important;
}
</style>

Classes You Can Target

Selector	What it is
.btn-checkout	Get Tickets, Next, Purchase Tickets, Join Waitlist and the checkout Close buttons (teal, #49bcab)
.btn-primary	The ticket quantity + button and the cookie notice's Accept button
nav.navbar	The tab bar: Shows, Classes, Gift Cards, Memberships, Donate
h1	The event name on an event page

What to Leave Alone

• Layout and hiding: don't hide, move or resize parts of the page, especially anything in checkout. A patron who can't see a field or button can't buy a ticket.

• Readability: keep strong contrast between text and background, and don't shrink text.

• Tracking code: if the field already holds a pixel, leave it intact and add your styles alongside it.

About support: custom CSS is yours to own. We can help with the widget itself, but troubleshooting custom styles falls outside our support scope. Contact us with any other widget question.