> 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.md).

# Custom Styling Solutions

## What This Guide Does

This guide provides **copy-paste CSS solutions** for the most common styling requests we receive. Choose your context below, then find your specific need.

## Which Method Do I Use?

{% hint style="info" %}
**Two different contexts require different methods:**

* **Styling widgets on YOUR WEBSITE** → Use the embed widget method
* **Styling YOUR PAGES on crowdwork.com** → Use the crowdwork.com method
  {% endhint %}

***

## Most Common Requests

### Change Button Colors

The #1 most requested customization. Here are ready-to-use solutions:

#### For Widgets on Your Website

Add this CSS to your website:

```css
<style>
/* Change button colors - simple version */
.btn-primary {
  background-color: #your-brand-color !important;
  border-color: #your-brand-color !important;
}

.btn-primary:hover {
  background-color: #your-hover-color !important;
  border-color: #your-hover-color !important;
}

.btn-light {
  background-color: #your-secondary-color !important;
  border-color: #your-secondary-color !important;
}
</style>
```

**Example with real colors:**

```css
<style>
.btn-primary {
  background-color: #8B4513 !important; /* ![#8B4513](https://singlecolorimage.com/get/8B4513/20x20) Saddle Brown */
  border-color: #8B4513 !important;
}

.btn-primary:hover {
  background-color: #654321 !important; /* ![#654321](https://singlecolorimage.com/get/654321/20x20) Dark Brown */
  border-color: #654321 !important;
}

.btn-light {
  background-color: #DAA520 !important; /* ![#DAA520](https://singlecolorimage.com/get/DAA520/20x20) Goldenrod */
  border-color: #DAA520 !important;
}
</style>
```

#### For CrowdWork.com Pages

{% hint style="warning" %}
**Community Resource:** Customizing crowdwork.com pages may break with platform updates and falls outside our official support scope.
{% endhint %}

Add this to your **Theatre Dashboard → Theatre Details → Custom Pixel Tracking** section:

```html
<style>
/* Change button colors on crowdwork.com pages */
.btn-primary {
  background-color: #your-brand-color !important;
  border-color: #your-brand-color !important;
}

.btn-primary:hover {
  background-color: #your-hover-color !important;
  border-color: #your-hover-color !important;
}

.btn-light {
  background-color: #your-secondary-color !important;
  border-color: #your-secondary-color !important;
}
</style>
```

***

### Change Fonts

#### For Widgets on Your Website

```css
<style>
/* Change font family */
.card-title {
  font-family: 'Your-Font-Name', Arial, sans-serif !important;
}

/* Or change all widget text */
.card {
  font-family: 'Your-Font-Name', Arial, sans-serif !important;
}
</style>
```

#### For CrowdWork.com Pages

```html
<style>
/* Change font family on crowdwork.com pages */
body {
  font-family: 'Your-Font-Name', 'Open Sans', Arial, sans-serif !important;
}

.card-title {
  font-family: 'Your-Heading-Font', Georgia, serif !important;
}
</style>
```

***

### Change Background Colors

#### For Widgets on Your Website

```css
<style>
/* Change card backgrounds */
.card {
  background-color: #your-background-color !important;
}
</style>
```

#### For CrowdWork.com Pages

```html
<style>
/* Change page background */
body {
  background-color: #your-background-color !important;
}

.card {
  background-color: #your-card-background !important;
}
</style>
```

***

## Complete Brand Theme Examples

For users who want comprehensive brand integration, here are complete themes using CSS variables:

### Theatre Brand Theme

#### For Widgets on Your Website

```css
<style>
/* Step 1: Define your brand colors */
:root {
  --cw-primary: #8B4513;
  --cw-secondary: #DAA520;
  --cw-accent: #DC143C;
  --cw-text: #2c2c2c;
}

/* Step 2: Apply your brand */
.btn-primary {
  background: linear-gradient(135deg, var(--cw-primary), var(--cw-secondary)) !important;
  border: none !important;
  color: white !important;
  font-weight: 600;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--cw-secondary), var(--cw-accent)) !important;
}

.btn-light {
  background-color: var(--cw-secondary) !important;
  border-color: var(--cw-secondary) !important;
  color: white !important;
}

.card {
  border-left: 4px solid var(--cw-primary);
}

.card-title {
  color: var(--cw-primary) !important;
}
</style>
```

