Hello, this is the CameraFi Studio team.
We are providing instructions on how to apply custom CSS to the Soccer Lineup 1 widget.
Soccer Lineup 1 Widget - Customizable Areas
#team-background: Team logo background area
#team-name: Team name area
#team-logo: Team logo area
#player-list-background: Player list background area
#main-player-text: Starting player text area
#sub-player-text: Substitute player text area
#player-background: Player name background area
#player-number: Player number area
#player-name: Player name area
#player-position: Player position 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 ratio applied based on a maximum value of 100.
You can customize color codes and numbers as you wish, except for the parts in English.
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.
.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{}")
Soccer Lineup 1 Customization Example
Applying only to the lineup area, changing margins, hiding substitute players, resizing team name and logo, rounding player numbers
#team-background {
background: #000000;
margin: 1vw 55vw 1vw 1vw;
border-radius: 1vw;
background-size: cover;
}
#team-name {
color: #FFFFFF;
font-size: 2.7vw;
font-weight: 800;
border-bottom-width: 0.2vw;
}
#team-logo {
width: 14vw;
}
#player-list-background {
background: #003780;
margin: 1vw;
border-radius: 1vw;
}
#sub-player-list {
display: none;
}
#main-player-list {
width: 70%;
padding: 3vw;
margin: 0;
}
#player-number {
border-radius: 0.5vw;
font-weight: 900;
}
}
Customization Example 2
Applying only to the lineup area, hiding team logo and substitute players, rounding player numbers
#team-background {
opacity: 0;
}
#player-list-background {
background: #03780;
margin: 1vw;
border-radius: 1vw;
}
#sub-player-list {
display: none;
}
#main-player-list {
width: 70%;
padding: 3vw;
margin: 0;
}
#player-number {
border-radius: 0.5vw;
}
}
Customization Example 3
Changing margins for team logo background and player list area, resizing team name and logo, rounding player numbers
#team-background {
background: #333;
margin: 1vw 0vw 1vw 1vw;
border-radius: 1vw;
}
#team-name {
color: #FFFFFF;
font-size: 2.7vw;
font-weight: 800;
border-bottom-width: 0.2vw;
}
#team-logo {
width: 14vw;
padding: 2.5vw;
}
#player-list-background {
width: 100%;
background: #333;
margin: 1vw;
border-radius: 1vw;
}
#player-number {
border-radius: 0.5vw;
}
}
Customization Example 4
Changing to vertical format, resizing team logo background area, hiding substitute players, resizing team name and logo, rounding player numbers
#widget {
display: flex;
flex-direction: column;
margin: 0.7vw;
}
#team-background {
background: #333;
border-radius: 1vw;
min-height: 12.5vw;
width: 20vw;
margin-bottom: 0.7vw;
}
#team-name {
margin: 1vw 1vw 0;
color: #FFFFFF;
font-size: 2vw;
font-weight: 800;
border-bottom-width: 0vw;
padding-bottom: 0.7vw;
}
#team-logo {
width: 6vw;
padding: 0.2vw;
}
#player-list-background {
flex-direction: column;
background: #333;
border-radius: 1vw;
width: 20vw;
flex: 1;
}
#main-player-list {
margin: 0;
padding: 1vw 1.5vw;
width: 100%;
}
#sub-player-list {
display: none;
}
#main-player-text {
font-weight: 800;
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0.5vw;
}
#player-number {
border-radius: 0.5vw;
font-weight: 900;
}
For versions 1 to 4, if you want to use the format, it is recommended to only change colors and font sizes.
