CSS Samples

The documents below provide sample code for commonly used CSS changes. For example, the following features can be modified with CSS:

  • Comments & Replies
  • Pinboard headers
  • Countdown widgets
  • Email notification message
  • Timestamps
  • Polls
  • Slideshows
  • Flags
  • And more...

Sample code:

You can INSPECT an existing stream (right click) to identify the name of the class you want to modify.

 

1. To see the “building blocks” of the stream outlined in RED...

<style>* { border: 1px solid red !important; }</style>

2. To change the colour of the embed header...

<style>.scrbbl-tb-bar {background: #ffcc05;}</style>

3. To remove the Engage header...

<style>.scrbbl-tb-bar {display:none}</style>

4. To remove an author's avatar...

<style>.scrbbl-post-meta-wrap-avatar {display:none}</style>

5. To increase font size...

<style>body {
  font-size: 14px;}</style>

 

Place this code in a TEMPLATE (sometimes called a THEME). To create a new Template:

  • Navigate to Manage > Template
  • Select Embed (to modify an Embed template)
  • Select Create New (only Administrators and Developers will see this option)

 

The CSS samples above should be placed in the field at the bottom of the page called TEMPLATE TOP HTML. Click here to learn more.

 

In the attached samples below, see the comments to see what the CSS modifies. There is a DOM tree at the start of each file to give you an idea of the location of the style overall.

Note: The code provided for these customizations is sample code used to modify Engage from its out-of-the-box offerings. These are not supported features and Engage is not responsible for any future depreciation or changes we make to our platform that alter the functionality of the code within. 

 

20 KB20 KB