Positionierung von Alerts in SLOBS funktioniert nicht

Hi in die Runde!

ich habe eine Frage bzw. vielmehr ein Problem mit Streamlabs OBS. Ich habe mir ein paar Designs für Alerts machen lassen, kriege die aber nicht sauber übereinander. Problem ist, dass ich den Text ein wenig nach unten schieben müsste, aber da ich keine Ahnung von Coding habe, weiß ich nicht an welcher Stelle ich genau den Text nach unten schiebe. Gefühlt wenn ich etwas ändere springt es immer viel zu weit und ich weiß nicht genau woran es liegt. Hier einmal ein Beispiel für einen Alert der nicht so klappt wie er soll:

Ihr seht sowohl Bild als auch Text sind zentral ausgerichtet. Problem ist nur das das Bild eine Überschriftenzeile hat und der Text eigentlich im grauen Feld landen muss. Hier erst einmal der CSS Code:

.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;
}
#alert-image {
    z-index: 6;
    position: relative;
}
#alert-text {
    z-index: 6;
    position: relative;
}
#alert-text-wrap {
    z-index: 6;
    position: relative;
}

einmal ein Screenshot meiner Einstellungen im Browser bei Streamlabs:

Ist da jemand versiert und kann mir da vielleicht helfen? Gerne wenn jemand die Zeit hat in nem direkten Gespräch (TS, Discord, Skype) wo man den Desktop über teamviewer freigeben kann. Ich habe noch weitere Anzeigefehler, die aber alle im Prinzip in diese Richtung zielen, daher wollte ichs erstmal auf dieses Problem beschränken.

Über Feedback würde ich mich sehr freuen!

Viele Grüße

Kopfgeburt

Hallöchen,

zunächst mal danke für die Antwort. Hier einmal der HTML Text:

<!-- 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">{userMessage}</div>

  </div>

</div>

Wann hättest ggf. mal Zeit für Discord?

Ahoi in die Runde!

Zunächst vielen Dank an Dragon_tk1986 der mit mir im Discord das Problem angegangen ist!

Hier für Euch einmal die Lösung: Um den Text Punktgenau nach unten verschieben zu können, muss eine bestimmte Zeile im CSS Code angepasst werden. Standardmäßig ist dies Zeile 25 (die untere der beiden):

#alert-text {
    padding-top: 55px;

Dort steht im Standard zunächst nur "Padding: 20px". Wenn man es zu "Padding-Top" ändert bestimmt die folgende Pixel Anzahl den Einzug von oben. Je höher die Pixelzahl, desto weiter wird der Test nach unten geschoben. Mit ein bisschen Trial and Error kriegt man es dann auf die exakte Höhe wie man es für den Alert braucht. Interessanterweise kann diese Höhe von Alert zu Alert unterschiedlich sein, daher am besten alle einmal durchgehen und ausprobieren wo es passt.

Nochmals Danke und euch allen einen guten Start in den Vizefreitag!