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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.