Customise the interface of the Content Player by applying CSS updates

Overview

You can customise the size and appearance of the Content Player so that it displays your preferred colours, images and font face to suit your brand, website or app, instead of using its default styles. To do this, you must download the offline Content Player files and apply updates to the CSS - you will need to have experience using CSS3.

Here, we provide instructions for making CSS customisations in the <script> tag for our new platform. However, we have retained legacy information in order to continue support for existing customers that retain the 'iframe' method of integration - this may also help to compare the legacy and new approaches during migration to our new platform which uses the <script> tag implementation.

Content Player

Overview | Preparations | Creating and changing styles (Font family & colours, Pages, Widgets, Example) | Adding parameters (Parameters & Examples)

Overview

Here, we describe how you can change the look and feel of the Content Player by creating a separate CSS file containing the styles and sending it to player using a parameter.

Required steps:

1. Preparations (before you start)
2. Creating (and changing) styles
3. Adding parameters

The example below shows the content player before and after changes to the CSS colour properties.

Before:

After:

Preparations (before you start)

You must meet these few requirements in order for the Content Player to receive the custom styles file:

You must meet a few requirements in order for the Content Player to receive the custom styles file - make sure you complete the following tasks:

1. Save the CSS file on a public server
2. Ensure CORS support on public server
3. Tell us the domain you want adding to our client configuration

➀ Save the CSS file on a public server

A CSS file that contains the custom styles must be available via a URL. This URL will be used as a value for the relevant parameter. In order to achive this, the file must be stored on a server in a directory that is accessible via a URL address. - for example: {your domain}/custom-styles-file.css

Examples:

• https://www.performgroup.com/files/perform-custom-styles.css
• https://www.optasportspro.com/opta-styles.css
• https://{your domain}/opta-styles.css

➁ Ensure CORS support on public server

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.

In the case of the Content Player, it must be able to access your custom CSS file

In the case of the Content Player, it will have a different domain to the server that will store your custom CSS file - you must ensure that this server has CORS support. To do this, the server must send the header Access-Control-Allow-Origin, which will allow the player to access the CSS file and display your custom styles.

For more information, we recommend that you refer to the following useful (external) links to Mozilla's developer documentation:

• Server-Side Access Control: https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control
• CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
• Access-Control-Allow-Headers: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
• Access-Control-Allow-Origin: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

➂ Tell us the domain you want adding to our client configuration

To complete this step, you will have to contact Global Support Desk. They need to add your domain to the client configuration tool settings that we hold for you - it must be the domain of server that you will use to store the custom CSS file.

Betting Client Services: BettingClientServices@statsperform.com

Creating (and changing) styles

The Content Player can only request/receive a custom CSS file one at a time. All elements of the OST hosted solution can be customised. For any element you want to change, the best way to find its CSS selector is to use the developer tools of the web browser. To help you get started, we have provided a list of most needed selectors with examples below. This should make it easier for you to quickly change the main colours and fonts of the OST to match/suit your company branding.

Changing font family

Below is an example of code that will modify the font family for all elements:

body, .Opta, .Opta > .Opta_W.Opta_F_LA > div {
  font-family: "Courier New";
}

Changing colours

Most of the main colours are defined inside the :root element as CSS variables. If you would like to change any other specific colour, you must use the selector for the specific element.

Below is a list of the default CSS variables with colours:

