Advanced CSS for HTML embed plugins – Yodel

Overview

Advanced CSS lets you fine-tune the look of your Yodel calendar when it is embedded on your website using the HTML embed (V2) snippet — for example on Wix, Webflow, or a plain HTML page.

You add only the CSS rules you want to change. Yodel’s built-in widget styles still apply for everything else. You do not need to copy or maintain Yodel’s full stylesheet.

Supported: Client-side rendered (CSR) and server-rendered (SSR) HTML embed plugins (the embed-v2.js / <yodel-widget> snippet).

Not supported: Legacy Widget (iframe) embeds. Custom CSS does not apply to iframe-based plugins. If you use the older iframe embed, switch to the HTML embed snippet or use the color and font settings in Plugin Settings instead.

Where to find Advanced CSS

Sign in to Yodel and open Plugin Settings for your calendar.
Expand the Optional: Advanced CSS section (near appearance and embed code).
Paste CSS into the editor, use Insert class reference or Insert snippet for starter templates, or Upload .css file to load an existing file into the editor.
Click Save. Your CSS is validated when you save; fix any errors shown under the editor and save again.
Refresh your live embed page to see changes (allow a few minutes for cache if needed).

The in-app editor shows a byte counter (maximum 32,768 bytes / 32 KB). The server enforces the same limit on save.

How CSS cascade works (important)

Yodel injects styles in two steps:

Base widget styles (colors, fonts, layout — managed by Yodel)
Your Advanced CSS (only what you add in Plugin Settings)

The browser merges these per property, not per rule block. You only declare properties you want to override; all other properties stay from the base stylesheet.

Example: change card padding only

Base styles (not shown in your editor):

.yodel-event-card--tile {
  padding: 16px;
  border-radius: 8px;
  background: #ffffff;
}

Your Advanced CSS (what you paste in the editor):

.yodel-event-card--tile {
  padding: 24px;
}

Result on your site: padding is 24px; border-radius and background are unchanged.

You do not need to re-declare every property on .yodel-event-card--tile — only the ones you want different.

Tile vs list view: Grid/card view uses .yodel-event-card--tile; list view uses .yodel-event-card--list. Target the class that matches your plugin’s display mode, or use shared hooks such as .yodel-event-card__content when both views should change.

Theme-wide changes: use CSS variables

For accent color, background, and text color across the whole widget, prefer CSS variables on the yodel-widget element instead of overriding many individual classes:

yodel-widget {
  --yodel-accent: #003366;
  --yodel-bg: #ffffff;
  --yodel-text: #222222;
}

Variable	What it affects
`--yodel-accent`	Highlight color (date badges, icons, primary buttons)
`--yodel-accent-text`	Text on accent backgrounds (usually auto-calculated)
`--yodel-bg`	Widget container background
`--yodel-text`	Primary text (titles, headings)
`--yodel-text-secondary`	Detail text (organization, location, time)
`--yodel-font`	Font family (must match a font loaded on the page)

These variables cascade to child elements and work well for brand alignment without targeting every class.

Insert class reference vs writing CSS from scratch

Insert class reference (button in Plugin Settings) adds a curated list of common Yodel class selectors with empty rule blocks and plain-English comments. It does not copy Yodel’s internal property values — only hooks you can customize.

Use it when you:

Are new to Advanced CSS and want to see which classes exist
Need a starting template without guessing selector names
Want comments explaining what each class controls

Writing from scratch is fine when you already know the selector and property you need (for example .yodel-event-card--tile { border-radius: 12px; }).

Either way, delete or fill in empty stub blocks before saving. Blocks with only comments and no properties are ignored and not stored.

Insert snippet offers ready-made one- or two-property examples (card padding, rounded corners, accent color, etc.) you can paste and tweak.

Class reference

These are the primary .yodel-* hooks in the portal Insert class reference scaffold. They match real class names in the HTML embed (V2) widget. Target them in your Advanced CSS to adjust layout, spacing, and typography.

Additional .yodel-* classes exist for internal layout. We document the supported customization hooks below; undocumented selectors may change between releases.

