Need help with custom Notifications

[Backyardis]

Follower Alert
 
Image Link: http://i.imgur.com/pdStpH7.png
Font Style/Link: Norwester
Font Color: Red
Any text fill/boarder?:none
Where do you want text located? (Follower Name): Center
Example (If applicable):http://imgur.com/2UeKN4c



Donation Alert

Image Link: http://i.imgur.com/PJoBAiX.png
Font Style/Link: Norwester
Font Color: red / white as per example, all white if only one color alowed.
Any text fill/boarder?:no
Currency Type: $
What do you want the alert to say?(Text Options: Donator Name, Donation Amount, Message): as per example
Example (If applicable): http://imgur.com/5ogiN8X
Anything else?:


Host Alert

Image Link: http://i.imgur.com/15ZcMgm.png
Font Style/Link: Norwester
Font Color: Red /white (White if only one color)
Any text fill/boarder?:No
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers): As per example
Example (If applicable): http://imgur.com/5fT19Rx
Anything else?:

font used for all 3 notifications is
https://www.fontsquirrel.com/fonts/norwester

Thank you in advance

[TheNumbLock]

Requested by: Backyardis

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 600
Height: 250

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px !important;
left: 0px !important;
width: 550px !important;
height: 200px !important;
border-radius: 00px !important;
background-size: contain !important;
background-image: url(http://i.imgur.com/pdStpH7.png) !important;
background-repeat: no-repeat;
}

#follow-notification .header {
visibility: hidden !important;
}

#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 40px !important;
margin-left: 140px !important;
width: 300px !important;
font-size: 38px !important;
font-weight: bold !important;
font-family: Norwester !important;
color: #FF0000 !important;
text-transform: capitalize;
-webkit-text-stroke-color: #000;
-webkit-text-stroke-width: 1px;
}

.followname:before {
content: "" !important;
}

.followname:after {
content: "" !important;
}

Preview: (If there is a black background, it is just my background.)




Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 600
Height: 250

CSS Code:

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 {
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 550px !important;
    height: 200px !important;
    background-image: url(http://i.imgur.com/PJoBAiX.png) !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}
#donor-notification .header {
visibility: hidden !important;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
position: absolute;
margin-top: 70px !important;
margin-left: 60px !important;
width: 500px !important;
text-align: left !important;
font-weight: normal !important;
font-size: 20px !important;
font-family: Norwester !important;
color: white !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .amount {
position: absolute;
margin-top: 0px !important;
margin-left: -220px !important;
width: 300px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Norwester !important;
color: red !important;
text-transform: capitalize !important;
background: ;
-webkit-text-stroke-color: black !important;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute;
margin-top: 0px !important;
margin-left: -130px !important;
width: 300px !important;
text-align: center !important;
font-weight: bold !important;
font-size: 30px !important;
font-family: Norwester !important;
color: red !important;
text-transform: capitalize !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
text-shadow: none !important;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

.donor:after {
content: " - " ;
}

Preview: (If there is a black background, it is just my background.)



Host:

Link: http://deepbot.tv/notifications/hostnotification.htm?w=600&h=200
Width: 600
Height: 250

CSS Code:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px !important;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url(http://i.imgur.com/15ZcMgm.png) !important;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: -30px !important;
    margin-left: 70px !important;
    text-align: center;
    width: 420px !important;
    font-size: 32px !important;
    font-family: Norwester !important;
    text-shadow: none !important;
    color: red !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
}
.hostdiv {
    margin-top: 50px !important;
    margin-left: 250px !important;
    text-align: center;
    width: 450px !important;
    font-size: 26px !important;
    font-family: Norwester !important;
    text-shadow: none !important;
    color: white !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
    -webkit-transform: rotate(0deg);
    border: none !important;
}
.hostnumber {
visibility: visible !important;
    position: relative;
    top: 50px !important;
    left: -200px !important;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Norwester !important;
    text-shadow: none !important;
    text-decoration: underline;
    color: white !important;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: "";
}
.hostnumber:before {
    content: "Bringing Along ";
}
.hostnumber:after {
    content: " viewers";
}
.hostdiv:after {
    position: absolute !important;
    content: "";
    margin-top: 50px !important;
    margin-left: -350px !important;
    text-align: center;
    width: 500px !important;
    font-size: 30px !important;
    font-family: Courgette !important;
    color: red !important;
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width: 0px;
    text-transform: capitalize !important;
   
}

Preview: (If there is a black background, it is just my background.)

[TheNumbLock]

Thanks TheNumbLock,
I'm having some trouble implementing this into Xsplit, I have changed the URL to add the " " which i know is an Xsplit requirement but this still does not work.

Sorry i forgot to mention i am using xsplit in the original request


any advise ?

I am just getting the default image when trying use these notifications

What URL are you using for them?

Edit: Updated CSS for xsplit

[Backyardis]

What URL are you using for them?

Edit: Updated CSS for xsplit

I just found the extra ' around the comment section as you posted. Thanks and sorry about that..

I now have another issue which is the top line of the donation looping back on itself

here is a screen grab

http://imgur.com/a/OkVfa

im working on the others now fingers crossed

EDIT:

I have modified the donation CSS to move #donor-notification.donor Text.align to LEFT
and #donor-notification .amount  text.align to the Right.

Seems to have fixed it, both were set to center

[TheNumbLock]

Interesting, I guess I will have to start doing CSS on xSplit since it seems to effect the original CSS from OBS.

[Backyardis]

Just bringing back this thread to request a sub notification (want to keep them all in the one thread for future reference)

Sub Alert

Image Link: http://i.imgur.com/ufa52v1.png
Font Style/Link: Norwester
Font Color: Red /white (as per example)
Any text fill/boarder?:No
What do you want the alert to say?(Text Options: Host Name, Amount of Viewers): As per example
Example (If applicable): http://i.imgur.com/xY69x6g.png
Anything else?:
-using Xsplit

-font used for notification is
https://www.fontsquirrel.com/fonts/norwester

Thanks a heap

BackyardisTV