Experiences created with Live should be aligned with your brand's philosophy and style. In the Manage Templates section of your account, you are able to customize the look and feel of your publishing experiences using CSS.
- Access custom style-sheets for your whitelabel
- Access custom style-sheets for your embed, mobile, pinboard, and timeline templates
Navigation
Manage > Templates
Permission
Administrator | Developer
Whitelabel
To access the custom style-sheets:
- Go to the Manage Templates page.
- Select Whitelabel and click the Edit button on the right hand side
- Locate the Custom CSS section
- Place your custom code here
- Click the Save button at the bottom.
Here is the file with CSS related to the whitelabel:
Documentation for CSS whitelabel
Embed 7, Pinboard, Mobile, Timeline
Please note that each experience has its own section to place CSS. To make changes across all experiences, each of the 4 themes will need to be changed. The experiences were built off similar CSS base so unless stated, the code within the file applies to all 4.
To access the custom style-sheets:
- Go to the Manage Templates page.
- Select the front end experience tab you want to change: Embed, Pinboard, Mobile or Timeline
- Select the theme you want to modify, or create a new theme.
- Once selected, the Edit should be available on the right hand side. Click the Edit button to go to the Template Settings page.
- Locate the Template Top HTML/Header section and place your custom CSS here.
To apply these CSS to changes to your stream
You'll need to use the embed code template with the custom changes in order to apply the unique styling to your front-end experience.
To locate the customized embed code:
- Go into your stream
- Navigate to Setup > Templates > Embed (or Pinboard if using that visualization)
- Find and click the name of the custom template you created with CSS
- The embed code will appear on the right side of the screen
- Embed this code into your content management system (CMS)
- The embedded experience will obey the CSS styling your applied to the template
Here is the file with CSS related to the embed, pinboard, mobile, and timeline:
Documentation for CSS v7_mobile_pinboard