Create
      Back to home
      1. Rock Content Knowledge Base
      2. Live
      3. Create

      Customize Your Stream's Design with CSS

      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.
       

      Navigation

      Manage > Templates

      Permission

      Administrator | Developer

      Whitelabel

      To access the custom style-sheets:
       

      1. Go to the Manage Templates page. 
      2. Select Whitelabel and click the Edit button on the right hand side 
      3. Locate the Custom CSS section
      4. Place your custom code here
      5. 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:
       

      1. Go to the Manage Templates page.
      2. Select the front end experience tab you want to change: Embed, Pinboard, Mobile or Timeline
      3. Select the theme you want to modify, or create a new theme.
      4. Once selected, the Edit should be available on the right hand side. Click the Edit button to go to the Template Settings page.
      5. 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