> For the complete documentation index, see [llms.txt](https://docs.crowdwork.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/embed-widget-styling-guide.md).
# Widget CSS Reference (Advanced)
Every class, default style and specificity rule for styling the CrowdWork widget with CSS, plus tested recipes.
{% hint style="info" %}
**Looking for the quick version?** [Style Your Widget (Start Here)](https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/match-the-widget-to-your-brand) has the copy-and-paste starter kit, with light and dark palettes you edit in one place and no CSS knowledge needed. This page is the full reference for people comfortable with CSS. Rather have an AI assistant write it? See [Style Your Widget With AI](https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/style-your-widget-with-ai).
{% endhint %}
## How the Widget Is Styled
Three facts explain almost every "why isn't my CSS working?" question:
* **The widget renders directly into your page.** There's no iframe and no shadow DOM, so your CSS reaches it, and so does your theme's CSS. A broad rule on your site like `.card-title` or `h3` can change the widget, and an unscoped rule you write for the widget can change your site.
* **The widget loads its own stylesheet at runtime**, appended to the end of ``. That usually puts it *after* your CSS, so it wins any tie.
* **Its selectors are specific.** Card rules look like `.fw-embed.fw-cards .fw-card .card-title`, which is four classes deep. A shorter selector loses even when it loads later.
So: **start every selector with `.fw-embed`** (or `#fwCalendarModal` for the popup), and **use `!important`** on the properties you change. It's the one approach that works no matter where your CSS lands on the page.
```css
/* Loses: the widget's own rule is more specific (four classes) */
.fw-embed .card-title { color: #8c1c3c; }
/* Wins only if your CSS loads AFTER the widget's stylesheet */
.fw-embed.fw-cards .fw-card .card-title { color: #8c1c3c; }
/* Always wins */
.fw-embed .fw-card .card-title { color: #8c1c3c !important; }
```
{% hint style="warning" %}
**The calendar popup lives outside `.fw-embed`.** The widget adds `#fwCalendarModal` to the end of your page's ``, so `.fw-embed .btn-primary` never reaches its Purchase button. Use `#fwCalendarModal .fw-modal-btn-purchase`.
{% endhint %}
## Widget Structure
A simplified view of the Cards markup and the Calendar popup. Calendar view itself is built with FullCalendar, so it uses FullCalendar's `fc-` classes (listed below).
```xml
```
## Class Reference
### Both Views
| Selector | What it is |
| ----------------------- | ----------------------------------------------------- |
| `.fw-embed` | The widget's root element. Start every selector here. |
| `.fw-embed.fw-cards` | The root in Cards view |
| `.fw-embed.fw-calendar` | The root in Calendar view |
| `.fw-embed-wrap` | A full-width wrapper around the root |
| `.fw-empty` | The "No upcoming events scheduled." message |
### Cards View
| Selector | What it is |
| ----------------------------------- | ----------------------------------------------------------------------------- |
| `.fw-embed .fw-card` | One event card (white background, 8px corners, shadow) |
| `.fw-embed .fw-card .img-wrapper` | The image area, 250px tall, with a blurred copy of the image filling any gaps |
| `.fw-embed .fw-card .card-img-top` | The event image |
| `.fw-embed .fw-card .badge.cost` | Price label, bottom-right of the image |
| `.fw-embed .fw-card .badge.spots` | Low-availability label, top-left of the image |
| `.fw-embed .fw-card .card-body` | The text area below the image |
| `.fw-embed .fw-card .card-date` | Date and time |
| `.fw-embed .fw-card .card-title` | Event name |
| `.fw-embed .fw-card hr` | The divider line |
| `.fw-embed .fw-card .card-subtitle` | Description (shortened to about 200 characters) |
### Calendar View
| Selector | What it is |
| ------------------------------------------ | ----------------------------------- |
| `.fw-embed .fc-toolbar-title` | The month heading |
| `.fw-embed.fw-calendar .fc-button-primary` | The round previous and next arrows |
| `.fw-embed .fc-event-title` | Event name in the grid or list |
| `.fw-embed .fc-event-time` | Start time |
| `.fw-embed .fc-day-today` | Today's cell |
| `.fw-embed .fc-day-past` | Past days (their events are dimmed) |
| `#fwCalendarModal .fw-modal-title` | Popup: event name |
| `#fwCalendarModal .fw-modal-subtitle` | Popup: date and price line |
| `#fwCalendarModal .fw-modal-description` | Popup: description |
| `#fwCalendarModal .fw-modal-btn-purchase` | Popup: the Purchase button |
### Loading and Error States
While events load, the widget shows an overlay (`.fw-embed-loading`, with a `.spinner` and a `.fw-loading-label` reading "Loading events…"). If events can't load, it shows `.fw-embed-error` with a retry button. Both sit next to `.fw-embed`, not inside it, so start their selectors with `.fw-embed-wrap` (for example `.fw-embed-wrap .fw-embed-error`). These are built to stay readable on any website, so restyle their colors if you like, but leave their layout alone.
## Default Styles
What you're overriding, so you can match or contrast it:
| Element | Default |
| ----------------------------- | ------------------------------------------------------ |
| Font (everything) | Open Sans, then the system font |
| Event name on cards | 20px, bold, #282828 |
| Date on cards | 16px, semi-bold, uppercase, #677788 |
| Description on cards | 16px, #282828 |
| Cards | White, 8px corners, soft shadow, grows 1% on hover |
| Price and availability labels | White background, #282828 text, uppercase, 4px corners |
| Calendar arrows | 48px circles, #282828 (set with !important) |
| Calendar event names | #282828 |
| Popup Purchase button | #49bcab, white uppercase text, 10px corners |
## Theme Variables
The starter kit in [Style Your Widget (Start Here)](https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/match-the-widget-to-your-brand) is a palette of `--cw-*` variables plus an engine block. The palette defines the variables on `:root`, so they also reach the calendar popup, which sits outside `.fw-embed`. The widget itself reads none of them: the engine block is what maps each variable onto the widget's own elements.
| Variable | Light default | Dark default | Applied to |
| ------------------ | ------------- | ------------- | ------------------------------------------------------------------------------------------ |
| `--cw-brand` | `#8c1c3c` | `#ff1f9a` | Dates on cards, calendar arrows, the popup's Purchase button |
| `--cw-accent` | `#e0a526` | `#f2c230` | Price and "Only 6 left" labels |
| `--cw-bg` | `transparent` | `transparent` | Behind the whole widget (`transparent` lets your page show through) |
| `--cw-card` | `#ffffff` | `#17171c` | Card and popup background. The calendar grid has no card of its own and sits on `--cw-bg`. |
| `--cw-text` | `#1f1a17` | `#f4f1f6` | Event names, descriptions, the month heading |
| `--cw-muted` | `#6b6461` | `#a9a3b2` | Calendar day numbers and weekday headers, the popup's date line |
| `--cw-line` | `#eae4dc` | `#2c2b33` | Card dividers, calendar grid lines, popup rules |
| `--cw-font` | `inherit` | `inherit` | Font everywhere (`inherit` uses your website's font) |
| `--cw-radius` | `12px` | `10px` | Corner roundness everywhere (`0` for square) |
| `--cw-brand-text` | `#ffffff` | `#17171c` | Text on top of `--cw-brand` |
| `--cw-accent-text` | `#1d1d1d` | `#1a1400` | Text on top of `--cw-accent` |
Calendar view is built with FullCalendar 6, which exposes custom properties of its own: `--fc-border-color`, `--fc-page-bg-color`, `--fc-neutral-bg-color`, `--fc-neutral-text-color`, `--fc-event-text-color`, `--fc-today-bg-color` and `--fc-list-event-hover-bg-color`. The engine sets them on `.fw-embed.fw-calendar`, which re-skins the calendar grid without fighting specificity.
Why `--cw-font: inherit` gives you your website's font: a CSS-wide keyword like `inherit` makes the custom property itself inherit, and at `:root` there is nothing to inherit from, so the variable is left undefined. That makes `font-family: var(--cw-font)` invalid at computed-value time, and an inherited property like `font-family` then computes to *inherit*, which is your page's font. Any other font stack in the variable works the normal way.
## Recipes
Every recipe below has been tested against the live widget. Short snippets for brand color, font, labels, corners and shadow follow the recipes. For a complete theme, start with [Style Your Widget (Start Here)](https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/match-the-widget-to-your-brand).
### Set Your Colors Once With Variables
The starter kit in [Style Your Widget (Start Here)](https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/match-the-widget-to-your-brand) already does this for the whole widget. Use this pattern when you want variables of your own for a handful of rules.
```css
/* One place to set your colors. These variables are defined here, by you —
the widget itself doesn't read them until the rules below use them. */
:root {
--my-brand: #8c1c3c;
--my-accent: #e0a526;
}
.fw-embed .fw-card .card-title,
.fw-embed .fc-event-title,
#fwCalendarModal .fw-modal-title {
color: var(--my-brand) !important;
}
.fw-embed.fw-calendar .fc-button-primary,
#fwCalendarModal .fw-modal-btn-purchase {
background-color: var(--my-brand) !important;
}
.fw-embed .fw-card .badge {
background-color: var(--my-accent) !important;
}
```
### Dark Cards for a Dark Website
For a complete dark theme that also covers the widget's frame, the calendar and the popup, use the dark palette in [Style Your Widget (Start Here)](https://docs.crowdwork.com/the-academy/crowdwork-academy/custom-styling-solutions/match-the-widget-to-your-brand).
```css
/* Dark cards for a dark website */
.fw-embed .fw-card {
background-color: #1f1f24 !important;
box-shadow: none !important;
}
.fw-embed .fw-card .card-title,
.fw-embed .fw-card .card-subtitle {
color: #f2f2f2 !important;
}
.fw-embed .fw-card .card-date {
color: #b9b9c3 !important;
}
.fw-embed .fw-card hr {
background-color: #3a3a44 !important;
}
```
### Shorter Cards Without Descriptions
```css
/* Shorter cards: hide the description and the divider line */
.fw-embed .fw-card .card-subtitle,
.fw-embed .fw-card hr {
display: none !important;
}
```
### Style One Widget Differently From Another
The widget draws itself right where its code sits, so wrapping the code in your own element lets you target just that widget. Useful when a page has, say, a shows calendar and a classes widget that should look different.
```xml
```
```css
#season-widget .fw-embed .fw-card .card-title {
color: #8c1c3c !important;
}
```
{% hint style="info" %}
The Calendar popup is shared by every widget on the page and sits outside your wrapper, so style it once with `#fwCalendarModal`.
{% endhint %}
### Adjust for Phones
Wrap overrides in a media query to apply them only on small screens. Cards already switch to one per row on narrow screens.
```css
@media (max-width: 768px) {
.fw-embed .fw-card .card-title {
font-size: 18px !important;
}
}
```
## Small Tweaks
### Use Your Website's Font
The widget uses its own font (Open Sans) by default. This snippet tells it to use whatever font the rest of your page uses instead. Nothing to change; paste it as-is.
```css
/* Use your website's font in the CrowdWork widget */
.fw-embed,
.fw-embed *:not(.fc-icon),
#fwCalendarModal,
#fwCalendarModal * {
font-family: inherit !important;
}
```
### Brand Color in Three Places
This snippet colors the event names, the dates on cards, and, in Calendar view, the arrow buttons and the **Purchase** button in the event popup. Replace `#8c1c3c` with your color in all three places.
```css
/* Brand colors for the CrowdWork widget: replace #8c1c3c with your color (3 places) */
.fw-embed .fw-card .card-title,
.fw-embed .fc-event-title,
#fwCalendarModal .fw-modal-title {
color: #8c1c3c !important; /* event names */
}
.fw-embed .fw-card .card-date {
color: #8c1c3c !important; /* dates on cards */
}
.fw-embed.fw-calendar .fc-button-primary,
#fwCalendarModal .fw-modal-btn-purchase {
background-color: #8c1c3c !important; /* calendar arrows + Purchase button */
}
```
### Color the Price and Availability Labels
Cards show labels on the event image, such as the price (**$15**, **Pay What You Want**) and low availability (**Only 6 left**). This snippet changes their background and text colors.
```css
/* Price and availability labels on cards */
.fw-embed .fw-card .badge {
background-color: #e0a526 !important;
color: #1d1d1d !important;
}
```
### Change the Card Corners
Cards have gently rounded corners. Use `0` for square corners, or a bigger number like `16px` for rounder ones.
```css
/* Square card corners (use 16px for extra-round) */
.fw-embed .fw-card,
.fw-embed .fw-card .img-wrapper,
.fw-embed .fw-card .card-img-top {
border-radius: 0 !important;
}
```
### Remove the Shadow and Hover Effect
Cards float on a soft shadow and grow slightly when a patron hovers over them. For a flatter look that fits minimal websites, this swaps both for a thin gray border.
```css
/* Remove the card shadow and hover zoom */
.fw-embed .fw-card,
.fw-embed .fw-card:hover {
box-shadow: none !important;
transform: none !important;
border: 1px solid #dddddd !important;
}
```
## Troubleshooting
* **A rule has no effect:** add `!important`, and check it starts with `.fw-embed`. Then right-click the element on your live page, choose **Inspect**, and look at which rule wins in your browser's developer tools. Crossed-out lines are the losers.
* **Your site's styles are leaking in** (odd fonts, underlined card text, extra margins): your theme has broad rules for `a`, `div` or `h3`. Override the specific property on the widget's element, scoped under `.fw-embed`.
* **The popup ignores your styles:** target `#fwCalendarModal`, not `.fw-embed`.
* **Changes show in one place but not another:** check for a cache on your site, and for a second copy of the widget code with different settings.
{% hint style="info" %}
**About support:** custom CSS is yours to own. We can help with the widget itself, but troubleshooting custom styles falls outside our support scope. [Contact us](https://docs.crowdwork.com/contacting-support) with any other widget question.
{% endhint %}