:root {
  --main-color: #2a3548;
  --main-light-color: #525d70;
  --main-hover-color: #434e61;
  --neutral-color: #68747a;
  --neutral-light-color: #ced8dc;
  --team-home-color: var(--main-color);
  --team-away-color: #0099e2;
  --background-color: #eceff1;
  --background-light-color: #fff;
  --font-color: #000;
  --menu-font-color: #fff;

Here, this example code will produce the following result.

:root {
  --main-color: #3eb326;
  --main-light-color: #68c756;
  --main-hover-color: #54bb42;
  --team-away-color: #277119;
}

 

You can also use the hsl and rgb elements - we demonstrate this in the example below with the 'dark theme':

:root {
  --main-color             : hsl(205, 24%, 12%);
  --main-light-color       : hsl(205, 14%, 10%);
  --main-hover-color       : hsl(205, 14%, 14%);
  --background-color       : hsl(205, 15%, 10%);
  --background-light-color : hsl(205, 15%, 17%);
  --team-home-color        : #FAFD5C;
  --team-away-color        : #b3d4fc;
  --font-color             : hsl(0, 0%, 100%);
  --menu-font-color        : hsl(0, 0%, 100%);
  --neutral-color          : hsl(194, 9%, 59%);
  --neutral-light-color    : hsl(180, 5%, 15%, 1);
}

Pages

If you want to change something on a specific page, you can use a prefix for the CSS selector for the page:

Page	CSS selector
Live Match	[data-page="liveMatch"]
Player Stats	[data-page="playerStats"]
Team Stats	[data-page="teamStats"]
Head To Head	[data-page="headToHead"]

Widgets

If you want to make a change to the embedded widgets, find the corresponding prefix for the CSS selector - this is often the first .Opta element inside the page but it can differ:

Widget	CSS selector
Live Match	[data-page="liveMatch"] > .Opta
Player Overview	[data-page="playerStats"] > .Opta
Player Stats	[data-page="playerStats"] [data-module="popup"] .Opta
Team Stats	[data-page="teamStats"] > .Opta
Head To Head	[data-page="headToHead"] > .Opta

Complete example

The following code example contains changes to several elements, such as the font and colours, including the background.

body, .Opta, .Opta > .Opta_W.Opta_F_LA > div {
  font-family: "Courier New";
}

:root {
  --main-color             : #FFF8E1;
  --main-light-color       : var(--main-color);
  --main-hover-color       : var(--main-color);
  --background-color       : var(--main-color);
  --background-light-color : var(--main-color);
  --team-home-color        : #4CAF50;
  --team-away-color        : #CDDC39;
  --font-color             : #009688;
  --menu-font-color        : var(--font-color);
  --neutral-color          : hsl(0, 0%, 40%);
  --neutral-light-color    : hsl(0, 0%, 80%);
}

.custom-widget .slides > ul > li {
  border: 1px solid var(--neutral-light-color);
  border-radius: 0;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.15)
}

.custom-widget .box-container {
  border: 1px solid var(--neutral-light-color);
  border-radius: 0;
  background: transparent;
}

body > header {
  border-bottom: 1px solid var(--neutral-light-color);
}

.custom-widget select {
  border: 1px solid var(--neutral-light-color);
}

[data-module=popup], [data-page=playerStats] .Opta header {
  top: calc(10vh + 1px);
}

[data-page=playerStats] .Opta header ul.stats-header {
  border-bottom: 1px solid var(--neutral-light-color);
}

Adding parameters

When the custom CSS file is located on a server, the styles can be added to the Content Player by using the parameter data-cssdiff (Watch&Bet 2.0) or cssdiff (Legacy method). If you want to hide the Opta logo, you can use the parameter data-showLogo (Watch&Bet 2.0) or showLogo (Legacy method).

You should check/change the example values given in the below table and examples, and make sure they are correct for your integration.

Parameters

Parameter	Description	Default value	Example value
data-cssdiff (Watch&Bet 2.0) cssdiff (Legacy)	Load custom styles. Value: the file path of your custom CSS file on your server	n/a	http://domain.com/styles.css
data-showLogo (Watch&Bet 2.0) showLogo (Legacy)	Show or hide Opta logo. Available values: true|false	true	false

Examples

You can use the Content Player as an iframe - to load the custom styles from the CSS file, you must add the parameter data-cssdiff (cssdiff for Legacy):

Watch&Bet 2.0:

If you want to use the wrapper version, you must use data- tags:

<script
  src="https://player.performgroup.com/csb.js"
  data-ost="true"
  data-cssdiff="https://www.optasportspro.com/opta-styles.css"
  data-showLogo="false">
</script>

 

Legacy method:

If you want to use the iframe version, add it to the URL:

<iframe src="http://visualisation.performgroup.com/csb/index.html?{your_other_parameters}&ost=true&cssdiff=https://www.optasportspro.com/opta-styles.css" width="700" height="440"></iframe>

If you want to hide the Opta logo, you can add showLogo=false to the URL:

<iframe src="http://visualisation.performgroup.com/csb/index.html?{your_other_parameters}&ost=true&cssdiff=https://www.optasportspro.com/opta-styles.css" width="700" height="440"></iframe>

 

Live Action Widget

The Live Action Widget is available as a standalone widget or as a widget contained within the Content Player (formerly Content Scoreboard or CSB). It is available for Soccer and powered by Tier 13 data from Opta and can be set up in the same way as any other Opta widget.

Customisation for 2D Visualisation is available with 4-VIS in release version 1.35_1, but the parameter imageconfig is available in version 1.36. This tutorial explains how to swap images for a customised banner, pitch, stadium or goal view, and customise the CSS (see Step 2).

Here, you will learn how to implement this yourself. It is only for Soccer and will work with existing CSB CSS customisations (see Step 3). This guide is intended for a technical audience with CSS and JavaScript skills.

1. How to change the images displayed in the visualisation

Our Opta Match Visualisation and Runningball Visualisation allow you to use custom images, such as a customised banner, pitch (flat and premium), stadium or goal view. To achieve this, you must prepare the image files and a JavaScript (JS) file and store them on a client webserver, in the appropriate directories, and load the Content Player with a path to JavaScript file in the imageconfig parameter.

However, you do not need to prepare all assets - for example, the banner, goal view and pitch - nor provide all sizes and ground conditions. In order to override one specific asset, you can just add that reference into your configuration and the Content Player will continue to use the default values for all the other settings.

Some resources use variables that are replaced at runtime based on the state of the application. The available variable keys are as follows.

Variable key	Description and accepted values
SIZE	Used in resources to provide the size information into the configuration value. Used for all parameters. Values: narrow | normal | wide
GROUND_CONDITION	Used in resources to provide the condition information in the configuration value. Used for pitch and goal view parameters. Values: normal | frost | snow
WEATHER	Used for the stadium parameter to provide the weather information in the configuration value. Not valid with other parameters. Values: normal | rain | snow

Hosting the files on your own servers

If you wish, it is possible to host your own JavaScript file with the visualisation configuration settings, create images and the configuration file, and host it on your servers.

To do so, use the imageconfig setting to point at your JavaScript file.

1. Create a directory on your webserver.

2. Prepare the images to customise the visualisation.

• Ground conditions: For the image types that use the variable [GROUND_CONDITION], prepare images for normal, frost and snow conditions, and in all sizes. Note: GROUND_CONDITION is not available for 'pitch_2d', 'banner' or 'stadium' image types.
• Weather: For the 'stadium' image type, which uses the variable [WEATHER], prepare images for normal, rain and snow conditions, and in all sizes. Note: WEATHER is not available for other image types.
• Image filename: For supported images, the ground condition/weather name is the prefix of the filename, eg 'frost-small.jpg'.
• Customise the default images: download and modify them for your needs; URLs for the default images are provided below.

Banner (3D, premium)

 

You can find the default image at the following URL:

http://widget.cloud.opta.net/v3/assets/visualisation/football/premium/[SIZE]/opta_hoarding.png

If you change the variable SIZE value (narrow|normal|wide) you can download an image file in an appropriate size.
For example, if you want to get a banner on normal size, the URL will be:

http://widget.cloud.opta.net/v3/assets/visualisation/football/premium/normal/opta_hoarding.png

 

Flat Pitch (2D)

 

You can find the default image at the following URL:

http://widget.cloud.opta.net/v3/assets/visualisation/football/standard/[SIZE]/pitch_2d.jpg

If you change the variable SIZE value (narrow|normal|wide) you can download an image file in an appropriate size.

Flat pitch is available only in normal ground condition, so do not use variable GROUND_CONDITION.

For example, if you want to get a pitch at the normal size (and with the normal ground condition), the URL will be:

http://widget.cloud.opta.net/v3/assets/visualisation/football/standard/normal/pitch_2d.jpg

 

Premium Pitch (3D)

 

You can find the default image at the following URL:

http://widget.cloud.opta.net/v3/assets/visualisation/football/premium/[SIZE]/[GROUND_CONDITION]_pitch.png

If you change the variable SIZE value (narrow|normal|wide) you can download an image file in an appropriate size.

If you change the variable GROUND_CONDITION value (normal|frost|snow) you can download a pitch image in the appropriate ground condition.

For example, if you want to get a pitch at the normal size and with the normal ground condition, the URL will be:

http://widget.cloud.opta.net/v3/assets/visualisation/football/premium/normal/normal_pitch.png

 

---

Goal View (premium)

 

You can find the default image at the following URL:

http://widget.cloud.opta.net/v3/assets/visualisation/football/premium/[SIZE]/Goal/Ball_position/[GROUND_CONDITION]_goal_view.jpg

If you change the variable SIZE value (narrow|normal|wide) you can download an image file in an appropriate size.

If you change the variable GROUND_CONDITION value (normal|frost|snow) you can download a goal view image in the appropriate ground condition. For example, if you want to get a goal view at the normal size and with the normal ground condition, the URL will be:

http://widget.cloud.opta.net/v3/assets/visualisation/football/premium/normal/Goal/Ball_position/normal_goal_view.png

 

Stadium (premium)

 

You can find the default image at the following URL:

http://widget.cloud.opta.net/v3/assets/visualisation/football/premium/[SIZE]/[WEATHER]_background.jpg

If you change the variable SIZE value (narrow|normal|wide) you can download an image file in an appropriate size.

