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 */
}
Header
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 */
}
Carousel Navigation
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 */
}
Modal
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.