🖼️Embed Widget Styling Reference

Comprehensive guide for styling CrowdWork widgets on your website

New to CrowdWork widgets?

The following guide is for users who already have CrowdWork widgets embedded on their website and want to customize the appearance with CSS. If you haven't embedded a widget yet, start with our Widget Embedding Guide first, then return here for styling customization.

Community Resource: This guide provides CSS examples and techniques for customizing widgets on your website. While we provide this documentation to help you succeed, custom styling troubleshooting falls outside our official support scope.

Quick Customizations

Change Button Colors

<style>
/* Change primary button color */
.btn-primary {
  background-color: #your-color !important;
  border-color: #your-color !important;
}

.btn-primary:hover {
  background-color: #your-darker-color !important;
}
</style>

Change Card Background Colors

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

/* Change the main container background */
.container {
  background-color: #ffffff !important;
}
</style>

Adjust Text Colors

<style>
/* Event titles */
.card-title {
  color: #your-brand-color !important;
}

/* Event descriptions and dates */
.card-subtitle, .card-date {
  color: #666666 !important;
}
</style>

Modify Corner Roundness

<style>
/* Make cards more rounded */
.card {
  border-radius: 12px !important;
}

/* Make buttons more rounded */
.btn-primary, .btn-light {
  border-radius: 8px !important;
}

/* Remove all rounded corners */
.card, .btn-primary, .btn-light {
  border-radius: 0 !important;
}
</style>

Add Accent Borders

<style>
/* Add colored left border to cards */
.card {
  border-left: 4px solid #your-brand-color !important;
}
</style>

Remove Shadows and Effects

<style>
/* Remove card shadows */
.card {
  box-shadow: none !important;
}

/* Remove hover effects */
.card:hover {
  transform: none !important;
  box-shadow: none !important;
}
</style>

CSS Class Reference

Understanding these CSS classes will help you target specific elements for customization:

Main Container Classes

  • .container - Main page container

  • .container-fluid - Full-width containers

  • .row - Bootstrap grid rows

  • .col, .col-md, .col-lg - Bootstrap grid columns

Event Card Classes

  • .card - Individual event card container

  • .card-body - Main content area of event card

  • .card-img-top - Event image at top of card

  • .card-title - Event name/title text

  • .card-subtitle - Event subtitle or description text

  • .card-date - Date and time display

Button Classes

  • .btn-primary - Main action buttons (Purchase tickets, etc.)

  • .btn-light - Secondary buttons (quantity selectors, etc.)

  • .btn-sm - Small buttons

  • .btn-increment - Plus buttons for ticket selection

  • .btn-decrement - Minus buttons for ticket selection

Form Elements

  • .form-control - Input fields and dropdowns

  • .form-group - Form field containers

  • .form-label - Form field labels

  • .form-select - Dropdown select elements

Advanced Customization Examples

Custom Typography

<style>
/* Change font family */
.card {
  font-family: 'Your-Custom-Font', 'Arial', sans-serif;
}

/* Style event titles */
.card-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Style dates */
.card-date {
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
}
</style>

Layout and Spacing

<style>
/* Adjust card spacing */
.card {
  margin-bottom: 24px !important;
  padding: 20px !important;
}

/* Adjust container width */
.container {
  max-width: 1200px !important;
  padding: 0 20px !important;
}
</style>

Animation and Hover Effects

<style>
/* Custom hover effects */
.card {
  transition: all 0.3s ease !important;
}

.card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

/* Button hover effects */
.btn-primary {
  transition: all 0.2s ease !important;
}

.btn-primary:hover {
  transform: translateY(-1px) !important;
}
</style>

Form Styling

<style>
/* Custom form field styling */
.form-control {
  border: 2px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
}

.form-control:focus {
  border-color: #your-brand-color !important;
  box-shadow: 0 0 0 0.2rem rgba(your-brand-color-rgb, 0.25) !important;
}

.form-label {
  font-weight: 600 !important;
  color: #333333 !important;
}
</style>

Mobile Responsiveness

Make sure your customizations work well on mobile devices:

<style>
/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .card {
    margin-bottom: 16px !important;
    padding: 16px !important;
  }
  
  .card-title {
    font-size: 16px !important;
  }
  
  .btn-primary {
    padding: 10px 20px !important;
    font-size: 14px !important;
  }
}
</style>

