Skip to main content

Widget styling and customization

The best way to style and customize the widget is using StorifyMe Widget Editor, which is a visual tool available inside StorifyMe platform.

For advanced customization beyond the visual editor, you can use CSS custom properties (variables) to override the default styling.

Custom CSS Styling

You can customize the appearance of StorifyMe widgets using CSS custom properties. Add these to your stylesheet to override the default styling.

Tip: All CSS variables use the --storify- prefix and can be set directly on the web component element.

Basic Usage

story-widget {
--storify-background: #ffffff;
--storify-item-radius: 12px;
--storify-title-color: #333333;
}

Common Variables

Widget Container

story-widget {
--storify-background: transparent; /* Widget background color */
--storify-border: none; /* Widget border */
--storify-border-radius: 3px; /* Widget border radius */
--storify-vertical-spacing: 15px; /* Top/bottom padding */
--storify-horizontal-spacing: 20px; /* Left/right padding */
}
story-widget {
--storify-title-color: #111111; /* Title text color */
--storify-title-size: 1.2rem; /* Title font size */
--storify-title-font: inherit; /* Title font family */
--storify-header-align: center; /* Title alignment */
}

Story Items

story-widget {
--storify-item-radius: 8px; /* Item border radius */
--storify-item-gap: 40px; /* Space between items */
--storify-item-title-size: 1rem; /* Item title size */
--storify-item-title-color: #111111; /* Item title color */
--storify-item-text-color: #111111; /* Item text color */
}
story-widget {
--storify-carousel-btn-width: 30px; /* Button width */
--storify-carousel-btn-height: 30px; /* Button height */
--storify-carousel-btn-background: #FFFFFF; /* Button background */
--storify-carousel-btn-arrow-fill: #000000; /* Arrow color */
}
storifyme-modal {
--storify-modal-background: rgba(0, 0, 0, .85); /* Backdrop color */
--storify-modal-btn-background: #FFFFFF; /* Navigation button background */
--storify-modal-btn-arrow-fill: #000000; /* Navigation arrow color */
}

Live & New Badges

story-widget {
--storify-item-live-background: #E86464; /* Live badge background */
--storify-item-live-color: #FFFFFF; /* Live badge text */
--storify-item-new-background: #111111; /* New badge background */
--storify-item-new-color: #FFFFFF; /* New badge text */
}

Built-in Themes

Apply pre-configured themes using the theme attribute:

<!-- Dark theme -->
<story-widget theme="dark"></story-widget>

<!-- Transparent (no background/padding) -->
<story-widget theme="transparent"></story-widget>

Common Examples

Brand Colors

story-widget {
--storify-title-color: #2c3e50;
--storify-carousel-btn-background: #3498db;
--storify-carousel-btn-arrow-fill: white;
--storify-item-live-background: #e74c3c;
}

Minimal Style

story-widget {
--storify-background: transparent;
--storify-vertical-spacing: 0;
--storify-item-gap: 20px;
--storify-item-radius: 16px;
}

Compact Layout

story-widget {
--storify-vertical-spacing: 10px;
--storify-horizontal-spacing: 10px;
--storify-item-gap: 15px;
--storify-title-size: 1rem;
}

Testing Your Styles

Tip: Open your browser's DevTools and inspect the <story-widget> element to see all available CSS custom properties and their current values.

Note: These variables work with Shadow DOM. You cannot style internal elements directly - use CSS variables only.