Hi, this is the CameraFi STUDIO team!


This is the Basketball, Football Custom CSS user guide.


How can I use CSS Editor basics? Refer to Custom CSS user guide.

https://blog.camerafi.com/2023/09/camerafi-studio-custom-css-user-guide.html

You can copy & paste to the color you want, refer to the color table.

https://blog.camerafi.com/2023/08/camerafi-studio-custom-css-color-table.html



🏀 Basketball 🏀


#home-foul, #away-foul: Foul field

#quarter: Quarter field


#timer: Share timer and quarter field on widget 3 


[Widget 1, 4]

#attack-timer: Attack time timer


[Widget 2]

HOME and AWAY team color can be changed on [Color]



[Widget 3, 4]

#home-foul-stick, #away-foul-stick: Foul stick mark field



📌 This is example of basketball widget 3 custom CSS code.

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200&display=swap');

*{font-family: 'Kanit', sans-serif;}



#title{background:lightsteelblue;color:black;}

#timer{background:lightsteelblue;color:black;}

#quarter{background:ivory;color:black;}


#home{background: khaki; color:black;}

#home-score{background: gold; color:black;}


#away{background: lightgreen; color:black;}

#away-score{background:mediumseagreen; color:black;}


#home-foul{background: black; color:white;}

#home-foul-stick{background: red;}


#away-foul{background: black; color:white;}

#away-foul-stick{background: red;}



[Widget 5]



📌 This is example of basketball widget 5 custom CSS code.

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200&display=swap');

*{font-family: 'Kanit', sans-serif;}


#scoreboard{background:black; color:cornflowerblue}


.text{color:skyblue;}




🏈 Football 🏈


#home-timeout, #away-timeout: Home and Away timeout field

#quarter: Quarter field

#possession: A team that currently owns the ball

#down-yard: Down and yard field


📌 This is example of football widget custom CSS code.

@import url('https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap');

*{font-family: 'Tilt Neon', sans-serif;}


#title{background:silver; color: black;}

#quarter{background: darkgreen; color: white;}

#timer{background: darkgreen; color: white;}


#home{background: midnightblue; color: white;}

#home-score{background: royalblue; color: white;}


#away{background: orangered; color: white;}

#away-score{background:indianred; color: white;}


#home-timeout{background:white;}

#away-timeout{background:black;}


#possession{background: greenyellow;}


#down-yard{background: darkcyan; color: white;}