# Embed Widget Styling Reference

{% hint style="warning" %}
**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](https://github.com/bp-crowdwork/cw-gitbook/blob/gitbook/the-academy/crowdwork-academy/custom-styling-solutions/broken-reference/README.md) first, then return here for styling customization.
{% endhint %}

{% hint style="info" %}
**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.
{% endhint %}

***

## Quick Customizations

### Change Button Colors

```css
<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

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

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

### Adjust Text Colors

```css
<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

```css
<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

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

### Remove Shadows and Effects

```css
<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

```css
<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

```css
<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

```css
<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

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

```css
<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?

```css
/* 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?

```css
/* 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?

```css
/* 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:

```css
<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](https://singlecolorimage.com/get/8B4513/300x40)

```css
<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](https://singlecolorimage.com/get/0077be/300x40)

```css
<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](https://singlecolorimage.com/get/27ae60/300x40)

```css
<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](https://singlecolorimage.com/get/333333/300x40)

```css
<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](https://singlecolorimage.com/get/0066cc/300x40)

```css
<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](https://github.com/bp-crowdwork/cw-gitbook/blob/gitbook/the-academy/crowdwork-academy/custom-styling-solutions/link/README.md) and show us what you're building!


---

# 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/embed-widget-styling-guide.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.