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, 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.