StreamPopups
Description
Collection of HTML, CSS, Bootstrap, JQuery/Javascript for use of displaying custom popups through streaming software with "Browser Source" capabilities.
The following content assumes that you may not have knowledge of web development. That is why I'm providing links to resources to help. I even created a video to go through the following items.
Tutorial Video: https://youtu.be/_SM66rUIT5o
Personalizing/Customizing
If you would like to customize the popup overlays with different designs, then I suggest that you should have some knowledge of HTML, CSS, Javascript/JQuery. However, this is completely optional. I do suggest that you at least watch my video to see the key points of editing.
HTML Tutorial: https://www.w3schools.com/html/ CSS Tutorial: https://www.w3schools.com/html/html_css.asp Javascript Tutorial: https://www.w3schools.com/html/html_scripts.asp Bootstrap Grid System: http://getbootstrap.com/css/#grid Bootstrap Glyphicons: http://getbootstrap.com/components/#glyphicons Font Squirrel: https://www.fontsquirrel.com Google Fonts: https://fonts.google.com/ 0to255: http://www.0to255.com/
Within the code, there is a place defined as animation style. To find the animation style that you like, visit JQueryUI (https://jqueryui.com/effect/) to test the different animations. Just replace "fade" or "fold" with your choice of animation.
Editor
It would be very helpful to use a nice editor to edit and test your popup overlays. You could use Notepad, but it's not very great for editing .html or .css files. Here are some suggestions:
Notepad++ https://notepad-plus-plus.org/ Komodo Edit https://www.activestate.com/komodo-edit Brackets http://brackets.io/ - I personally like this one. I explain why in the video.
Setup
Hosting
I've done everything I can to make this work right away. However, you can't just open the example.html in a browser and it work (that depends on the browser). Most browsers won't natively interpret the javascript. They may not even render the styles correctly. So it has to be hosted locally. Again, my video should help with this. Here are some tools to help:
WAMP http://www.wampserver.com/en/ IIS Express https://www.microsoft.com/en-us/download/details.aspx?id=48264
I like IIS Express. Both are simple to setup, but IIS Express is a smaller footprint. Once more, my video goes through IIS Express setup also.
Stream Software - Browser Source
This should be pretty straight forward. If you are already streaming, and you have used something like Stream Labs, then you should easily point to the html file that you just set up hosting for.