I cannot change font and text size

Question

Hello guys! I’m trying to create a custom overlay in the studio Obs to look the same as in the photo. The part of the balloon underneath I’m managing to do, but I’m having trouble trying to change the type of font and the size of it..

I’ll post the code here: HTML

<!-- alert image -->
<div id="alert-image-wrap">
  <div id="alert-image">{img}</div>
</div>

<!-- main alert box window -->
<div id="alert-text-wrap">

  <!-- alert text -->
  <div id="alert-text">

    <!-- alert message -->
    <!-- messageTemplate will be replaced with your message template -->
    <!-- for example : {name} is now following! or {name} donated {amount} -->

    <div id="alert-message">{messageTemplate}</div>
    <div id="alert-user-message" class="balao">{userMessage}</div>

  </div>

</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,200&display=swap');
.widget-AlertBox {
    position: relative;
}
body,
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#wrap {
    position: relative;
    height: 100%;
    width: 100%;
}
#alert-box {
    height: 100%;
    width: 100%;
    position: absolute;
}
#alert-box.hidden,
.hidden {
    opacity: 0;
}
#alert-text {
    padding: 20px;
    text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000, 0px 0px 4px #000, 0px 0px 5px #000;
}
#alert-message,
#alert-user-message {
    text-align: center;
}
#alert-user-message img {
    vertical-align: middle;
    height: 1em;
}
#alert-image {
    position: relative;
}
#alert-image video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#alert-message > span > span {
    display: inline-block;
    font-family: 'Montserrat';
    color: #fff;
    font-size: 20px;
        text-transform: uppercase;
}
#alert-image {
    z-index: 6;
    position: relative;
}
#alert-text {
    z-index: 6;
    position: relative;
}
#alert-text-wrap {
    z-index: 6;
    position: relative;
}
.balao {
    margin: 0 auto; 
    background-color: #fff;
    font-family: 'Montserrat';
    font-size: 0.85em;
    line-height: 1.6em;  
    border-radius: 10px;
    width: 200px;
    height: auto;
    color: 242424;
    padding: 20px;
    position: relative;
    margin-top: 30px;
}
.balao:after{ /*Triangulo*/
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    top: -10px;
    left: 100px;
}

I can’t change the font and size of the "BALAO" class, it just doesn’t work.. If anyone can give me a hand with that..

Answer 1

Come on, I played your scenario on the following link:

https://stackblitz.com/edit/js-fqw7ue?file=style.css

I’m not sure I quite understand, but div where we have the "{userMessage}" class balao to which you referred... Note that I changed the elements: font-family and font-size of it... That was your question?

Idea: if you don’t want to go down the path of changing the class balao directly, you can put the "{userMessage}" into a separate element and manipulate it from this...

Answer 2

Hello, friend! It seems to me you are trying to modify the text with this selector:

#alert-message > span > span {
    display: inline-block;
    font-family: 'Montserrat';
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
}

With this, in fact, you are changing the text of a span child of another span that is the child of the div. Try to change only the text of the div.

Hug and good luck!