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

Last updated 18 days ago

Was this helpful?