- Livefyre Implementation Guide
- Getting Started
- Getting Started with Livefyre Integration
- Implementation Process
- Implementation Process
- App Integration Types
- App Implementation
- Implement Livefyre with Third Party Integration
- Architecture
- Embed an App
- Add Authetication to an App using Livefyre.js
- Build Server Side Tokens
- CollectionMeta Token
- User Auth Token
- Create a Collection Using the CollectionMeta Token
- Creating a Checksum
- Identity Integration
- Livefyre Identity
- Livefyre Identity
- Enable Livefyre Identity
- Use Social Apps with Livefyre Identity
- Create Your Social Apps
- Create a Facebook App for Use with Livefyre Identity
- Create a Twitter App for Use with Livefyre Identity
- Create a Yahoo! App for Use with Livefyre Identity
- Create a Microsoft Live Identity App for Use with Livefyre Identity
- Create a LinkedIn App for Use with Livefyre Identity
- Create a GitHub Identity App for Use with Livefyre Identity
- Using Studio to Connect Your Social Apps to Your Livefyre Implementation
- Add Livefyre.js to the Page
- Initialize Livefyre Identity
- Emails for Livefyre Identity
- Janrain Capture/Backplane
- Installation
- Installing Libraries
- Classes and Methods
- Network Methods
- setSSL Network Method
- buildLivefyreToken Network Method
- buildUserAuthToken Network Method
- validateLivefyreToken Network Method
- setUserSyncUrl Network Method
- syncUser Network Method
- getUrn Network Method
- getUrnForUser Network Method
- getNetworkName Network Method
- getSite Network Method
- Network Class Methods
- Collection Class Methods
- createOrUpdate Collection Method
- buildCollectionMetaToken Collection Method
- buildChecksum Collection Method
- getCollectionContent Collection Method
- getUrn Collection Method
- Site Class Methods
- buildBlogCollection Site Method
- buildChatCollection Site Method
- buildCommentsCollection Site Method
- buildCountingCollection Site Method
- buildRatingsCollection Site Method
- buildReviewsCollection Site Method
- buildSitenotesCollection Site Method
- buildCollection Site Method
- getUrn Site Method
- Examples
- Mobile SDKs
- Livefyre.js
- Creating Livefyre Tokens C#
- App Integrations
- App Customizations
- App Customizations
- Change Display Options
- CSS Classes
- Storify CSS Classes
- Translation Sets
- Move the Livefyre Logo
- Restrict Media
- Hide App Elements
- Change @mention Icon
- Highlight Content
- Customize the Date and Time Stamp
- Feature Content
- Connecting Janrain to Livefyre using AuthDelegate
- Aggregated Featured Content using the Featured APIs
- Style Content
- Apply Custom Styles
- Javascript Events
- Embed a Comments App
- Referral Tracking
- Device and Browser Support
- Twitter Display Requirements
- Stress Test Policy
- Analytics
- Integrating Livefyre with AEM
- Advanced Topics
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. |