Samples: Customizing your Embed or Whitelabel with CSS

You can use CSS to alter elements of the ScribbleLive white label or embed templates. You may want to hide certain things that are part of Scribble’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 Scribble from its out-of-the-box offerings. These are not supported features and ScribbleLive 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.

The CSS below will hide the box that allows users to log in to comment on your ScribbleLive 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: