Functional
The behavior in some elements can be changed or turned off completely, those options are the following:
Name | Applies to | Default behavior | Description |
|---|---|---|---|
Tabs | Navigation controls (tabs in the bottom) | All tabs are shown by default. | Controls main navigation in the GameTracker, user is able to move between different tabs in order to see specific content. A subset of tabs could be defined in order to hide certain options. The following tabs are available:
|
Team icon/logo | Scoreboard | Each team has a customized helmet based on brand colors and name abbreviation. | Whether or not to hide team icon/logo. |
Styling
Theme options
The Game Tracker’s appearance can be customized by changing values in the Material UI theme. By default it looks like this:
...
But we can change several aspects such as the following:
Name | Applies to | Default value | Description |
|---|---|---|---|
primaryColor.main | Possession indicator, Tab highlight, buttons |
| Color used to highlight elements, is implemented in backgrounds, icons and some decorative elements |
primaryColor.contrastText | Buttons |
| Text color to be used when background is set to primary color |
background.default | Game Tracker background |
| Background color for the Game Tracker |
background.paper | Cards, scores |
| Background color for contained elements such as cards and scores within the scoreboard |
text.primary | Most elements |
| Text color used by default in most elements |
typography.fontFamily | Most elements |
| Font to be used in the Game Tracker |
For example, by using this options a Game Tracker can be styled to be used in Fanduel’s website and look like this:
...
Advanced customization
We are able to do more specific customization upon request through advanced themes powered by CSS overrides, it could include changes such different font size for a particular element, icon size, spacing changes and more.
...
By applying that theme, the scoreboard would start looking like this:
...
Since these type of overrides are tightly coupled to the Game Tracker’s implementation the advanced themes will need to be manually created by developers based on designs approved/created by the UX team.