Hello, this is the CameraFi team! 😊

We will guide you on how to apply custom CSS to the baseball scoreboard widget. 


Customizable Areas of the Baseball Scoreboard Widget

#away: Away team area

#home: Home team area

#defense-lineup: Defense lineup area

Detailed Customization
You can change fonts, set team areas, configure defense lineups, and adjust font sizes for game names and player names.


  1. Changing Fonts
    Apply your desired font to all elements.

@font-face { font-family: 'KBO-Dia-Gothic_bold'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/KBO-Dia-Gothic_bold.woff') format('woff'); font-weight: 700; font-style: normal; } * { font-family: KBO-Dia-Gothic_bold; }

  1. Setting Away and Home Teams
    You can change the background color and text color.

#away { /* Background color */ background: blue; } #home { /* Background color */ background: yellow; /* Text color */ color: black; }

  1. Configuring Defense Lineup
    You can change the text size. *    vw refers to the ratio based on the maximum screen size. *Example: 100vw fills the screen, 50vw fills half of the screen. *The default font size for the defense lineup is 1vw. *You can also use px units. * Example: font-size: 12px;

#defense-lineup { /* Font size */ font-size: 1.3vw; }

  1. Setting Game Name Font Size
    You can adjust this through the widget page - theme tab - game name font size adjustment button.

    Game Name Font Size Setting

  2. Setting Player Name Font Size You can adjust this through the widget page - theme tab - player name font size adjustment button. * Only the font size of the player's name can be adjusted. The size of the batting order and position is fixed.

    Player List Font Size Setting

Custom CSS Example for Baseball Scoreboard Widget
Applying fonts, team areas, and adjusting player name sizes.

* The central image is an example image. Image source: https://www.flickr.com/photos/kenlund/51128666409/


Applied Custom CSS

@font-face {
    font-family: 'KBO-Dia-Gothic_bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/KBO-Dia-Gothic_bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

  • {
  font-family: KBO-Dia-Gothic_bold;
}

#away {
  background: #C73200;
}

#home {
  background: #9CABFC;
}

#defense-lineup {
  font-size: 0.9vw;
  color: #F2F2F2;
}