Customize a Scoreboard

Customizing a scoreboard ensures that the scoreboard fits with the branding and styling of the rest of your digital property. If you'd like to change the look and feel of the embedded scoreboard, there are a few important steps to be aware of.

Default Scoreboard

Customized Scoreboard

Step 1 - Create a Scoreboard (Embed) Template

You'll need to use CSS to control the design style of your scoreboard. Your preferences must be captured in an embed template.

Who can create a template?

Administrators and Developers are able to create new embed templates.

Navigate to Manage > Templates using the left navigation menu.
Select Embed from the options at the top of the page.
Select the Create New Template button.
Name your template, e.g. Scoreboards Template.
Scroll to the bottom of the page and enter your preferences in the Top HTML field using CSS (see sample code below).
Save your preferences.
This new template will appear on the list of embed templates.

For non-developers:

The screenshot and code below show an example of what you can do using CSS:

<style>
div#SCRBBL-TOOLBAR {
display:none;
}
div#SCRBBL-CONTENT {
display:none;
}
.scoreboard_full {
background-color:#3d3e3f;
color:#FFF;
}
.stream_scoreboard_container
.scoreboard_top_html {
background-color:#3d3e3f;
}
</style

Step 2 - Create the Scoreboard

A scoreboard must be created from within a stream. You'll need to create a stream first, then add a scoreboard to it. Only one scoreboard can be created per stream.

Create a new stream from the dashboard. We recommend giving the stream an intuitive name, e.g. Superbowl Finals Scoreboard.
In the Content Studio, go to Create: Post above the RTE and select Scoreboard from the list of content options.
On the Scoreboard settings page, select your preferences.
Select Publish to generate the scoreboard.

Important!

Do NOT use the embed code on the Scoreboards settings page because it will not have any of your styling preferences attached to it. Go to Step 3 to learn how to publish the scoreboard with the styling preferences outlined in Step 1.

Tip!

You'll know the scoreboard is attached to the stream in 2 ways:

A green check mark will appear on the Stream Menu next to Menu > Setup > Scoreboard.
If you change Create: Post above the rich text editor to Create: Scoreboard, you should see the scoreboard.

Step 3 - Publish Using the Embed Code Created in Step 1.

You'll need to publish the whole stream to display the customized scoreboard. In order to apply your preferences to the published scoreboard, select the embed template created in Step 1.

From within your stream, navigate to Setup > Templates.
Select Embed.
Scroll to find the embed template created in Step 1.
Click the template's name to generate the embed code.
The script code will appear on the right side of the page (Click Old Code for the iframe version).
Paste the code on your digital property.

You should see your customized scoreboard appear on your webpage!

If you have any questions along the way, feel free to reach out to our support team at help@rockcontent.com.