Control your site’s appearance.
Livefyre apps allow you to customize the look and feel of the interface, to better match your branding and customer experience. Customizations range from simple CSS alterations, to embedding custom text strings and action buttons.
- CSS Styling and Branding: use CSS to style elements of a Livefyre App to fit your brand.
- Custom Text Strings: customize any text strings in the app for internationalization or branding.
- Action Buttons: create custom action buttons for content in an app.
- Date and Timestamp: change the date and timestamp format to meet your needs.
- Featured Content: highlight important content to your users by using CSS to custom style Featured content.
- User Badges: use CSS with User Tags to create User Badges for members of your community.
- Permalinks: use your bit.ly URL shortener to customize content permalinks.
Livefyre apps offer an extensive CSS styling interface, allowing you to customize your user experience to meet your current design standards.
Styling options include:
- Styling the Stream: Livefyre streams may be styled and customized to fit your brand, and the rest of your site. For more information, see CSS Customizations.
- Styling the Comment Editor: The comment editor may be customized by changing the color, size and family for your font, or by changing the background color for the comment box. For more information, see Editor CSS.
- Moving the Livefyre Logo: While the default location for the Livefyre logo is at the top of the stream, this image may be removed, and replaced with a smaller “Powered by Livefyre” logo at the bottom of the stream. For more information, see Moving the Livefyre Logo.
- Hiding elements of the stream: Elements of the stream may be hidden if they are not relevant to your community. Elements which may be removed include the reply button, edit profile menu, logout menu, comment notifier, and user avatars. For more information on removing these elements, see Hiding App Elements.
- Customizing the Friend Tagging Logo: By default, the Livefyre logo is displayed in the friend tagging dropdown list for all users who have commented in the stream on the page. To replace this image with your own logo, please see Branding in Studio.
To improve your community’s experience, you may customize the text string for any text labels to match your site’s language or branding. For example, you may change “Like” to “Recommend,” or “Delete” to “Borrar.”
For more information, see Localize Strings.
Custom action buttons, and the associated action, can be added to any user or piece of content in any Livefyre App, alongside the existing Flag, Share, Delete buttons. Examples could be enabling a user to hide content from another user, or to follow a user.
For technical information on adding custom action buttons, please see Adding Custom Buttons.
By default, Livefyre Apps display a relative timestamp for posts to the stream (4 minutes ago, 5 hours ago, 8 days ago, 2 months ago).
You may customize the timestamp displayed using the Date and Timestamp Customization, which allows you to select from a list of available formats.
Any piece of content in a Collection can be tagged as “featured” by your network site owners or moderators, in order to highlight important content and encourage high quality replies from other users. Once a piece of content has been featured, a Featured tag will be displayed on the content in the app, so that users can easily identify content that owners and moderators have highlighted.
For more information, please see How to Feature Content in Studio.
Note: In Comments:
- The two most recent pieces of Featured content will also be pulled above the stream.
- It may take up to seven minutes for Featured content to appear above the editor.
- A Featured tag may be added to any comment within the stream, and used to style the comment, but only Livefyre-native user generated content will appear above the editor.
When content is unfeatured, the Featured tag displayed will be removed in real-time.
Once a piece of content has been featured, a Featured badge will be displayed on the content in the app, and you may use the fyre-featured CSS class to custom style the content.
User Badges are custom styling features, which allow you to style Livefyre content posted by specific user types (such as moderators, editors, or any other User Group you wish to define) to Livefyre Chat, Comments, Reviews, or Live Blog Apps. This allows you to highlight this content to your users.
To apply User Badges, first add a User Tag to the account, then style the content using CSS.
To add User Tags to an account:
- Create Owners and Moderators through Studio to assign the Moderator User Tag to the account.
- Create user groups, then add users to them through Studio to apply Tags with the group name to the selected users.
- Appy User Tags directly to Accounts using the Add User Tag HTTP call or Ping for Pull.
For more information on Users and User Groups, see Studio > Users > Creating User Groups.
For more information on styling options, see Developers > Reference > Style User Group Content.
Permalinks allow you to link to archived comments or content within your streams. To enable this feature, Livefyre uses a default URL format: fyre.it. This format may be customized to match your standard bit.ly format.
If users click a permalink from a social network to a Livefyre content app, they will be taken to the Livefyre content stream. The content will be displayed in a breakout view of the stream, just below the editor, with full context displayed. A blue line will be shown below the avatar for the permalinked content. (This blue line will disappear after a few seconds.)
(If permalinked content is deleted, a message to that effect will be displayed in the breakout view.)
If you wish to create custom permalinks for comments when sharing conversations, you may use your Bitly account, rather than the standard Livefyre shortened URL (fyre.it). Using your Bitly account will help remind users that they will be visiting content on your site when clicking on a permalink.
To implement this feature, go to Studio > Settings > Integration Settings > Social Sharing, and enter your Bitly API Key and username.
Note: To avoid unnecessary URLs created on your behalf, Bitly permalinks are generated on an as-needed basis.