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.