.png)
If you write custom CSS code, you can freely change the style of each part of the widget.
* It can enable all sports type except cricket and golf.
How can I use CSS Editor basics?
You can use ③ [Custom CSS Editor] in ② [Theme] of ① [Widget].
Selector
Selectors are part of the CSS rule set.
CSS selectors select elements according to its id, class.
id selector → Use [ # ]
class selector → Use [ . ]
*All most of selector use [ # ].
#title: Sports title field
#home / #away: home, away team field
#home-score / #away-score: home, away team score field
#timer: timer field
Color
Change background: background
Change words color: color
If you want to apply all fields of words color.
*{color: ‘color chip’;}
You can copy & paste to the color you want, refer to the color table.
📌 This is example of Sports title custom CSS code
#title {
background : navy;
color: white;
}
Font
Font can be applied to the Word field of the widget.
If you want to change fonts, you can use google font, like the free font site.
There may be instances where you need to adjust the size based on the font size.
For fonts that do not support certain languages, they may not be applied.
Click the View selected family icon above the right side.
Check ① @import on Use on the Web.
② Copy code and paste to CSS Editor at the top except <style>, <style>
If you want to apply all fields of font.
③ Copy and Paste Part of *{CSS rules to specify families} code.
If you want to apply each selector of font.
③ Copy and Paste Part of #{CSS rules to specify families} code.
📌 This is example of applying font to all field.
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&display=swap');
#away {font-family: 'Josefin Sans', sans-serif;}