Class / selector	What it controls
`yodel-widget`	Theme CSS variables (widget-wide)
`.yodel-widget-content`	Main widget padding and outer layout
`.yodel-event-card--tile`	Event card in grid/tile view — padding, borders, shadow
`.yodel-event-card--list`	Event card in list view row
`.yodel-event-card__content`	Inner card content area (shared by tile and list)
`.yodel-event-card__title`	Event card title text
`.yodel-event-card__date-badge`	Date badge on event cards
`.yodel-event-card__detail-text`	Time, location, organization detail text
`.yodel-event-card__action-button`	Share / Add to calendar buttons
`.yodel-event-card__learn-more`	Learn More link on cards
`.yodel-filter-bar`	Filter bar spacing and layout
`.yodel-filter-chip`	Category / quick filter chips
`.yodel-filter-bar__search-btn`	Search toggle button in filter bar
`.yodel-keyword-chip`	Active keyword search chip
`.yodel-event-grid--card`	Grid / card gallery layout and gap
`.yodel-event-grid--list`	List view gallery layout
`.yodel-event-details`	Full event detail panel
`.yodel-grouped-events__title`	Grouped events modal header
`.yodel-event-card__sponsored`	Sponsored / featured label
`.yodel-empty-state`	“No events” empty message
`.yodel-powered-by`	“Powered by Yodel” footer
`.yodel-skeleton`	Loading skeleton blocks

Copy-paste scaffold (matches portal Insert class reference)

/* Theme tokens — accent, background, text (applies widget-wide) */
yodel-widget {
  /* e.g. --yodel-accent: #003366; */
  /* e.g. --yodel-bg: #ffffff; */
  /* e.g. --yodel-text: #222222; */
  /* e.g. --yodel-text-secondary: #666666; */
  /* e.g. --yodel-font: "Your Font", sans-serif; */
}

/* Main widget padding and outer layout */
.yodel-widget-content {

}

/* Event card — tile / grid view (padding, borders, shadow) */
.yodel-event-card--tile {

}

/* Event card — list view row */
.yodel-event-card--list {

}

/* Event card inner content area (shared) */
.yodel-event-card__content {

}

/* Event card title text */
.yodel-event-card__title {

}

/* Date badge on event cards */
.yodel-event-card__date-badge {

}

/* Time, location, org detail text */
.yodel-event-card__detail-text {

}

/* Event card action buttons (Share, Add to calendar) */
.yodel-event-card__action-button {

}

/* Learn More link on event cards */
.yodel-event-card__learn-more {

}

/* Filter bar — spacing and layout */
.yodel-filter-bar {

}

/* Filter chips / category quick filters */
.yodel-filter-chip {

}

/* Search toggle button in filter bar */
.yodel-filter-bar__search-btn {

}

/* Active keyword search chip */
.yodel-keyword-chip {

}

/* Grid / card gallery layout and gap */
.yodel-event-grid--card {

}

/* List view gallery layout */
.yodel-event-grid--list {

}

/* Event detail panel (full event view) */
.yodel-event-details {

}

/* Grouped events modal header */
.yodel-grouped-events__title {

}

/* Sponsored / featured label */
.yodel-event-card__sponsored {

}

/* Empty calendar message */
.yodel-empty-state {

}

/* Powered by Yodel footer */
.yodel-powered-by {

}

/* Loading skeleton blocks */
.yodel-skeleton {

}

Add properties inside the blocks you need; remove blocks you do not use.

Customizing beyond the class reference

The class reference is a starting point, not a complete list of everything you can style. You can target other parts of the widget if you know the right CSS selector.

How to find a selector

Open your live HTML embed page (not the legacy iframe Widget embed).
Right-click the element you want to change and choose Inspect (Chrome, Edge, Firefox, Safari).
In DevTools, look for a class name on that element — usually starting with .yodel- (for example .yodel-event-card__date-month).
In Plugin Settings → Advanced CSS, add a rule with only the properties you want to change:

.yodel-event-card__date-month {
  font-size: 11px;
}

Save, then hard-refresh your embed page to see the result.

What you can and cannot target

OK to try	Not allowed (save will fail)
`.yodel-*` class selectors	`html`, `body`, or bare `*` selectors
`yodel-widget` and `:host` patterns	`@import` external stylesheets
CSS variables on `yodel-widget`	`javascript:` URLs or script-like CSS

Advanced CSS is not limited to the classes in Insert class reference. If your CSS is scoped to the widget and passes validation, you can save it — even when the selector is not in the table above.

Stability and support expectations

