Hello, this is the CameraFi Studio team.

We are providing instructions on how to apply custom CSS to the Match Info widget.

Match Info Widget 1 - Customizable Areas

#title-outer: Area outside the match title

#title-inner: Area inside the match title

#title: Match title


#away: Away team background area

#away-team-logo: Away team logo area

#away-team-name: Away team name area


#home: Home team background area

#home-team-logo: Home team logo area

#home-team-name: Home team name area


Detailed Customization

You can apply various customizations such as gradients, height, width, text adjustments, hiding elements, rounding areas, etc.

1. Background Gradient
background: linear-gradient(

/top color #ed6518 gradient range 0%,

/bottom color #353e48 gradient range 40%)


2. Text Spacing
/font weight font-weight: 900;

/font size font-size: 3vh;

/letter spacing letter-spacing: 0.3vh;


3. Hiding Elements
display: none;


4. Rounding Areas
border-radius: 1vh;


5. Area Size
height: 7vw;

border: 0vw;

  • Note: "vh" is a height ratio applied based on a maximum value of 100, “vw” is a width ratio applied based in a maximum value of 100.

  • You can customize color codes and numbers as you wish, except for the parts in English.

  • It is recommended to use the border and height of #title-inner without modifications.

  • For #title-outer, you should specify the color in border-top-color instead of background.


Handling Overlapping Areas

If there are overlapping areas with the scoreboard's ID values and you want to apply customizations differently, you need to wrap all the lineup custom CSS with the lineup class below.

.MATCH-INFO {

  /* Custom code { enter your CSS here; 

  Refer to Customization Example 2 for application;} 

}


(For scoreboard-only application, use ".SCOREBOARD{}", for lineup-only application, use ".LINEUP{}")


Match Info 1 Customization Example

Applying only to the match info area, customizing the match title area, team logo size, and team background colors.


.MATCH_INFO {

  #title {

    color: black;

  }


  #title-inner {

    border: 0vw;

    background: snow;

    height: 7vw;

    border-radius: 1vw;

  }


  .shadow {

    display: none;

  }


  #title-outer {

    border-top-color: transparent;

  }


  #home {

    background: linear-gradient(#FF669E 0%, #000000 80%);

    border-top-right-radius: 2vw;

    border-bottom-right-radius: 2vw;

  }


  #away {

    background: grey;

    border-top-left-radius: 2vw;

    border-bottom-left-radius: 2vw;

  }


  #away-team-logo {

    width: 20vw;

    z-index: 1;

  }


  #home-team-logo {

    width: 20vw;

    z-index: 1;

  }

}



Match Info Widget 2 - Customizable Areas

#title-background: Area outside the match title

#title: Match title

#match-background: Background area of the match widget

#away-team-logo: Away team logo area

#away-team-name: Away team name area

#home-team-logo: Home team logo area

#home-team-name: Home team name area


Match Info 2 Customization Example

Applying only to the match info area, customizing the match title background area, match info background area, and team logo size.

#title {

  color: white;

}


#title-background {

  background: #333;

}


#match-background {

  background: #333;

}


#away-team-logo {

  width: 30vw;

}