If you change the variable WEATHER value (normal|rain|snow) you can download a stadium image with suitable weather.

For example, if you want to get a stadium at the normal size and with the normal weather, the URL will be:

http://widget.cloud.opta.net/v3/assets/visualisation/football/premium/normal/normal_background.jpg

 

3. Create directories for parameters: banner | pitch2d | pitch | goal | stadium

4. Create directories for the SIZE variable for all parameters: narrow | normal | wide

5. Move the images to the appropriate directories, for the parameters under the parent imageconfig directory.

 

6. Create a JavaScript file named imageconfig.js which contains the following code:

opta_customer_config({
  'football': {
    'image': {
      'premium_banner': 'http://{webserver}/{directory}/banner/[SIZE]/banner.png',
      'premium_pitch': 'http://{webserver}/{directory}/pitch/[SIZE]/[GROUND_CONDITION]_pitch.png',
      'premium_goal': 'http://{webserver}/{directory}/goal/[SIZE]/[GROUND_CONDITION]_goal.jpg'
      'flat_pitch': 'http://{webserver}/{directory}/pitch2d/[SIZE]/pitch.jpg',
      'premium_background': 'http://{webserver}/{directory}/stadium/[SIZE]/[GROUND_CONDITION]_background.jpg'
    }
  }
});

You must reference files using a full directory path/URI - not a relative URI.

7. Complete the values needed to customise images:

premium_banner	URL with path to directories containing the banner images. The path contains the variable [SIZE]. This means that the directory banner should contain three directories: normal | narrow | wide - each containing a banner image.
premium_pitch	URL with path to directories containing the 3D pitch images. The path contains the variable [SIZE]. This means that the directory pitch should contain three directories: normal | narrow | wide - each containing a 3D pitch image. The name of each image could contain variable [GROUND_CONDITION]. This means that all directories under pitch should contain three images and the names should start with normal | frost | snow.
premium_goal	URL with path to directories containing the goal view images. The path contains the variable [SIZE]. This means that the directory 'goal' should contain three directories: 'normal | 'narrow' | 'wide' - each containing a goal view image. The name of each image could contain variable [GROUND_CONDITION]. This means that all directories under goal should contain three images and the names should start with normal | frost | snow.
flat_pitch	URL with path to directories containing the 2D pitch images. The path contains the variable [SIZE]. This means that the directory 'pitch2d' should contain three directories: 'normal | 'narrow' | 'wide' - each containing a 2D pitch image. Note: The flat pitch image is only available in 'normal' condition, with no variants for different weather/ground conditions. This means that all of the directories under pitch2d should contain one image (named pitch).
premium_background	URL with path to directories containing the stadium images. The path contains the variable [SIZE]. This means that the directory 'stadium' should contain three directories: 'normal | 'narrow' | 'wide' - each containing a stadium image. The name of each image could contain variable [WEATHER]. This means that all directories under stadium should contain three images and the names should start with normal | rain | snow.

8. Complete the URL address to customise images (set the webserver and directory to images).

9. Load the Content Scoreboard with the parameter imageconfig with the URL pointing to the customised imageconfig.js file.
 

Watch&Bet 2.0: You will load this in the <script> tag. For example:

<script src="https://player.performgroup.com/csb.js" data-outletkey="{outlet-key}" data-uuid="{mflFixtureUuid}" data-apptype="csb" data-env="betting" data-widgetvis="true" data-vis3d="true" data-version="latest" data-autoplay="true" data-imageconfig=http://{webserver}/{directory-to-link-to-csb}/imageconfig.js></script>

Legacy method: You can load this in the legacy iframe URL. For example:

http://{link-to-csb}?imageconfig=http://{webserver}/{directory}/imageconfig.js

 

RunningBall (RB) data visualisation customers must also include the parameter widgetVis=true in the URL to load the CSB to ensure customised images are loaded - if this parameter-value pair is missing, only the standard images will load. The widgetVis parameter is not required for Opta Premium Visualisation customers.

You must reference files using a full URI - not a relative URI.

 

2. CSS customisation

You can customise the styling of the product via CSS diff, including fonts, colours and pop-up notifications. Before you start, you need to be aware of the classes - these are explained here:

http://widget.cloud.opta.net/helper/v3/docs/#!/manual/widget-stylesheets-class-names

http://widget.cloud.opta.net/helper/v3/docs/#!/manual/widget-stylesheets

