Storify CSS Classes

CSS classes available for your Storify Apps.

Use CSS to customize your Storify Apps for a more complete integration with your page, by simply overriding the default CSS with your own stylesheet. This section describes available CSS customizations.

Author Elements

Allows you to customize styling for the post’s author avatar, author name, and timestamp.

Class Description
.s-author-name Author
.s-author-avatar The author’s avatar.
.s-img The author’s avatar image.
.s-timestamp The timestamp for the date content was posted.

Header Elements

Allows you to customize the header section for the story page.

Class Description
.super-header Main Header
.outer-header Main header row 1
.s-countdown Main header row 1 countdown timer
.s-liveness Main header row 1 “Live” status
.base-header Main header row 2
.s-dropdown Main header row 2 Sort dropdown trigger.
.s-dropdown-menu Main header row 2 Sort dropdown menu.
.s-dropdown-triangle Main header row 2 Sort dropdown menu caret.
.s-dropdown-option Main header row 2 Sort dropdown menu item.
.s-views Main header row 2 number of views.
.s-share-button button Main header row 2 Share button.
.s-share-menu Main header row 2 Share menu.

Post Elements

Allows you to customize styling for the post’s story elements.

Class Description
.s-liveblog Container for the entire Story element
.s-post The post container
.s-modal-content Post modal container
.s-element-content All content elements inside of a post
.s-element-text ul Text element
.s-element-text h2 Text element Headline
.s-element-text p Text element paragraph
.s-element-text ul Text element unordered list
.s-element-text ol Text element ordered list
.s-element-text li Text element list items
.s-element-text blockquote Blockquote
.s-element-text blockquote:before The icon for the beginning of a blockquote
.s-element-text blockquote:after The icon for the end of a blockquote
.s-element-image Inline image element container
.s-img <img> element
.s-image-caption Caption for images and videos found on social media (ex: Instagram image)
.s-upload-image-caption Caption for images and videos uploaded via the Story editor
.s-element-video Video element
.s-element-quote Quote element (ex: Tweet w/text only)
.s-element-quote-image Quote w/image element (ex: Tweet w/image)
.s-element-quote-video Quote w/video element (ex: Tweet w/video)
.s-link-body Link preview inside of a quote (ex: Tweet w/link preview)

Footer Elements

Allows you to customize the footer section for each individual post.

Class Description
.s-post-footer The post’s footer.
.s-sidenotes a The Sidenotes button in the post’s footer.
.s-like The “Like” button in the post’s footer.

On this page