Custom notifications not working as intended

[AtACarnivorus]

Hello.

I created two custom CSS stylesheets for donation notification and donation tracker as described in your wiki. Problem is, my OBS Studio (64bit) won't display it properly.
I'll post my CSS code below and maybe one of you can show me the right approach to fix them both.

Donation tracker:

Code: [Select]

body {
background-color: transparent;
color: white;
}


#content {
padding: 10px 10px;
}

#thermometer {
  position: relative;
  padding: 10px 20px;
}

#thermometer .track {
height:50px;
top: 0px;
border: 1px solid #aaa;
margin: 20px 20px;
background: rgb(255,255,255);
}

#thermometer .progress {
height: 50px;
width:10%;
    top: 0px;
    left: 0px;
    z-index: 9;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.15)) #6342ab;
    box-shadow: 0px 0px 1px rgb(0, 0, 0);
}

#thermometer .goal {
position:relative;
width: 100%;
}

#thermometer .start-amount {
position: absolute;
float: right;
border-top:0px solid black;
font-family: Trebuchet MS;
font-weight: bold;
top: 50px;
color:#333;
}
#thermometer .end-amount {
position: absolute;
float: right;
border-top:0px solid black;
font-family: Trebuchet MS;
font-weight: bold;
top: 50px;
right: 0px;
color:#333;
}
#thermometer .progress .amount {
  width: 100%;
  height: 50px;
  right: 0px;
  position: absolute;
  z-index: 11;
  text-align: center;
  vertical-align: middle;
  color: #000000;
  font-family: Trebuchet MS;
  font-weight: bold;
  font-size: 38px;
}
Donation notification:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 960px;
    height: 240px;
    background: linear-gradient(to bottom, #c75f38 0%,#ebac5c 50%,#c75f38 100%) no-repeat, url(http://i.imgur.com/BykPHS1.gif);
    background-position: center, right;
    background-size: 320px 240px;
}

#donor-notification .header {
    color: #37b2e5;
    font-size: 38px;
    font-family: Algerian;
}
#donor-notification .streamname {
    //float: left;
    visibility: visible;
}
#donor-notification .message {
    font-size: 20px;
    font-family: Verdana;
    color: black;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    /* border: 1px solid black; */
}
#donor-notification .amount {
    position: absolute;
    width: 100%;
    top: 25%;
    font-family: Verdana;
    text-align: center;
    font-weight: bold;
    color: #830805;
    font-size: 50px;
}
#donor-notification .donor {
    position: absolute;
    width: 100%;
    top: 5%;
    font-family: Verdana;
    font-weight: bold;
    color: black;
    font-size: 38px;
    text-align: center;
    vertical-align: middle;
}
#donor-notification .title {
    padding-top: 15px;
    width: 100%;
    //float: left;
    //text-align: center;
}
#donor-notification .messagebox {
    position: absolute;
    text-align: center;
    top: 45%;
    width: 320px;
    left: 320px;
}
Any help is appreciated. Thanks!

[TheNumbLock]

What exactly are you trying to do with the donation tracker?

This is what it looks like for me.

Donation Tracker:



Donaiton Notification:

[AtACarnivorus]

The tracker is partly okay. It's just that I can't color key it without a glowing border. Looks weird.

The Donation notification should look like this:


Thanks for your help!

[TheNumbLock]

The tracker is partly okay. It's just that I can't color key it without a glowing border. Looks weird.

The Donation notification should look like this:


Thanks for your help!

Okay, so you want a glowing border on the whole grey part of the tracker?

As for the notification, which URL are you using for the CLR Browser?

[AtACarnivorus]

No, I don't want the glowing border on the tracker :-) If I color or chroma key it, the glow will remain and looks bad.

I'm using http://deepbot.tv/notifications/donationnotification2.htm?dur=5000 for the notification.

[TheNumbLock]

Try this CSS for the Donation Notification with the URL: http://deepbot.tv/notifications/donationnotification3.htm?ccy=%E2%82%AC

What I did was put the image before/after the .messagebox (check CSS at the bottom to see it).

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

#donor-notification {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 960px;
    height: 240px;
    background: linear-gradient(to bottom, #c75f38 0%,#ebac5c 50%,#c75f38 100%) no-repeat !important;
    background-position: center, right;
    background-size: 320px 240px;
}

#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
visibility: hidden !important;
}
#donor-notification .message {
    font-size: 20px;
    font-family: Verdana;
    color: black;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    /* border: 1px solid black; */
}
#donor-notification .amount {
    position: absolute;
    width: 100%;
    top: 25%;
    font-family: Verdana;
    text-align: center;
    font-weight: bold;
    color: #830805;
    font-size: 50px;
}
#donor-notification .donor {
    position: absolute;
    width: 100%;
    top: 5%;
    font-family: Verdana;
    font-weight: bold;
    color: black;
    font-size: 38px;
    text-align: center;
    vertical-align: middle;
}
#donor-notification .title {
    padding-top: 15px;
    width: 100%;
    //float: left;
    //text-align: center;
}
#donor-notification .messagebox {
    position: absolute;
    text-align: center;
    top: 45%;
    width: 320px;
    left: 320px;
}

.messagebox:after {
position: absolute !important;
margin-top: -172px !important;
margin-left: -480px !important;
content: '' !important;
width: 320px !important;
height: 242px !important;
background: url(http://i.imgur.com/BykPHS1.gif) no-repeat !important;
}

.messagebox:before {
position: absolute !important;
margin-top: -108px !important;
margin-left: 160px !important;
content: '' !important;
width: 320px !important;
height: 242px !important;
background: url(http://i.imgur.com/BykPHS1.gif) no-repeat !important;
}

CSS for Donation Tracker: (I completely removed the white/grey border)

Code: [Select]

body {
background-color: transparent;
color: white;
}


#content {
padding: 10px 10px;
}

#thermometer {
  position: relative;
  padding: 10px 20px;
-webkit-box-shadow: none !important;
background: transparent !important;
border: none !important;
}

#thermometer .track {
height:50px;
top: 0px;
border: 0px solid #aaa !important;
margin: 20px 20px;
background: rgb(255,255,255);
}

#thermometer .progress {
height: 50px;
width:10%;
    top: 0px;
    left: 0px;
    z-index: 9;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.15)) #6342ab !important;
    box-shadow: 0px 0px 1px rgb(0, 0, 0);
}

#thermometer .goal {
position:relative;
width: 100%;
}

#thermometer .start-amount {
position: absolute;
float: right;
border-top:0px solid black;
font-family: Trebuchet MS;
font-weight: bold;
top: 50px;
color:#333;
}
#thermometer .end-amount {
position: absolute;
float: right;
border-top:0px solid black;
font-family: Trebuchet MS;
font-weight: bold;
top: 50px;
right: 0px;
color:#333;
}
#thermometer .progress .amount {
  width: 100%;
  height: 50px;
  right: 0px;
  position: absolute;
  z-index: 11;
  text-align: center;
  vertical-align: middle;
  color: #000000;
  font-family: Trebuchet MS;
  font-weight: bold;
  font-size: 38px;
}


[AtACarnivorus]

Thank you. Tracker is exactly what I was looking for.

The notification is working, but it will move the 'after' picture depending on message length? At least my test previews had various offsets on top values.

[AtACarnivorus]

Got it fixed!

Thanks for your help!