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 Live 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 Live from its out-of-the-box offerings. These are not supported features and Live 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