Troubleshooting Common Issues

Styles Not Applying?

/* Increase specificity with more specific selectors */
.card.card {
  background-color: #your-color !important;
}

/* Or use !important declarations */
.btn-primary {
  background-color: #your-color !important;
}

Button Styling Problems?

/* Target all button states */
.btn-primary,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:visited {
  background-color: #your-color !important;
  border-color: #your-color !important;
}

Form Elements Not Styling?

/* Override Bootstrap form styles */
.form-control:focus {
  border-color: #your-color !important;
  box-shadow: 0 0 0 0.2rem rgba(your-brand-color-rgb, 0.25) !important;
}

Best Practices

  1. Test with real content - Make sure styling works with different event names and descriptions

  2. Check mobile responsiveness - Always test on various screen sizes

  3. Use !important sparingly - Only when necessary to override existing styles

  4. Consider accessibility - Ensure sufficient color contrast (4.5:1 minimum)

  5. Start small - Make one change at a time and test thoroughly

Complete Theme Examples

Want to see how all these techniques work together? Here are some complete theme examples using CSS variables for easy customization:

Universal Theme Base

Copy this foundation once - it works with all the theme variations below:

<style>
/* Universal Base - Works with all color themes */
:root {
  /* Default CrowdWork colors - override these below */
  --cw-primary: #49bcab;
  --cw-secondary: #39998b;
  --cw-text-primary: #282828;
  --cw-text-secondary: #666666;
  --cw-card-bg: #ffffff;
  --cw-border: #e0e0e0;
}

.card {
  background-color: var(--cw-card-bg);
  border: 1px solid var(--cw-border);
  border-left: 4px solid var(--cw-primary);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  color: var(--cw-text-primary);
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card-title {
  color: var(--cw-primary) !important;
  font-size: 18px;
  font-weight: 600;
}

.card-subtitle, .card-date {
  color: var(--cw-text-secondary);
}

.btn-primary {
  background-color: var(--cw-primary) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--cw-secondary) !important;
  transform: translateY(-1px);
}
</style>

Theme Color Options

To try different themes, just swap out these color variables:

🏛️ Classic Theatre

Theatre Theme
<style>
:root {
  --cw-primary: #8B4513;      /* Saddle Brown */
  --cw-secondary: #A0522D;    /* Sienna */
  --cw-text-primary: #2c2c2c;
  --cw-text-secondary: #666666;
  --cw-card-bg: #fefefe;
  --cw-border: #e8e8e8;
}
</style>

🌊 Ocean Blue

Ocean Theme
<style>
:root {
  --cw-primary: #0077be;      /* Ocean Blue */
  --cw-secondary: #005a8b;    /* Deep Ocean */
  --cw-text-primary: #2c2c2c;
  --cw-text-secondary: #666666;
  --cw-card-bg: #fafbff;
  --cw-border: #e1e8f4;
}
</style>

🌿 Forest Green

Forest Theme
<style>
:root {
  --cw-primary: #27ae60;      /* Forest Green */
  --cw-secondary: #229954;    /* Deep Forest */
  --cw-text-primary: #2c2c2c;
  --cw-text-secondary: #666666;
  --cw-card-bg: #f8fffe;
  --cw-border: #e8f5e8;
}
</style>

⚫ Minimalist

Minimalist Theme
<style>
:root {
  --cw-primary: #333333;      /* Charcoal */
  --cw-secondary: #555555;    /* Medium Gray */
  --cw-text-primary: #333333;
  --cw-text-secondary: #666666;
  --cw-card-bg: #ffffff;
  --cw-border: #e0e0e0;
}

/* Override effects for minimal style */
.card {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-left-width: 1px !important;
}

.card:hover {
  transform: none !important;
  box-shadow: none !important;
}
</style>

🌙 Dark Mode

Dark Theme
<style>
:root {
  --cw-primary: #0066cc;      /* Electric Blue */
  --cw-secondary: #0052a3;    /* Deep Blue */
  --cw-text-primary: #ffffff;
  --cw-text-secondary: #cccccc;
  --cw-card-bg: #2d2d2d;
  --cw-border: #404040;
}

/* Dark mode shadow adjustments */
.card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
</style>

Need help? While custom styling troubleshooting falls outside our official support scope, we're happy to help with general widget questions. Contact our support team and show us what you're building!

Last updated

Was this helpful?