Author Topic: Follower and Donator Notification CLR  (Read 2893 times)

0 Members and 1 Guest are viewing this topic.

koroshi

  • Youngling
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile
  • Twitch Name: sir_koroshi
Follower and Donator Notification CLR
« on: August 06, 2014, 10:09:57 PM »
Hello,

Would love some help with the css of the following notifications:

Follower:

http://i.imgur.com/7OvSYo4.png

(Text from center to right, white)

Sub:

http://i.imgur.com/S2nCymO.png

(Text from center to right, white)

Donation:

http://i.imgur.com/OTCYmkC.png

(Text white)

Location for all, top of the screen in the middle (Example: Donation: http://i.imgur.com/COvcahw.png  and sub: http://i.imgur.com/GQbop7h.png )

ExpertsOnline

  • Creator
  • Councilor
  • *****
  • Posts: 2656
  • Karma: +289/-24
    • View Profile
  • Twitch Name: expertsonline
Re: Follower and Donator Notification CLR
« Reply #1 on: August 07, 2014, 01:36:40 AM »
Follow:

Link: http://deepbot.tv/notifications/follownotification1.htm?dur=10000

Code:
Code: [Select]
#follow-notification {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 580px !important;
height: 110px !important;
border-radius: 10px;
background-image: url('http://i.imgur.com/7OvSYo4.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
margin-top: 15px !important;
margin-left: 80px !important;
text-align: center !important;
width: 480px !important;
font-size: 42px !important;
font-weight: bold !important;
font-family: Algerian !important;
color: #FFFFFF !important;
-webkit-text-stroke: 0.8px;
-webkit-text-stroke-color: #8a0823;
}

Sub:

Link: http://deepbot.tv/notifications/subnotification1.htm

Code:
Code: [Select]
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 580px !important;
  height: 110px !important;
  background-repeat: no-repeat;
  background-image: url('http://i.imgur.com/S2nCymO.png') !important;
  background-position-y: 0px;
}
#sub-notification .subname {
  margin-left: 110px !important;
  margin-top: 60px !important;
  padding-top: 0px !important;
  width: 450px !important;
  text-align: center !important;
  line-height: 14px !important;
  font-size: 42px !important;
  font-weight: bold !important;
  font-family: Algerian !important;
  color: #FFFFFF !important;
  -webkit-text-stroke: 0.5px;
  -webkit-text-stroke-color: #8a0823;
}

Donation:

Link: http://deepbot.tv/notifications/donationnotification.htm

Code:
Code: [Select]
#donor-notification {
position: absolute;
top: -100px !important;
left: 0px !important;
width: 802px !important;
height: 363px !important;
background-repeat: no-repeat;
background-size: cover;
  background-repeat: no-repeat;
  background-image: url('http://i.imgur.com/OTCYmkC.png') !important;
}

#donor-notification .date {
margin-right: 40px;
padding-top: 43px;
text-align: right;
line-height: 20px;
vertical-align: top;
font-size: 20px;
font-family: Algerian;
text-shadow: 2px 2px 1px #000;
visibility: hidden !important;
color: white;
}

#donor-notification .streamname {
margin-left: 34px;
padding-top: 28px;
text-align: left;
line-height: 26px;
vertical-align: top;
font-size: 24px;
font-family: Algerian;
text-shadow: 2px 2px 1px #FFF;
color: black;
visibility: hidden !important;
}

#donor-notification .message {
margin-left: 42px !important;
float: left !important;
height: 120px !important;
padding-top: 10px !important;
width: 70% !important;
line-height: 40px !important;
text-align: left !important;
vertical-align: top !important;
font-size: 19px !important;
font-family: Verdana !important;
color: white !important;
}
#donor-notification .amount {
float: right;
width: 20% !important;
padding-top: 17px !important;
text-align: left !important;
line-height: 26px !important;
vertical-align: top !important;
font-size: 30px !important;
font-family: Algerian !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}
#donor-notification .donor {
margin-left: 530px !important;
padding-top: 147px !important;
text-align: left !important;
line-height: 28px !important;
vertical-align: middle !important;
font-size: 29px !important;
font-family: Comic Sans MS !important;
text-shadow: 1px 1px 1px #000 !important;
color: white !important;
}