OBS and Streamlabs OBS allow adding custom CSS in Browser Source setting and thanks to this feature you can add some special feeling or design touch to your BPM widget. Today we share ideas on how to change your BPM widget to make it look great with your The Last of Us Part II stream.
1. Add your BPM widget to your OBS
Set up basic color and ranges(we use only one range for the widget for example) and copy widget unique URL in widget settings.
In your OBS or Streamlabs OBS click '+' in Sources list and choose Browser.
Add widget URL in settings
2. Add custom CSS
Custom CSS can be applied on top of webpage styles so we can actually add or own styling.
We created two styles for you to use.
- Thin white shadow.
#heartRate {
text-shadow: 0 0 40px white;
}
Copy the snippet and paste it into the Custom CSS field in the Source settings.
#heartRate selector is fixed and defines the Pulsoid page element that should be changed. This code will work with the BPM widget and will affect BPM numbers.
'white' is the color of the shadow and you can change it to something different.
- Animated glow with numbers changing opacity.
#heartRate {
-webkit-animation: glow 2s ease-in-out infinite alternate;
-moz-animation: glow 2s ease-in-out infinite alternate;
animation: glow 2s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff; 0 0 30px #fff;
opacity: 0.4;
}
to {
text-shadow: 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #fff; 0 0 60px #fff;
opacity: 0.6;
}
}This one has more parameters you can play with and it means you can create more special styling for your stream. Please, share with us all your great designs and ideas.
Share clip from the stream on Twitter with #myOwnHeartRateWidget and mention @pulsoid_app