Approach	Stability
CSS variables on `yodel-widget`	Safest for brand-wide changes
Classes in Insert class reference	Intended customization hooks
Other `.yodel-*` classes you find in DevTools	May work, but can change when Yodel updates the widget

Undocumented selectors are use at your own risk: a widget update might rename or restructure classes, and your override could stop working until you adjust the CSS.

When to contact support: You have tried DevTools, saved successfully, refreshed the page, and matched specificity — but the style still does not apply. Include your plugin name, embed type (HTML V2 vs iframe), and the CSS you are using.

Recommended order

Theme variables on yodel-widget for colors and fonts.
Insert class reference or Insert snippet for common layout tweaks.
DevTools for one-off selectors not listed in the reference.
Support if you are blocked or need a stable, documented hook for a recurring request.

Specificity: making sure your rules apply

The live HTML embed runs most of its UI inside a shadow root. Selectors that work best:

Bare class (often enough — your CSS is appended after Yodel’s base styles):

.yodel-event-card--tile {
  border-radius: 12px;
}

:host + class (when you need to match how Yodel scopes base styles inside the shadow root):

:host .yodel-event-card--tile {
  border-radius: 12px;
}

yodel-widget + class — use only if the above do not work. The yodel-widget ancestor selector does not always match inside the interactive embed, even though it appears in Yodel’s internal stylesheets.

yodel-widget .yodel-event-card--tile {
  border-radius: 12px;
}

CSS variables are the exception: set them on the host element itself (works in both light DOM and shadow contexts):

yodel-widget {
  --yodel-accent: #003366;
}

Avoid unscoped global selectors such as html, body, or bare * — they are rejected on save because they could affect your host page outside the widget.

Shorthand vs longhand (common footgun)

If base styles set a longhand property (for example padding-top) and you override with a shorthand (padding), the shorthand resets all sides. That is normal CSS behavior, not a Yodel bug.

Tip: When changing one side only, use the same longhand property:

.yodel-event-card__content {
  padding-top: 24px;  /* safer than padding: 24px if you only want the top */
}

Uploading a `.css` file

Click Upload .css file in Advanced CSS.
Choose a plain text .css file from your computer.
The file contents replace or append to the editor (confirm if prompted when the editor already has text).
Review, remove unused empty blocks, and Save.

The file is read in your browser only; Yodel stores the resulting text on your widget settings — there is no separate CDN URL for custom CSS in this version.

Limits and validation

Limit	Detail
Maximum size	32 KB (32,768 bytes)
Embed types	HTML embed (V2) — client-side rendered (CSR) and server-rendered (SSR) only
Not supported	Legacy Widget (iframe) embed

On save, Yodel validates your CSS. The following are not allowed and will produce an error:

@import (external stylesheets)
javascript: URLs
expression() (legacy IE)
-moz-binding
Legacy IE behavior: (HTC behaviors) — not the same as modern scroll-behavior or overscroll-behavior, which are allowed
</style> or other markup injection attempts
Unscoped selectors targeting html, body, or universal *

Fix the reported error, then save again.

What not to do

Do not paste Yodel’s entire internal stylesheet — use overrides only.
Do not use @import to load fonts or CSS from other domains; use CSS variables and your site’s normal font loading instead.
Do not expect Advanced CSS on iframe (Widget) embeds — use HTML embed V2.
Do not use Advanced CSS to inject scripts or HTML — only CSS is supported.
Do not target html or body — rules must stay scoped to the widget.
Do not assume changes appear instantly on every CDN — hard-refresh your embed page after saving.

Enterprise-managed plugins

If your organization uses enterprise lock settings, Advanced CSS may be read-only and managed by your parent organization. Contact your Yodel administrator if the section is locked.

Troubleshooting (quick checks)

Symptom	What to try
Styles not visible	Confirm you saved Plugin Settings; hard-refresh the embed page
Save error	Read the inline error under the editor; reduce size or fix blocked syntax
No effect at all	Confirm you use the HTML embed (V2) snippet, not the iframe Widget embed
One property won’t change	Try bare `.yodel-` or `:host .yodel-` first (not only `yodel-widget .yodel-*`); check tile vs list class; check shorthand vs longhand

For additional help, contact Yodel support with your plugin name, embed type (HTML vs iframe), and a sample of the CSS you are trying to apply.