How to style BPM widget for The Last of Us Part II stream


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 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 fro your stream. Please, share with us all you great design and ideas.

3. Spoiler and free BRO plan:


New Advanced BPM widget is coming and we are looking for great style ideas. So to get a Free 3 month of BRO plan: - create your own custom CSS for BPM widget or use our styles from the article.

- use it on your stream.

- share clip from the stream on Twitter with #myOwnHeartRateWidget and mention @plsoid



124 views
Recent Posts

©2019 Pulsoid blog