#### For CrowdWork.com Pages

```html
<style>
/* Step 1: Define your brand colors */
:root {
  --cw-primary: #8B4513;
  --cw-secondary: #DAA520;
  --cw-accent: #DC143C;
  --cw-text: #2c2c2c;
}

/* Step 2: Apply your brand */
.btn-primary {
  background: linear-gradient(135deg, var(--cw-primary), var(--cw-secondary)) !important;
  border: none !important;
  color: white !important;
  font-weight: 600;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--cw-secondary), var(--cw-accent)) !important;
}

.btn-light {
  background-color: var(--cw-secondary) !important;
  border-color: var(--cw-secondary) !important;
  color: white !important;
}

.card {
  border-left: 4px solid var(--cw-primary);
}

.card-title {
  color: var(--cw-primary) !important;
}

h1, h2, h3 {
  color: var(--cw-primary) !important;
}
</style>
```

### Additional Theme Color Sets

Just replace the `:root` section with these color combinations:

**Ocean Theme:** ![Ocean Theme Colors](https://singlecolorimage.com/get/0077be/150x30) ![](https://singlecolorimage.com/get/00a8cc/150x30) ![](https://singlecolorimage.com/get/005f8a/150x30)

```css
:root {
  --cw-primary: #0077be;
  --cw-secondary: #00a8cc;
  --cw-accent: #005f8a;
  --cw-text: #2c2c2c;
}
```

**Minimalist Theme:** ![Minimalist Theme Colors](https://singlecolorimage.com/get/333333/150x30) ![](https://singlecolorimage.com/get/666666/150x30) ![](https://singlecolorimage.com/get/333333/150x30)

```css
:root {
  --cw-primary: #333333;
  --cw-secondary: #666666;
  --cw-accent: #333333;
  --cw-text: #333333;
}
```

**Forest Theme:** ![Forest Theme Colors](https://singlecolorimage.com/get/27ae60/150x30) ![](https://singlecolorimage.com/get/2ecc71/150x30) ![](https://singlecolorimage.com/get/1e8449/150x30)

```css
:root {
  --cw-primary: #27ae60;
  --cw-secondary: #2ecc71;
  --cw-accent: #1e8449;
  --cw-text: #2c2c2c;
}
```

***

## Need More Advanced Control?

For comprehensive styling documentation:

### For Widgets on Your Website

{% hint style="success" %}
[**→ Complete Embed Widget Styling Reference**](https://github.com/bp-crowdwork/cw-gitbook/blob/gitbook/the-academy/crowdwork-academy/custom-styling-solutions/link-to-embed-guide/README.md)

Comprehensive CSS class reference, advanced theming examples, and detailed technical guidance for styling widgets on your website.
{% endhint %}

### For CrowdWork.com Pages

{% hint style="info" %}
[**→ CrowdWork.com Page Styling (Community Guide)**](https://github.com/bp-crowdwork/cw-gitbook/blob/gitbook/the-academy/crowdwork-academy/custom-styling-solutions/link-to-crowdwork-guide/README.md)

Basic customization examples for your theatre's pages on crowdwork.com. Note: Community resource with limited official support.
{% endhint %}

***

## Troubleshooting

**Styles not applying?**

* Add `!important` to CSS rules
* Clear browser cache and refresh
* Make sure CSS comes after your widget code

**Colors look different than expected?**

* Test in different browsers
* Check that color codes are spelled correctly
* Ensure contrast is accessible

**Need to find the right CSS class?**

* Right-click on the element → "Inspect" to see the actual class names
* Use browser developer tools to test changes

***

**Need specific help?** [Contact our support team](https://github.com/bp-crowdwork/cw-gitbook/blob/gitbook/the-academy/crowdwork-academy/custom-styling-solutions/link/README.md) - while we can't troubleshoot custom styling implementations, we're happy to help with general guidance and feature questions!