Custom CSS samples

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:

Please note that 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.

…………………………………………………………………………………………………………………..

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 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.

  1. Go to the Setup > Templates page of your event.
  2. Select White Label or Legacy Embed, depending on which template you’re looking to hide the login.
  3. Locate the Whitelabel Top HTML section and paste the code below. For legacy embeds, you will need to add this code to the Embed TopHTML.
  4. Click the Save button at the bottom.
<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:

Screen Shot 2014-06-20 at 2.44.43 PM

A white label with the anonymous login option hidden using CSS

Screen Shot 2014-06-20 at 2.44.27 PM

 

…………………………………………………………………………………………………………………..

Removing social login options

Implementation: white label, legacy embed

The CSS below will hide div that allows users to log in to comment on your ScribbleLive content with one of their social networks. Removing the social logins will force a user to log in just by typing their name.

  1. Go to the Setup > Templates page of your event.
  2. Select White Label or Legacy Embed, depending on which template you’re looking to hide the login.
  3. Locate the Whitelabel Top HTML section and paste the code below. For legacy embeds, you will need to add this code to the Embed TopHTML.
  4. Click the Save button at the bottom.
<style>
 #LoginOptions div.Social {
 display:none ;
 }
 </style>

 

…………………………………………………………………………………………………………………..

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:

  1. Go to the Setup > Templates page of your event.
  2. In the Whitelabel Top HTML section, add the code found below.
  3. Scroll down and select the Save button.
<style>
h2#ThreadTitle em
{
display:none;
}
</style>

Before:

Screen Shot 2014-06-20 at 2.56.15 PM

After:

Screen Shot 2014-06-20 at 2.56.52 PM

 

Advertisements