🎨Custom Styling Solutions

Simple solutions for the most common customization requests

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?

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

---

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:

<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:

<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

Community Resource: Customizing crowdwork.com pages may break with platform updates and falls outside our official support scope.

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

<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

<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

<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

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

For CrowdWork.com Pages

<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

<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

<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:

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

Minimalist Theme:

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

Forest Theme:

: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

→ Complete Embed Widget Styling Reference

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

For CrowdWork.com Pages

→ CrowdWork.com Page Styling (Community Guide)

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

---

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 - while we can't troubleshoot custom styling implementations, we're happy to help with general guidance and feature questions!