Skip to main content

Single Story Embed Styling

You can customize the appearance of single story embeds 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​

storifyme-story {
  --storify-modal-background: rgba(0, 0, 0, 0.9);
}

Since single story embeds open in a modal viewer, you can customize the modal appearance:

storifyme-modal {
  --storify-modal-background: rgba(0, 0, 0, .85);  /* Backdrop color */
  --storify-modal-btn-width: 40px;                  /* Navigation button width */
  --storify-modal-btn-height: 40px;                 /* Navigation button height */
  --storify-modal-btn-background: #FFFFFF;          /* Navigation button background */
  --storify-modal-btn-arrow-fill: #000000;          /* Navigation arrow color */
}

Story Items (when using additional-widgets)​

If your single story embed includes additional stories, you can style them:

storifyme-story {
  --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 */
}

Live & New Badges​

storifyme-story {
  --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 */
}

Common Examples​

Dark Modal​

storifyme-modal {
  --storify-modal-background: rgba(0, 0, 0, 0.95);
  --storify-modal-btn-background: #333333;
  --storify-modal-btn-arrow-fill: #ffffff;
}

Branded Navigation​

storifyme-modal {
  --storify-modal-btn-background: #3498db;
  --storify-modal-btn-arrow-fill: white;
}

Compact Additional Stories​

storifyme-story {
  --storify-item-gap: 20px;
  --storify-item-radius: 12px;
  --storify-item-title-size: 0.9rem;
}

Advanced Customization​

For more CSS variables and advanced widget styling options, see the Widget Styling Guide.

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