Hello, this is the CameraFi Studio team.
This is the guide on how to apply custom CSS to the Baseball Lineup 1 widget.
Baseball Lineup Widget 1 - Applicable Areas
#widget: Entire widget area
#team-name: Team name area
#team-logo: Team logo area
#lineup-text: "LINE UP" text area
#player-list: Batting order number area
#player-number: Batting order background area
#player-name: Player name area
#player-position: Player position area
Detailed Customization
You can apply various customizations such as gradients, text adjustments, hiding elements, rounding areas, etc.
1. Background Gradientbackground: linear-gradient(
/top color #ed6518 /opacity 0%,
/bottom color #353e48 /opacity 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;
- Note: "vh" is a ratio applied based on a maximum value of 100.
- 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.
.LINEUP {
/* Custom code { enter your CSS here; Refer to Customization Example 2 for application;}
}
(For scoreboard-only application, use ".SCOREBOARD{}", for match info-only application, use ".MATCH-INFO{}")
Customization Example 1
#widget {
background: linear-gradient(#FF669E 0%, #000000 40%);
}
#lineup-text {
font-weight: 900;
font-size: 3vh;
letter-spacing: 0.3vh;
}
#player-number {
border-radius: 100vh;
background: #FF669E;
}
#player-name {
border-radius: 1vh;
background: white;
color: #000000;
}
#player-position {
border-radius: 1vh;
display: none;
}
Customization Example 2
Applying font to the entire area, hiding positions, and setting batting order colors.
* { font-family: "Platypi", serif; }
#widget {
background: linear-gradient(#FF669E 0%, #000000 40%);
}
#lineup-text {
font-weight: 900;
font-size: 3vh;
letter-spacing: 0.3vh;
}
#player-number {
border-radius: 100vh;
background: #FF669E;
}
#player-name {
border-radius: 1vh;
background: white;
color: #000000;
}
#player-position {
border-radius: 1vh;
display: none;
}
#player-list {
color: black;
}