> For the complete documentation index, see [llms.txt](https://docs.crowdwork.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/crowdwork.com-page-styling-community-guide.md).

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

{% hint style="warning" %}
**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](https://docs.crowdwork.com/for-theatres/embedding-a-widget) on your own site and style it with [Style Your Widget (Start Here)](https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/match-the-widget-to-your-brand).
{% endhint %}

## 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](https://docs.crowdwork.com/for-theatres/tracking-pixels-and-conversion-events)). A `<style>` block pasted there applies to those pages.

1. Go to [**Theatre > Theatre Details > Edit**](https://crowdwork.com/dashboard/theatres/0/edit#section-tracking) 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.

{% hint style="danger" %}
**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.
{% endhint %}

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

```xml
<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.

```xml
<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.

{% hint style="info" %}
**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](https://docs.crowdwork.com/contacting-support) with any other widget question.
{% endhint %}