Hi, this is the CameraFi STUDIO team!


This is the Soccer, Billiard, Tennis 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



⚽ Soccer ⚽️
​

#score: Share each teams score field on soccer widget

#period: Period of Match field (1ST, 2ND, EXTRA 1 …)

#add-timer: Extra time field

#penalties: Penalty shootout field

​

📌 This is example of soccer widget 2 custom CSS code.


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

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

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

#score{background:rebeccapurple; color: ghostwhite;}

#timer{background: honeydew; color:forestgreen;}

#home{background: lightcyan; color:darkblue;}

#away{background: lavenderblush; color: maroon;}

#add-timer{background: forestgreen; color: honeydew;}

#period{background:lightgray; color: black;}


📌  This is example of soccer penalty shootout widget 1 custom CSS code.

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

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

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

#score{background:rebeccapurple; color: ghostwhite;}

#home{background: lightcyan; color:darkblue;}

#away{background: lavenderblush; color: maroon;}

#penalties{background:lightslategray; color: black;}



🎱 Billiard 🎱


#home-ball, #away-ball: Billiard ball background field

#home-ball .ball: Billiard ball field

#bottom: Bottom inning / set display field

📌  This is example of billiard  widget  custom CSS code.

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


*{font-family: 'Dancing Script', cursive;}


#title{background:dimgray; color: ghostwhite;}


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

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


#home-ball{background:mistyrose; }

#home-ball .ball{background:tomato;}


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

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


#away-ball{background:aliceblue; }

#away-ball .ball{background:dodgerblue;}


#bottom{background:gainsboro; color: black;}



🎾 Tennis 🎾

#home-set-score, #away-set-score: Home, Away game score field

#serve-arrow: Serve display field

📌  This is example of tennis widget 1 custom CSS code.


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

*{font-family: 'Shadows Into Light', cursive;}


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


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

#home-set-score{background:springgreen ; color:black;}


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

#away-set-score{background:Aqua; color:black;}


#serve-arrow{background:orangered;}



[Widget 2]

#home-game-score, #away-game-score: Home, Away game score field

#left-box: Left blank field



📌  This is example of tennis widget 2 custom CSS code.



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

*{font-family: 'Shadows Into Light', cursive;}


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


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

#home-set-score{background:springgreen ; color:black;}

#home-game-score{background:palegreen; color: black;}


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

#away-set-score{background:Aqua; color:black;}

#away-game-score{background:powderblue; color: black;}


#serve-arrow{background:orangered;}


#left-box{background:silver;}=