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 Gradient

background: 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.

- You can customize color codes and numbers as you wish, except for the parts in Text.
- 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.



@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Hand:wght@400..700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Platypi:ital,wght@0,300..800;1,300..800&display=swap');

* { 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;

}