Creating Cyberpunk themed overlay from Stromno widget

With a Stromno app you can broadcast heart rate data from Apple Watch and share it through the Internet as a unique page. You can use it an overlay in your stream, share with your doctor, trainer, or friends. Create your account here.

In the Stromno Dashboard you can choose a heart and a BPM style and preview your widget. Copy URL and insert it into OBS as a Browser source.

Heart and BPM elements in the Stromno widget have unique IDs to change widget design with a custom CSS in OBS.

Here is an CSS code that will change BPM colour and font, make heart brighter, and will add blue shadow to both heart and BPM.

#widget-bpm {
color: #eeee34;
font-family: "Blender Pro" !important;
text-shadow: 1px 1px 10px #26d8f1;
}
#widget-image {
filter: brightness(3.5);
filter: drop-shadow(3px 3px 5px #26d8f1);
}

Selector #widget-bpm applies changes to the BPM part of widget. Color is assigned to #eeee34 (yellow), font-family is assigned to Blender Pro (Note, you need to have it installed on your PC), text-shadow adds a blue shadow.

Selector #widget-image applies changes to the heart element. I used Stromno logo heart and added 2 filters: brightness to make it more light yellow, and drop-shadow adds a blue shadow.

I used these colors: #eeee34 (yellow), #26d8f1(blue). Cyberpunk game also has a few other colors, one of them #c56e5d (red). You can choose other color hex codes.

Share your widget ideas in Twitter or Discord. Follow us for updates 💛

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store