I need CSS for these Follow, Donation, and Subscriber Notifications.

[Chelisamarie]

Hello! This is my first attempt at making my own notification Layouts. Please note that the Examples were made before I put the black borders on the templates. I'd like them to pop up on the top of the screen. Followers in the top left corner, Subscribers in the top center, and Donations in the top right. I'd like Arial font (bold), thats big enough to fill the box, but leaves enough space for longer usernames. I'd like the username to center itself on the "Just subscribed", "Just donated $x.xx" and "just followed" and the "just..."s to be centered in the remaining white space of the template.

SubscriberTemplate: http://i.imgur.com/m0FP1va.png
SubscriberExample: http://i.imgur.com/GkRMxoA.png
Text: [Username] Just Subscribed! (text location shown in example)
Pixels: 414x114

FollowerTemplate: http://i.imgur.com/9grA36b.png
FollowerExample: http://i.imgur.com/jq9FDrh.png
Text: [Username] Just Followed! (text location shown in example)
Pixels: 414x114

DonationTemplate: http://i.imgur.com/62blZb1.png
DonationExample: http://i.imgur.com/TsuWZvg.png
Text: [Username] Just Donated $x.xx! (text location shown in example)
Pixels: 414x114

If you need any more information, please feel free to contact me.

Thank you!!!

Chelisamarie

[TheNumbLock]

Requested by: Chelisamarie

Subscriber:

Link: http://deepbot.tv/notifications/subnotification1.htm
Width: 500
Height: 150

CSS Code:

Code: [Select]

#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 414px !important;
  height: 114px !important;
  background-repeat: no-repeat;
  background-image: url('http://i.imgur.com/m0FP1va.png') !important;
  background-position-y: 0px;
}
#sub-notification .subname {
position: absolute !important;
text-align: left !important;
margin-top: -140px !important;
margin-left: 180px !important;
margin-right: 200px !important;
width: 300px !important;
font-size: 28px !important;
font-weight: normal !important;
font-family: arial bold !important;
color: black !important;
text-shadow:none !important;
}

.subname:after {
content: " Just Subscribed! " ;
position: absolute !important;
text-align: left !important;
margin-top: 40px !important;
margin-left: -190px !important;
margin-right: 0px !important;
width: 300px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: arial bold !important;
color: black !important;
text-shadow:none !important;
}


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



Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 500
Height: 150

CSS Code:

Code: [Select]

#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 408px !important;
height: 108px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/9grA36b.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 0px !important;
margin-left: 100px !important;
margin-right: 150px !important;
width: 300px !important;
font-size: 28px !important;
font-weight: normal !important;
font-family: arial bold !important;
color: black !important;
text-shadow:none !important;
}

.followname:after {

content: " Just Followed! " ;
position: absolute !important;
text-align: center !important;
margin-top: 41px !important;
margin-left: -230px !important;
margin-right: 0px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: arial bold !important;
color: black !important;
text-shadow:none !important;
}

}

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





Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 500
Height: 150

CSS Code:

Code: [Select]

#donor-notification {
width: 414px !important;
height: 114px !important;
background-color: transparent !important;
background-image:url('http://i.imgur.com/62blZb1.png') !important;
background-repeat: no-repeat !important;
background-size: initial !important;
}


#donor-notification .header {
position: absolute !important;
visibility: hidden !important;
}

#donor-notification .streamname {
visibility: hidden !important;
}

#donor-notification .message {
visibility: hidden !important;
}
#donor-notification .amount {
position: absolute !important;
text-align: center !important;
margin-top: 20px !important;
margin-left: 90px !important;
margin-right: 100px !important;
width: 300px !important;
font-size: 28px !important;
font-family: arial !important;
color: black !important;
}

.amount:before {
content: " Just donated " !important;
}

#donor-notification .donor {
position: absolute !important;
text-align: center !important;
margin-top: -20px !important;
margin-left: 80px !important;
margin-right: 100px !important;
width: 300px !important;
font-size: 28px !important;
font-family: arial !important;
color: black !important;
}

#donor-notification .title {
padding-top: 44px !important;
margin-left: 0px !important;
width: 100% !important;
float: left !important;
text-align: left !important;
}

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

[Chelisamarie]

Thank you so much for the code! One thing that I'd like to change is that the font seems to be different in "Donation" than "sub" and "follower" notifications. Is it possible to change the font of sub and follower to that of Donation? It's just easier to read. Also, I'm not sure why, but the Follower outline seems to be cut off a little. How would one fix that?

Chelisamarie

[TheNumbLock]

Thank you so much for the code! One thing that I'd like to change is that the font seems to be different in "Donation" than "sub" and "follower" notifications. Is it possible to change the font of sub and follower to that of Donation? It's just easier to read. Also, I'm not sure why, but the Follower outline seems to be cut off a little. How would one fix that?

Chelisamarie

I have noticed that issue with a lot of the CSS I have done, I am not sure how to fix it. I have tried using a lighter font family and everything. Seems to always put that boldness and shadow there.

Edit: Figured it out and updated the CSS.

[Chelisamarie]

It's perfect! Thank you!!!

[Chelisamarie]

So I'm not sure why, but every time I close OBS it resets the notifications and I have to copy and paste everything over again. How do I fix that?

[TheNumbLock]

Did you install 64 bit or 32 bit clr browser?

[Chelisamarie]

i believe its 32

[Chelisamarie]

Any ideas as to what I need to do to fix that?

[TheNumbLock]

Try running obs in admin mode? Right click the icon>Run as admin

[Chelisamarie]

It still changed everything back after I closed the application. Maybe I just have to reinstall everything?

[TheNumbLock]

Possibly, I have been having this issue too, from time to time. Either my follower/donator/sub notification testers keeps doing it at random. :/

[Chelisamarie]

I found the answer! The CLR Browser plugin doesn't like " in the CSS code, so I just changed it to ' and it saved just fine!

For example: " Just Donated! " turns into ' Just Donated! '

I hope this helps!