It is possible to customize the appearance of scoreboards, using custom CSS for your event.


About CSS

At the moment customization of the styles requires some CSS knowledge. If you have no that knowledge yet, here are a few things you can do:

  • CSS is the styles customization technology that is used all across the web, for every website. If you would like to know more about it you may check tons of tutorials and courses on the internet, here is an example
  • We will follow the examples below, it might happen you can achieve what you need by simply following them and adjusting some values.
  • We can provide some help through support requests, also anyone with basic website development knowledge should be able to provide help


We recommend installing Magic CSS plugin to your Chrome browser. This plugin will help to quickly adjust styles and test your CSS. After preparing and testing CSS with the plugin you can save it to the system.


1. Set up your styles


Open the scoreboard and adjust it with magic CSS. Here is an example:

Standard athlete introduction screen.

Copy and paste the following CSS to Magic CSS:

.logo img {
  display: none
}
.diff {
    display: none;
}
.title-block {
  margin:0 37% 0 56%;
  width:50%; 
}

.athletes-intro-box.big .representing-box .flag {
    height: 70px;
    width:110px ;
    position: absolute;
    top: 30px; 
    left: 30px; 
}
.representing {
    font-size: 40px;
    position: absolute;
    top: 36px;
    left: 150px
}

.scoreboard-block .screen.frame .frame-block.frame-intro .athletes>li h1 .country-small {
    max-height: 60px;
    align-content: center;
}

.athlete-surname {
    font-size: 35px
}

.frame-header .routine {
    font-size: 18px
}
.frame-header .stage-kind {
     font-size: 12px
}
.frame-header .competition-discipline {
         font-size: 18px
}
.frame-header .competition-title {
         font-size: 20px
}

body > main {
    background: rgb(237,47,255);     
}
.scoreboard-block.inverted {
    background: rgb(237,47,255); 
}
.scoreboard-block .screen.frame {
    height: 170px;
}

.screen {
    width: 100%;
    height: 100%;
    background-color: rgb(21,28,85); 
    border-radius: 20px;
    padding: 5px;
    overflow-y: hidden;
}
.screen.blank {
    background-color: rgb(237,47,255);
}

Updated introduction view:


This design might fit better as a web streaming overlay:




2. Copy the styles from Magic CSS to the custom styles field


Open styles, go to event settings, and paste the styles to the custom styles field: