Hey there. I've been messing with this for hours now and havent had much luck getting the desired result.
I have some knowledge with CSS and HTML, but not much and have 0 knowledge of JS.
My scoreboard has a limited space for the team names to fit in. What i want is for the team names to auto resize to fit within the box.
If you look at the example, the team name on the right is longer than the one on the left and its resized to fit with in the box.
I've been using the SBA program and was able to do this within obs, but i would like to switch entirely over to the web version soon, i just need this to work and i should be set.
The code i've been using is from the tutorials but altered to be just the text in the right positions. Hopefully you can help. Thanks!
Package CSS:
Page CSS:
Page HTML:
No JS Code
I have some knowledge with CSS and HTML, but not much and have 0 knowledge of JS.
My scoreboard has a limited space for the team names to fit in. What i want is for the team names to auto resize to fit within the box.
If you look at the example, the team name on the right is longer than the one on the left and its resized to fit with in the box.
I've been using the SBA program and was able to do this within obs, but i would like to switch entirely over to the web version soon, i just need this to work and i should be set.
The code i've been using is from the tutorials but altered to be just the text in the right positions. Hopefully you can help. Thanks!
Package CSS:
CSS:
body
{
color: white;
font-family: Candara;
-webkit-text-stroke: 1.6px black;
display: inline;
}
.colorB { background: var(--border-color); }Page CSS:
CSS:
.team.p1 { left: 300px; }
.team.p2 {
position: absolute;
top: 14px;
left: 1150px;
max-width: 268px;
max-height: 68px;
font-size: 72px;
background: red;
white-space: nowrap;
text-align: center;
}
.scores
{
position: absolute;
top: 0;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
clip-path: polygon(0% 0%, 100% 0%, 70% 100%, 30% 100%);
}
.scores.s1 { left: 230px; }
.scores.s2 { right: 230px; }Page HTML:
HTML:
<div class="scores s1 color2 slow hidden" id="scores_1s">0</div>
<div class="scores s2 color2 slow hidden" id="scores_2s">0</div>
<div class="team p1 color1 slow hidden" id="team_1">one</div>
<div class="team p2 color1 slow hidden" id="team_2">Player Two</div>No JS Code
Attachments
Last edited:
