Configure shared component styles

The current Settings → POM Theme → Design system → Components area contains three focused groups: Inner row content toggler, Website alerts/notices, and Video player.

Inner Row content toggler

Enable Inner row content toggler only when editors need to collapse long content inside an Inner Row.

After it is enabled, Inner Row settings can expose Enable hide/reveal long text on demand and dependent controls for:

• Height to trigger hiding;
• Trigger event: Click or Hover;
• Gradient shadow on bottom;
• Shadow color;
• Toggle button type;
• Open button text and Close button text.

Prefer Click for an action visitors must intentionally control. Verify keyboard access, visible focus, understandable labels, and the expanded state at every responsive width.

Website alerts and notices

Website alerts/notices defines background and text colors for:

• success alerts;
• standard notices;
• error alerts.

Set each background and text pair together. These settings can affect theme and form messages that use the shared notice styles.

Video player

Use Video player to choose how the theme renders self-hosted foreground videos:

• Default player preserves the established POM Theme behavior and is the default for existing and new sites.
• Custom player (Video.js 10) uses Video.js for direct MP4, WebM, and OGV sources as well as Pomatio Video Hosting logical URLs.

The player source is independent of this choice. A Pomatio Video Hosting logical URL can be pasted into the same self-hosted MP4 field as a direct media URL. Rows and columns always keep their lightweight Jarallax background player and do not load Video.js.

When Custom player (Video.js 10) is selected, choose its appearance under Video.js skin:

• Default skin preserves the standard Video.js appearance.
• Custom skin applies three explicit visual roles configured directly below it: Background color for the control bar and menus, Controls color for icons and labels, and Accent color for progress, selected states, and primary actions. The color fields are visible only for this skin.

Poster fit, allowed playback speeds, and preload policy remain available for both Video.js skins. These settings apply equally to ordinary MP4, WebM, and OGV files from the WordPress Media Library and to Pomatio Video Hosting sources, so they remain theme settings. Each Video component decides whether its optional controls are visible. Hosted playlists use the same global skin and player policy. Hosted HLS starts in automatic quality mode: the rendition is capped to the player's physical display width, including high-density screens, and can step down when measured bandwidth is insufficient. Timeline thumbnail previews use the generated sprite sheet but display each cue at a compact maximum width of 160 pixels. With autoplay and a poster, the poster remains the only visible content until playback starts. The conditional player entry loads only on pages that use the custom player. Its larger HLS runtime is fetched separately only when a player actually needs adaptive HLS; direct MP4, WebM, and OGV playback does not download it.

The Video component can hide all controls and combine immediate, viewport, first-interaction, or hover autoplay with loop playback for product-feature and decorative videos. Its aspect ratio can remain at the backwards-compatible 16:9 default, use 9:16 or 1:1, follow the source video's intrinsic dimensions, or use an editor-defined custom ratio. These layout choices work with both the default and custom player.

After changing the skin, verify the large play control, timeline, menus, focus indicators, fullscreen mode, and status messages against both a light and a dark poster. Fullscreen uses the complete POM player container so the media, controls, poster, and theme skin keep the same layout; Safari and iOS use their native media presentation when container fullscreen is unavailable. Ensure text and controls have sufficient contrast against the player background.

Validate message states

Use a representative success, notice, and error message with real-length text. Confirm:

• text has sufficient contrast;
• the message type is communicated by wording, not color alone;
• links remain distinguishable;
• long or translated messages wrap correctly;
• form messages remain visible near the relevant task.

Scope

Do not use this subsection for arbitrary Page Builder cards or custom components. Their reusable presentation belongs in their supported global setting, a stable button or palette selection, or a deliberately maintained CSS class.