Author Topic: Custom Host alert & Donation Tracker  (Read 3378 times)

0 Members and 1 Guest are viewing this topic.

AleksS

  • Youngling
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile
  • Twitch Name: oesibua94
Custom Host alert & Donation Tracker
« on: September 06, 2015, 07:36:41 AM »
Hello my Friends.

I need a Custom Hosting Alert what is possible after the new Patch.

I need this Image: http://www11.pic-upload.de/26.07.15/2io4a29vthc5.png

And i need a Donationtracker like this: http://prntscr.com/8d2ef6

On the Left the Text, in the Middle the Actual Donation and in the right side the Target

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Host alert & Donation Tracker
« Reply #1 on: September 07, 2015, 06:05:01 AM »
Requested by:

Host Alert:

Link: http://deepbot.tv/notifications/hostnotification.htm
Width: 600
Height: 150

CSS Code:
Code: [Select]
body {
background-color: transparent;
color: white;
}

#host-notification {
top: 0px;
left: 0px;
width: 580px !important;
height: 110px !important;
border-radius: 10px;
background-image: url('http://www11.pic-upload.de/26.07.15/2io4a29vthc5.png') !important;
background-repeat: no-repeat;
overflow: hidden;
}

#host-notification .hostname {
margin-top: 10px !important;
  margin-left: 150px !important;
text-align: center;
width: 313px;
font-size: 26px;
font-family: Verdana;
text-shadow: 2px 2px 1px #000;
color: #ffffff;
}

.hostdiv {
visibility: hidden !important;
}

.hostnumber {
visibility: hidden !important;
}

#host-notification .header {
text-align: center;
width: 500;
vertical-align: top;
font-size: 26px;
line-height: 26px;
font-family: Algerian;
text-shadow: 1px 1px 1px #97A02A;
text-decoration: underline;
color: red;
visibility: hidden;
padding-top: -50px;
}

.hostname:after {
content: '' !important;
}

.hostnum:after {
content: '';
}

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



You will have to go in the CSS, to very bottom > Edit the InsertNameHere Part

Donation Tracker:

Link: http://deepbot.tv/widgets/donationtracker.htm?mode=2
Width: 640
Height: 180

CSS Code:
Code: [Select]
body {
background-color: transparent;
color: white;
}

#content {
/* width:100%; */
padding: 10px 10px;
}

#thermometer {
position: relative;
  margin: 0px 10px 10px 10px;
height:100px;
background: transparent !important;
border: 3px solid transparent !important;
-webkit-border-radius: 0px !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
}

#thermometer .track {
height:50px;
top: 0px;
border: 1px solid limegreen !important;
margin: 20px 20px;
background: black !important;
}

#thermometer .progress {
height: 50px;
width:10%;
background: limegreen !important;
}

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

#thermometer .start-amount {
visibility: hidden !important;
}
#thermometer .end-amount {
position: absolute;
float: right;
display: inline-block;
padding-right: 40px;
border-top:0px solid black;
font-family: Impact !important;
font-weight: bold;
font-size: 26px !important;
top: 10px !important;
right: 20px !important;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px !important;
  text-shadow:0px 0px 25px white;
}
#thermometer .progress .amount {
display: block;
position: absolute;
text-align: center;
border-top: 0px solid #060;
font-family: Impact !important;
font-size: 26px !important;
font-weight: bold;
color: white !important;
top: 32px !important;
width: 100%;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px !important;
  text-shadow:0px 0px 25px white;
}

.goal:before {
content: 'InsertNameHere' !important;
position: absolute;
float: left !important;
display: inline-block;
padding-right: 40px;
border-top:0px solid black;
font-family: Impact !important;
font-weight: normal;
font-size: 26px !important;
top: 10px !important;
left: 10px !important;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px !important;
  text-shadow:0px 0px 25px white;
}

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

Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

AleksS

  • Youngling
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile
  • Twitch Name: oesibua94
Re: Custom Host alert & Donation Tracker
« Reply #2 on: September 11, 2015, 03:31:57 AM »
Thanks for that it looks nice and work, but the Host alerst shows up instantly?

How i can show it only up when i got a Host and then with a Name under the "Danke für deinen Host"???

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Host alert & Donation Tracker
« Reply #3 on: September 11, 2015, 04:14:36 AM »
They should only show when you are hosted. o.o
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport

AleksS

  • Youngling
  • *
  • Posts: 21
  • Karma: +0/-0
    • View Profile
  • Twitch Name: oesibua94
Re: Custom Host alert & Donation Tracker
« Reply #4 on: October 21, 2015, 03:48:30 PM »
Can i get maybe a new Code that works?

It only must show when i got the host with 5 or more viewer (what i set in the settings).

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Host alert & Donation Tracker
« Reply #5 on: October 22, 2015, 12:48:01 AM »
Can i get maybe a new Code that works?

It only must show when i got the host with 5 or more viewer (what i set in the settings).

Try this url: http://deepbot.tv/notifications/hostnotification.htm?dur=10000

That should display it for only 10 seconds.
Old Name: RepentGamingTV
Twitch: Here

Need help ASAP?
Join Deepbot's Discord: Discord.Deepbot.tv
Deepbot's Twitter: @DeepSupport