1. Decide what you want to change. For example, the font-face/colour/size of a heading.
2. Inspect the Widget code to find the element/s (and their CSS) that you want to change. Use the tools in your web browser to inspect the code, such as Developer Tools in Google Chrome (right-click > Inspect) or Firefox (Firebug, or right-click > Inspect Element).
3. Add your customised classes to the CSS file to overwrite the default CSS.

All CSS class names in widgets start with an "Opta" prefix and this reduces the risk of clashes with the parent page. The wrapper class holds the "Opta" class and class names which relate to the widget's width, for example Opta-Narrow, Opta-Normal, and Opta-Wide.

The widget ID is also applied at this point. When overwriting the Opta CSS, keep with class names rather than a widget's ID as this can change.

Example
In this example, we will customise the following classes:

• Opta-EventDetails (not shown below)
• Opta-EventHeader (not shown below)
• Opta-Overlay h3 (see "Full time" heading)
• Opta-Stats-Bars or Opta-Stats-Bars-Text (see text above horizontal stats bars, eg "Goals" and "Possession")
• Opta-Outer (see numbers to left/right of stats/event bars, eg "2", "0", "45.4%")

Original CSS
.Opta .Opta-EventAnimations .Opta-GoalBanners .Opta-EventDetails { height: 64px; width: 320px; font-size: 54px; } .Opta .Opta-EventAnimations .Opta-EventText .Opta-EventDetails { display: flex; width: 360px; overflow: hidden; color: #fff; flex-direction: column; justify-content: center; } .Opta-Overlay h3 { background-color: #0D5F78; color: #FFF; text-align: center; font-size: 14px; border-bottom: none; padding: 0 10px; white-space: nowrap; } .Opta-Overlay>h3 { color: #fff; } .Opta .Opta-EventAnimations.Opta-EventAnimations-Lite .Opta-EventBanners .Opta-EventBanner .Opta-EventText .Opta-EventHeader span { text-transform: uppercase; font-size: 22px; font-weight: 700; } .Opta .Opta_F_LA .Opta-Overlay .Opta .Opta-Stats-Bars td, .Opta .Opta_F_LA .Opta-Overlay .Opta .Opta-Stats-Bars th { padding-top: 0; padding-bottom: 0; height: auto; font-size: 11px; } .Opta .Opta_F_LA .Opta-Overlay .Opta .Opta-Stats-Bars tbody th, .Opta .Opta_F_LA .Opta-Overlay .Opta .Opta-Stats-Bars td.Opta-Outer { color: #fff; }
Customised CSS Using the below example will apply the following styles to the Content Scoreboard interface. You must include the !important declaration shown in the following example.
.Opta .Opta-EventDetails { color: blue !important; font-size: small !important; } .Opta-EventHeader span { color: pink !important; font-size: 26px !important; } .Opta-Overlay>h3 { color: green !important; font-size: 26px !important; } th.Opta-Stats-Bars, th.Opta-Stats-Bars-Text { color: red !important; font-size: 16px !important; font-weight: bold !important; } td.Opta-Outer { color: blueviolet !important; font-size: 16px !important; }

<script src="https://player.performgroup.com/csb.js" data-outletkey="{outlet-key}" data-uuid="{mflFixtureUuid}" data-apptype="csb" data-env="betting" data-widgetvis="true" data-vis3d="true" data-version="latest" data-autoplay="true" data-imageconfig="http://{webserver}/{directory-to-link-to-csb}/imageconfig.js"></script>

http://{link-to-csb}?imageconfig=http://{webserver}/{directory}/imageconfig.js&{otherParameters}

<script src="https://player.performgroup.com/csb.js" data-outletkey="{outlet-key}" data-uuid="{mflFixtureUuid}" data-apptype="csb" data-env="betting" data-widgetvis="true" data-vis3d="true" data-version="latest" data-autoplay="true" data-imageconfig="http://{webserver}/{directory-to-link-to-csb}/imageconfig.js" data-cssdiff="{filepathToCustomisedFiles}"></script>

http://{link-to-csb}?cssdiff={filepathToCustomisedFiles}&imageconfig=http://{webserver}/{directory}/imageconfig.js&{otherParameters}

<script src="https://player.performgroup.com/csb.js" data-outletkey="{outlet-key}" data-uuid="{mflFixtureUuid}" data-apptype="csb" data-env="betting" data-widgetvis="true" data-vis3d="true" data-version="latest" data-autoplay="true" data-imageconfig="http://{webserver}/{directory-to-link-to-csb}/imageconfig.js" data-csspath="{filepathToCustomisedFiles}"></script>

http://{link-to-csb}?csspath={filepathToCustomisedFiles}&imageconfig=http://{webserver}/{directory}/imageconfig.js&{otherParameters}