🎨Embed Widget Styling Guide
A comprehensive reference for customizing CrowdWork's embeddable widgets with CSS styling techniques.
New to CrowdWork widgets?
The following guide is for advanced users who are already familiar with CrowdWork embed code and want to customize their widget's appearance with CSS. If you haven't embedded a CrowdWork widget yet, start with our Widget Embedding Guide to get your first widget up and running, then return here for styling customization.
Prerequisites
Before diving into custom styling, you'll need:
Working knowledge of CSS and HTML
Basic understanding of CSS selectors and specificity
We love seeing your creations!
And that's why we provide this guide. As a small team, we can't officially help create or troubleshoot custom styles for everyone, but we hope the following guide will get you pointed in the right direction.
We're always amazed by the custom widget designs our partners—you—create. Feel free to send us a note and show off your customizations - we'd love to see your website!
Quick Start Example
Here's a simple example to get you started with custom styling:
/* Override primary brand color */
.fw-embed {
--primary-color: #your-brand-color;
}
/* Style event cards */
.fw-card {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Customize buttons */
.fw-btn {
background-color: var(--primary-color);
border: none;
border-radius: 4px;
}CSS Class Reference
Main Container Classes
.fw-embed Root container for all widget content. Use this for global styling overrides.
Default properties:
Font family: Open Sans
Font smoothing enabled
Box-sizing: border-box
Additional containers:
.fw-cards- Container for card-based widget layout.fw-calendar- Container for calendar-based widget layout
Event Card Classes
.fw-card Individual event card container with flex layout and subtle shadow.
Card component classes:
.card-img-top- Event image at top of card.img-wrapper- Container for event images with responsive behavior.card-body- Main content area of event card.card-title- Event name/title text.card-subtitle- Event subtitle or description text.card-date- Event date and time display
Interactive Elements
.fw-btn Action buttons for tickets, more info, and other interactions.
Modal classes:
.fw-modal- Modal overlay for event details.fw-modal-dialog- Modal dialog container.fw-modal-content- Modal content wrapper.fw-modal-header- Modal header section.fw-modal-body- Modal body content area
Color Palette
Primary Colors
Primary Teal: #49bcab - Used for buttons and links
Primary Hover: #39998b - Button hover states
Text Colors
#282828
Primary text, headings
#666666
Secondary text, dates
Background Colors
#ffffff
Main background
#f8f9fa
Card containers
Custom Color Implementation
/* Override default colors with CSS custom properties */
.fw-embed {
/* Primary brand colors */
--fw-primary: #your-primary-color;
--fw-primary-hover: #your-primary-hover;
/* Text colors */
--fw-text-primary: #your-text-color;
--fw-text-secondary: #your-secondary-text;
/* Background colors */
--fw-bg-primary: #your-background;
--fw-bg-card: #your-card-background;
}
/* Apply to specific elements */
.fw-btn {
background-color: var(--fw-primary);
color: white;
}
.fw-btn:hover {
background-color: var(--fw-primary-hover);
}Typography
Font Hierarchy
Event Title
24px
700
.card-title
Subtitle
16px
600
.card-subtitle
Body Text
14px
400
General content
Date/Meta
12px
400
.card-date
Typography Customization
/* Custom font family */
.fw-embed {
font-family: 'Your-Custom-Font', 'Open Sans', sans-serif;
}
/* Event title styling */
.fw-card .card-title {
font-size: 20px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 8px;
}
/* Date styling */
.fw-card .card-date {
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}Responsive Design
Breakpoints
Small
< 768px
.fw-bp-sm
Single column, larger touch targets
Medium
768px - 1024px
.fw-bp-md
2-column grid, adjusted spacing
Large
> 1024px
Default
Multi-column grid, full features
Mobile-First Approach
/* Mobile styles (default) */
.fw-cards {
grid-template-columns: 1fr;
padding: 8px;
}
/* Tablet styles */
@media (min-width: 768px) {
.fw-cards {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
/* Desktop styles */
@media (min-width: 1024px) {
.fw-cards {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1200px;
margin: 0 auto;
}
}Styling Examples
Example Color Palettes
Brand Integration
#8B4513
#DAA520
#DC143C
#ffffff
Theatre/warm brand
Minimalist
#333333
#e0e0e0
#333333
#ffffff
Clean, simple design
Dark Theme
#0066cc
#404040
#0052a3
#1a1a1a
Night mode interface
Pro Tip: Use CSS custom properties (variables) to make theme changes easier to maintain across your entire widget.
Brand Integration
Brand Integration
#8B4513
#DAA520
#DC143C
#ffffff
Theatre/warm brand
/* Theatre brand colors - define custom properties first */
.fw-embed {
--theatre-primary: #8B4513;
--theatre-secondary: #DAA520;
--theatre-accent: #DC143C;
--theatre-text: #ffffff;
--theatre-shadow: rgba(139, 69, 19, 0.3);
--theatre-border-shadow: rgba(139, 69, 19, 0.1);
}
/* Use the custom properties throughout your styles */
.fw-btn {
background: linear-gradient(135deg, var(--theatre-primary), var(--theatre-secondary));
border: none;
color: var(--theatre-text);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.fw-btn:hover {
background: linear-gradient(135deg, var(--theatre-secondary), var(--theatre-accent));
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--theatre-shadow);
}
.fw-card {
border-left: 4px solid var(--theatre-primary);
box-shadow: 0 2px 8px var(--theatre-border-shadow);
}
.card-title {
color: var(--theatre-primary);
}Minimalist Design
Minimalist
#333333
#e0e0e0
#333333
#ffffff
Clean, simple design
/* Clean, minimal styling - define variables for consistency */
.fw-embed {
--minimal-primary: #333333;
--minimal-border: #e0e0e0;
--minimal-bg: #ffffff;
--minimal-text: #333333;
--minimal-text-light: #666666;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.fw-card {
background: var(--minimal-bg);
border: 1px solid var(--minimal-border);
border-radius: 0;
box-shadow: none;
transition: border-color 0.2s ease;
}
.fw-card:hover {
border-color: var(--minimal-primary);
}
.card-title {
font-size: 18px;
font-weight: 300;
color: var(--minimal-text);
margin-bottom: 4px;
}
.card-date {
color: var(--minimal-text-light);
}
.fw-btn {
background: var(--minimal-primary);
border: none;
border-radius: 0;
color: var(--minimal-bg);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 20px;
}Dark Theme
Dark Theme
#0066cc
#404040
#0052a3
#1a1a1a
Night mode interface
/* Dark theme implementation - organize colors with custom properties */
.fw-embed {
--dark-bg-primary: #1a1a1a;
--dark-bg-card: #2d2d2d;
--dark-bg-card-hover: #363636;
--dark-border: #404040;
--dark-text-primary: #ffffff;
--dark-text-secondary: #cccccc;
--dark-accent: #0066cc;
--dark-accent-hover: #0052a3;
--dark-shadow: rgba(0, 0, 0, 0.3);
background-color: var(--dark-bg-primary);
color: var(--dark-text-primary);
}
.fw-card {
background-color: var(--dark-bg-card);
border: 1px solid var(--dark-border);
color: var(--dark-text-primary);
}
.fw-card:hover {
background-color: var(--dark-bg-card-hover);
box-shadow: 0 4px 16px var(--dark-shadow);
}
.card-title {
color: var(--dark-text-primary);
}
.card-date {
color: var(--dark-text-secondary);
}
.fw-btn {
background-color: var(--dark-accent);
color: var(--dark-text-primary);
}
.fw-btn:hover {
background-color: var(--dark-accent-hover);
}Layout Customization
Default Card Grid Layout
By default the grid layout for cards use code similar to the following, which can be altered to specify custom grid sizes if desired.
/* Custom grid configuration */
.fw-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
padding: 16px;
}
/* Card spacing */
.fw-card {
padding: 20px;
margin-bottom: 16px;
}Horizontal Card Layout
Using only CSS, it's possible to alter the layout drastically. For example, this horizontal card layout works well for displaying special event listings of a particular class or tag.
/* Horizontal card layout */
.fw-card {
display: flex;
flex-direction: row;
align-items: center;
padding: 16px;
height: 120px;
}
.img-wrapper {
flex-shrink: 0;
width: 80px;
height: 80px;
margin-right: 16px;
border-radius: 8px;
overflow: hidden;
}
.card-body {
flex: 1;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}Troubleshooting
Common Issues
Styles Not Applying? Custom CSS rules might be overridden. Increase CSS specificity or ensure your stylesheets load after the widget.
Solution: Higher Specificity
/* Higher specificity */
.your-container .fw-embed .fw-card {
background-color: #custom-color;
}
/* Or with !important (use sparingly) */
.fw-card {
background-color: #custom-color !important;
}Responsive Issues
.widget-container {
width: 100%;
max-width: none;
overflow-x: auto;
}
.fw-embed {
min-width: 0; /* Allow shrinking */
width: 100%;
}Modal Positioning
.fw-modal {
z-index: 9999;
}
.fw-modal-dialog {
z-index: 10000;
}Best Practices
CSS Organization
Keep custom CSS organized and well-commented
Use CSS custom properties for consistent theming
Avoid overly specific selectors when possible
Consider accessibility when changing colors and fonts
Test with different widget data loads
Performance Considerations
Minimize CSS file size
Use efficient selectors
Leverage browser caching for custom stylesheets
Test loading performance with custom styles applied
Advanced Customization
CSS Custom Properties Reference
.fw-embed {
/* Colors */
--fw-primary: #49bcab;
--fw-primary-hover: #39998b;
--fw-text-primary: #282828;
--fw-text-secondary: #666666;
--fw-bg-primary: #ffffff;
--fw-bg-card: #f8f9fa;
/* Typography */
--fw-font-family: 'Open Sans', sans-serif;
--fw-font-size-base: 14px;
--fw-font-size-lg: 16px;
--fw-font-size-xl: 24px;
/* Spacing */
--fw-spacing-xs: 4px;
--fw-spacing-sm: 8px;
--fw-spacing-md: 16px;
--fw-spacing-lg: 24px;
--fw-spacing-xl: 32px;
/* Borders */
--fw-border-radius: 4px;
--fw-border-radius-lg: 8px;
}Animation & Transitions
/* Smooth transitions */
.fw-card {
transition: all 0.24s ease;
}
.fw-btn {
transition: background-color 0.2s ease, transform 0.1s ease;
}
.fw-btn:hover {
transform: translateY(-1px);
}
/* Loading animations */
.fw-embed-loading {
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}Ready to implement? Start with the basic examples above, then gradually add more sophisticated styling. Remember to test across different devices and widget configurations.
Need help? We're a small team and can't write custom styles for every use case, but we love helping with specific styling questions! Contact our support team if you get stuck, and don't forget to show us your creations - we love seeing what you build!
Last updated
Was this helpful?