Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

🖍️Style Your Widget (Start Here)

Copy one block of CSS, change a few colors at the top, and the CrowdWork widget matches your website. Light and dark versions included, no coding knowledge needed.

Your CrowdWork widget looks good the moment you embed it. One block of CSS makes it look like your website, and the only part you edit is the top few lines.

Three CrowdWork event cards in the default style: white cards, dark gray titles, gray dates
Before: the widget as it looks out of the box, with no custom CSS.
The same three cards with the dark starter kit: near-black cards on a black page, white titles, pink dates and gold price labels
After: the same widget with the dark starter kit pasted in. Only the palette lines at the top were changed.

Before You Start

  • Your widget is already on your website. If not, start with Embedding a Widget and come back.

  • You know your brand colors as hex codes: a # followed by six letters or numbers, like #8c1c3c. Your website builder's color or theme settings usually show them, or ask whoever designed your logo.

  • The kit only changes the CrowdWork widget. The palette only sets color and size values, and every rule in the engine starts with .fw-embed, .fw-embed-wrap or #fwCalendarModal, the names the widget uses for itself, so the rest of your website stays exactly as it is.

Step 1: Copy the Starter Kit

Edit the top section. Leave the engine alone.

Step 2: Put In Your Colors

Variable
What it changes
Tip

--cw-brand

Dates on cards, the calendar arrow buttons and the Purchase button

The color of your site's buttons or links.

--cw-accent

The price and Only 6 left labels on cards

Pick something that reads on top of a photo.

--cw-bg

The area behind the whole widget

Leave it transparent unless you want a panel behind the widget. The calendar has no card of its own, so its month title and day numbers sit right on this area. If they're hard to read against your page, set it to your --cw-card color.

--cw-card

The background of each card and of the calendar popup

White or near-white on a light site; a shade lighter than your page on a dark one.

--cw-text

Event names and descriptions

Near-black on light cards, near-white on dark ones.

--cw-muted

Calendar day numbers and the date line in the popup

A softer version of your text color that is still easy to read.

--cw-line

Dividers and calendar grid lines

A faint shade just off your card color.

--cw-font

The font for all widget text

inherit means your website's font, or write a font stack like Georgia, serif.

--cw-radius

How rounded the corners are

Use 0 for square corners.

--cw-brand-text

Text on top of your brand color

If the button text is hard to read, try white (#ffffff) or near-black (#17171c). The dark palette uses near-black on its bright pink.

--cw-accent-text

Text on top of your accent color

Only needs changing if your accent color is light.

Step 3: Paste It Into Your Site

The easiest place works on every website builder: right above your widget code, in the same block where you pasted it.

  1. Open the page with your widget in your website editor, and open the block that holds the widget code (the Code, Embed, HTML or Custom HTML block).

  2. Click at the very start of the widget code, before <div><script, and paste your CSS there, wrapped in <style> and </style> tags.

  3. Save and publish, then check the page on your live site.

Here's what the block looks like with the kit added. The widget code underneath is a sample; keep your own.

Prefer one place for all your CSS? If your website builder has a site-wide Custom CSS box, you can paste the kit there instead. Leave out the <style> tags; that box adds them for you. On Wix, skip this: Wix runs the Embed HTML box in its own frame, so site-wide CSS never reaches the widget. Keep the kit in the same box as the widget code. Not sure where to find it? The Platform-Specific Embedding Guides cover each builder.

Check the live page, not the editor. Some website builders (Squarespace, for one) don't run the widget inside their editor, so your changes only show on the published page.

On a Dark Website?

Swap the palette section of Step 1 for this one and keep the engine.

The Calendar view with the dark kit: black grid with dark gray lines, white month title, pink arrow buttons
The dark kit applied to the Calendar view: grid, month title and arrow buttons all pick up the palette.
The Calendar event popup with the dark kit: near-black panel, white title, pink Purchase button with dark text
Clicking an event in the Calendar opens this popup, styled by the same kit. The Purchase button uses your brand color.

The kit styles the Calendar view and its event popup too, not only cards.

The Same Widget, Three More Ways

Every styled image on this page is the same engine with different values at the top. The last two are here to prove the point; please don't ship them.

The light kit: white cards with 12px corners on a cream page, burgundy dates, gold price labels
The light kit: a cream page with burgundy and gold accents.
The palette behind it
The Comic Sans kit: lemon-yellow cards with very round corners on a pink page, purple Comic Sans text, yellow labels
The Comic Sans kit. Proof the engine will do whatever you tell it, not a recommendation.
The palette behind it
The GeoCities kit: navy cards with square corners on a starfield, lime green Times New Roman text, red dates, yellow labels
The GeoCities kit, for anyone who misses 1997.
The palette behind it

Troubleshooting

  • Nothing changed? Look at the published page, not the editor, and refresh it. If your site uses caching, give it a few minutes.

  • Still nothing? Make sure each color starts with #, and that every line in the palette ends with a semicolon, like --cw-brand: #8c1c3c;. One missing character can stop the whole kit.

  • Only some things changed? Check that you pasted the whole kit, from the first line of the palette to the last line of the engine.

  • Your CSS shows up on the page as text? It needs <style> and </style> tags around it when you paste it above the widget code.

  • Nothing changed, but the page reloaded fine? You pasted the palette without the engine. Paste the whole Step 1 block.

  • Two different looks fighting? The kit is on the page twice. Keep one.

Use an AI Assistant

An AI assistant like ChatGPT, Claude or Gemini can look at a screenshot of your website and fill in the palette for you. Style Your Widget With AI has a ready-made message to copy, with a spot at the top for your website address, and walks you through the rest.

Notes for AI Assistants

This section is written for AI assistants helping a theatre style the widget. Readers can skip it.

  • Edit only the palette. Fill in the 11 variables in the :root block from Step 1 (--cw-brand through --cw-accent-text) using the table in Step 2. Copy the engine below the palette exactly as written. Don't shorten, rewrite or "improve" it.

  • Return one block. The palette, then the full engine, wrapped in <style> and </style>, so it can be pasted above the widget code in a single step. Mention that the tags are left out when pasting into a site-wide Custom CSS box.

  • Keep text readable. --cw-text on --cw-card, --cw-brand-text on --cw-brand, and --cw-accent-text on --cw-accent should each reach a 4.5:1 contrast ratio. --cw-muted on --cw-card should too, since it carries the calendar day numbers.

  • Match the site's style. Use the site's button or link color for --cw-brand. Leave --cw-font as inherit so the widget uses the page's own font; name a font only if the widget should differ from the text around it. Match --cw-radius to the site's buttons (0 for square).

  • Dark websites. Start from the dark palette in On a Dark Website?. Leave --cw-bg as transparent unless the calendar's month title or day numbers would be hard to read against the page, in which case set it to the --cw-card color.

  • Take colors from what you can see. Many page-reading tools return a website's text but not its styles. Use an attached screenshot for exact colors. If you had to estimate any color, say which ones, rather than presenting them as read from the site.

  • Beyond colors. For layout changes (hiding descriptions, phone-only tweaks, styling one widget differently from another), use the Widget CSS Reference (Advanced). Every selector must start with .fw-embed or #fwCalendarModal, the calendar popup, which sits outside .fw-embed.

  • Explain in plain words. The person asking is usually not a web developer.

Want to Go Further?

The Widget CSS Reference (Advanced) covers shorter cards, flat cards, styling one widget differently from another, and tweaks for phones only.

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 with any other widget question.

PreviousCustom Styling Solutions
NextStyle Your Widget With AI

Last updated

Was this helpful?