I'm using a website called streamlabs.com which is an all-in-one tool for live streamers on Twitch, YouTube and Mixer. I have made a Photoshop overlay with the three live-streaming, platform's icons and they are equally spaced apart on 2K resolution (2560x1440px). I then use this with the Open Broadcast Software aka OBS to stream those platforms. Streamlabs allows you to embed webpage directly into the software and display it. I have set the size of the webpage to 2560 x 1440px as stated above; the same size as my OBS setup, and this will allow me to align everything perfectly pixel by pixel.
Essentially I want to put the view counts alongside each of the items.
The hierarchy looks like this in a condensed form:-
Parent container
Child container
Icon
View count text
platform_container
twitch_container
fab fa-twitch platform-icon
twitch-count
Here's the actual code taken from my Firefox's Developer Tool
So far I have already worked out to remove the icons by using
#platform_container #twitch_container .fab.fa-twitch.platform-icon {
display: none !important;
}
I've then used a relative position to move each child container away from the platform_container parent div which is size up at 2560 x 1440 e.g.
#platform_container #twitch_container {
position: relative;
left: 680px !important;
}
Under each of the child containers is the icon and the actual view count text, and it's the twitch_count class I'm trying to scale down to fix in it's parent container twitch_container. I was thinking of setting the max-width parameter on the twitch_container and then scale the font which defined in child container twitch_count. When the view count goes up the number of characters will increase taking more width up, and I don't want to overlap into another div, but instead scale down to max width set in the parent divs above it.
This is what it looks like below in the screenshot. The gap between all of the red arrows should be equal distance, but as you can see the more characters added to the Twitch container in this example the further is expands. I want the text to shrink in size to certain extent without affecting the width.
I have bit of knowledge with CSS and I've set tried setting the max-width on the twitch_container and the twitch-count container and then setting the font size to 60vmin and 60% and the twitch-count completely ignores it's parent div and the size just goes off the screen for being too big.
Any ideas?
UPDATE 1
<html>
<head>
<title>Viewer Count Widget</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ff.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js?attr=QxoJqggwpIFoYwuEU6jAPg8vfi5xoaqgIlShnnH8Mh6ZzTBWezbNYVjEqi9iFbI6ZSl4Lrvm2QVmeWLI20SxNavAi9N9YykjkJe0utSTYRlUVQV_MQ1ZwrgwxGiANY4J" charset="UTF-8"></script><script src="https://cdn.polyfill.io/v2/polyfill.min.js?unknown=polyfill&features=es6|gated|always"></script>
<script src="/mixed/assets/vendor/js/manifest.js?id=01c8731923a46c30aaed"></script>
<script src="/mixed/assets/vendor/js/vendor.js?id=9e7e3700e75d5ed3493a"></script>
<script src="/mixed/assets/external/js/external.js?id=6aae1514e74721024ba5"></script>
<style id="theme"></style>
<script>
//function stubs for xsplit beta
window.SetVolume = function() {};
window.OnSceneLoad = function() {};
window.setBackGroundColor = function() {};
window.GetPlayState = function() {};
window.UpdateLocalProperty = function() {};
window.SetEvent = function() {};
</script>
</head>
<body style="margin:0px">
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
<iframe
sandbox="allow-scripts"
frameborder="0"
style="width:100%;height:100%;"
seamless="true"
src="/widgets/frame/viewercount/custom"
id="sl_frame"></iframe>
<div id="custom_html">
<!-- all platforms will be added to this container -->
<div id="platform_container">
</div>
<!-- platform item -->
<script type="text/template" id="platform_item">
<span style="font: {font_weight} {font_size} '{font}'; margin:20px" id="{platform}_container">
<i class="fab fa-{platform} platform-icon" style="color:{platform_color};"></i>
<img class="platform-img" width="{font_size}" height="{font_size}">
<span style="color:{font_color}" class="{platform}-count"></span>
</span>
</script>
</div>
<style id="custom_css">
</style>
<style>
#sl_frame {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
</style>
<input type="hidden" id="simulate" value="" />
<script src="/mixed/assets/widgets/js/viewercount.js?id=baf2989d9a92071b21d6"></script>
<input type="hidden" id="token" value="BDFF52B12D5C0F0452E5" />
<input type="hidden" id="profile" value="" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.3/webfont.js"></script>
<!-- include Google analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-52139786-2', 'auto');
ga('send', 'pageview');
</script>
<!-- sentry -->
</body>
</html>
UPDATE 2
I still can't get it to work. These are the lines of code I have on the three tabs of my Streamlabs dashboard; HTML, CSS and JS. Unfortunately I can't share the URL as it contains sensitive information.
HTML
<!-- all platforms will be added to this container -->
<div id="platform_container">
</div>
<!-- platform item -->
<script type="text/template" id="platform_item">
<span style="font: {font_weight} {font_size} {font}" id="{platform}_container">
<i class="fa fa-{platform} platform-icon" style="color:{platform_color};"></i>
<img class="platform-img" width="{font_size}" height="{font_size}">
<span style="color:{font_color}" class="{platform}-count"></span>
</span>
</script>
CSS
#platform_container {
display: flex;
border: 2px solid orange;
}
/* Twitch */
#platform_container #twitch_container {
border: 3px dashed blue;
max-width: 100px;
text-align: center;
margin-right: 20px;
}
#platform_container #twitch_container .twitch-count {
margin: 0;
line-height: 1;
max-width: 100px;
border: solid blue 2px;
font-size: 50px;
}
#platform_container #twitch_container .platform-icon {
display: none;
}
#platform_container #twitch_container .twitch-count::after {
content: "123456";
}
JS
// Please use event listeners to run functions.
document.addEventListener('onLoad', function(obj) {
// obj will be empty for viewer count widget
// this will fire only once when the widget loads
});
document.addEventListener('onEventReceived', function(obj) {
// obj will contain information about the event
});
const textElems = document.querySelectorAll("#platform_container > span[id$="_container"] > span[class$="-count"]");
const containerElem = document.querySelector("#twitch_container");
const fs = window.getComputedStyle(textElems[0]).fontSize;
const mw = window.getComputedStyle(containerElem).maxWidth;
const maxFontSize = parseFloat(fs);
const maxWidth = parseFloat(mw);
for (i = 0; i < textElems.length; i++) {
const elem = textElems[i];
if (elem.scrollWidth > maxWidth) {
elem.style.fontSize = (maxFontSize / elem.scrollWidth) * maxWidth + "px";
}
}
Screenshot showing the affect of current code
