Flexyscore

Masterclass

Flexyscore menu screenshot

Power of CSS makes you free

Flexyscore's scoreboards are "simple" html pages that can be modified in their appearance through style sheets (CSS). This way any web developer, graphic designer or anyone who knows even just the basics of this language can easily customize them in all their parts.

We have developed scoreboards in the simplest way possible in order to give anyone the possibility to make their own changes in a simple and direct way. Colors / Characters / Aspect ratio / Dimensions / Backgrounds / Element position are all configurable.

How to Plug In your own CSS

OBS webview properties

Every broadcasting software that integrates the WebView functionality allows you to insert your own CSS. On the right, the example of OBS. This panel is accessible from the source properties.

By writing your CSS in the properties the default styles will be overwritten changing the appearance of the Scoreboard.

Once the scoreboard has been modified, your software will save all settings (including styles), so you can reuse them in the next match.

However, you can manually save the CSS on your server and call it with the function @import url('https://www.yoursite.com/mystyle.css')

HTML Scoreboards Schema

To help you we have published the code of all the templates on Codepen, giving some examples of custom CSS. You can use these examples to edit styles, save them, and use them in your broadcasting software.

If you are unfamiliar with CSS we recommend the great guides of w3schools.com.

Soccer / Hockey / Rugby

This is the default Flexyscore template

Soccer, Hockey and Rugby default scoreboard

Below you can see an example of how this can be edited with CSS

Basketball scoreboard

This is the default Flexyscore template

Basketball default scoreboard

Below you can see an example of how this can be edited with CSS

Volleyball & Table Tennis

This is the default Flexyscore template

Volleyball and tabletennis default scoreboard

Below you can see an example of how this can be edited with CSS

Football scoreboard

This is the default Flexyscore template

Football default scoreboard

Below you can see an example of how this can be edited with CSS

Tennis scoreboard

This is the default Flexyscore template

Tennis default scoreboard

Below you can see an example of how this can be edited with CSS

Baseball scoreboard

This is the default Flexyscore template

Baseball default scoreboard

Below you can see an example of how this can be edited with CSS

Privacy policy