Samples: Customizing your Embed or Whitelabel with CSS

You can use CSS to alter elements of the Live white label or embed templates. You may want to hide certain things that are part of Live’s out-of-the-box offerings, or just change the look and feel of others to better match your digital properties. Below, you’ll find ideas and sample code for the following:

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.

The code you’ll use will differ depending on how you’re displaying the content: via white label,embed (v7) or legacy embed (v5). We’ll specify which implementation method the code should be used for.

Navigation:
Manage > Templates
Menu > Setup > Templates
Permission:
Administrator | Developer

Removing anonymous login

Implementation: white label, legacy embed, embed v7

The CSS below will hide the box that allows users to log in to comment on your Live content by simply indicating a name. Removing the anonymous login option will force a user to log in using one of his or her social profiles in order to leave a comment.

Go to the Setup > Templates page of your event.
Select the template you would like to modify. For example, click White Label or Legacy Embed.
Locate the Whitelabel Top HTML section and paste the code sample below. For legacy embeds, you will need to add this code to the Embed TopHTML.
Click the Save button at the bottom of the page.

<style>
 #LoginOptions div.Anonymous {
 display:none ;
 }
 </style>

For embed v7

<style>
.scrbbl-tb-login-quick {
    display: None;
}
</style>

A white label with the anonymous login option:

A white label with the anonymous login option hidden using CSS

Removing “Live” text from white label page

Implementation: white label

When an event is live, a “Live” indicator is displayed on a white label. If you want to remove it:

Go to the Setup > Templates page of your event.
In the Whitelabel Top HTML section, add the code found below.
Scroll down and select the Save button.

<style>
h2#ThreadTitle em
{
display:none;
}
</style>

Before:

After: