Author Topic: Custom Notification WorkShop  (Read 225773 times)

0 Members and 1 Guest are viewing this topic.

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« Reply #210 on: September 18, 2015, 10:28:34 AM »
Can you post a screenshot of the notification? So I can see how much I need to adjust it?
Old Name: RepentGamingTV
Twitch: Here

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

lastzombie

  • Youngling
  • *
  • Posts: 35
  • Karma: +0/-0
    • View Profile
  • Twitch Name: lastzombi
Re: Custom Notification WorkShop
« Reply #211 on: September 18, 2015, 11:00:42 AM »
Can you post a screenshot of the notification? So I can see how much I need to adjust it?
Here you go ^^
http://prntscr.com/8hl92w
http://prntscr.com/8hl9le

I guess it is problem with caps lock text and long nicknames. Notification doesn't have to show eveything it can just show until the given space ends.

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« Reply #212 on: September 18, 2015, 11:41:00 AM »
It looks like it's not even using the custom font. Maybe using a different font from the one I am using.

Anyways, try this CSS:

Code: [Select]
@font-face {
font-family: 'Bebas';
src:local('BebasNeue Bold'),
    local('Anime Inept Regular'),
    local('Bebas Neue Bold'),
    url('BebasNeue Bold.ttf');
}

#donor-notification {
position: absolute;
left: 0px !important;
width: 604px !important;
height: 337px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/u24po4a.png') !important;
overflow: hidden !important;
}

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

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

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

#donor-notification .message {
position: absolute !important;
margin-top: 200px !important;
margin-left: 60px !important;
width: 400px !important;
font-size: 18px !important;
font-weight: normal !important;
font-family: Bebas !important;
text-transform: capitalize;
color: #C0C0C0 !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 130px !important;
margin-left: -200px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Bebas !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 130px !important;
margin-left: -110px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Bebas !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}
Old Name: RepentGamingTV
Twitch: Here

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

lastzombie

  • Youngling
  • *
  • Posts: 35
  • Karma: +0/-0
    • View Profile
  • Twitch Name: lastzombi
Re: Custom Notification WorkShop
« Reply #213 on: September 18, 2015, 01:03:12 PM »
It looks like it's not even using the custom font. Maybe using a different font from the one I am using.


This worked and you are right it is not using the font even though it is installed. I will try using different font names. If it works for you I guess I have to fix it on my end.

CptFive3oh

  • Youngling
  • *
  • Posts: 3
  • Karma: +0/-0
    • View Profile
    • Inspiration Gaming
  • Twitch Name: CptFive3oh
Re: Custom Notification WorkShop
« Reply #214 on: September 21, 2015, 04:58:24 AM »
Follower Alert
Image Link: http://imgur.com/zWDFJEZ
Font Style/Link: Anything that looks good and can be seen clear.
Font Color: White
Any Text Fill/Border?: No
Where do you want text located?: On the blade. (entire blade, not hilt.)
Anything else?: Nope.

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« Reply #215 on: September 21, 2015, 03:17:47 PM »
Requested by: CptFive3oh

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 650
Height: 350

CSS Code:
Code: [Select]
#follow-notification {
display: none;
position: absolute;
width: 650px !important;
height: 320px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/zWDFJEZ.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 60px !important;
margin-left: 280px !important;
width: 300px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-fill-color: white;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

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

Frexie

  • Youngling
  • *
  • Posts: 3
  • Karma: +0/-0
    • View Profile
  • Twitch Name: Frexie_EDIT
Re: Custom Notification WorkShop
« Reply #216 on: September 25, 2015, 02:00:33 AM »
Follower Alert

Image Link: http://imgur.com/tBUQddc
Font Style/Link: Doesnt matter, Areal or something (rest is done)
Font Color: Black
Any text fill/boarder?: No
Where do you want text located? (Follower Name): Under the "New Follower"
Example (If applicable):
Anything else?: Yes, I would love the same for donation to.
http://imgur.com/TalpYOd
(There is the donation button) :)
Thanx <3

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« Reply #217 on: September 25, 2015, 01:54:37 PM »
Requested by: Frexie

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1920
Height: 1080

CSS Code:
Code: [Select]
#follow-notification {
display: none;
position: absolute;
width: 1920px !important;
height: 1080px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/tBUQddc.png?1') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 480px !important;
margin-left: 780px !important;
width: 300px !important;
font-size: 60px !important;
font-weight: normal !important;
font-family: Impact !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-fill-color: black;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

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




Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1920
Height: 1080

CSS Code:
Code: [Select]
#donor-notification {
position: absolute;
left: 0px !important;
width: 1920px !important;
height: 1080px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/TalpYOd.png?1') !important;
overflow: hidden !important;
}

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

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

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

#donor-notification .message {
position: absolute !important;
margin-top: 520px !important;
margin-left: 600px !important;
width: 700px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: #C0C0C0 !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 450px !important;
margin-left: -150px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 450px !important;
margin-left: -130px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}

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

forge316

  • Youngling
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
  • Twitch Name: forge_sinical
Re: Custom Notification WorkShop
« Reply #218 on: September 27, 2015, 09:43:50 AM »
 hi im trying to customize the widgets for channel commands where my viewers can type a command and  a certain gif and sound will pop up through obs's clr plugin. im wondering if this is something i can customize for each command or is it just one size fits all thing. i know right now i can add any sound i want to any command i create but problem is the background of what pops up in obs is the same color background if possible i would like to have the background transparent and it only showing the text and the gif or picture i add in the command section.

freepoints

  • Youngling
  • *
  • Posts: 8
  • Karma: +1/-0
    • View Profile
  • Twitch Name: freeoiubts
Re: Custom Notification WorkShop
« Reply #219 on: October 03, 2015, 01:53:25 PM »
Image Link:http://imgur.com/AxekDBl
Font Style/Link: Segoe Print
Font Color: white with a black outline of 5px
Any text fill/boarder?:
Currency Type: usd
Where do you want text located?(Donator Name, Donation Amount, Message)
Example (If applicable): donator name in the middle with the donation amount to the left of it and message a little bit smaller but readable under the amount and name
Anything else?:

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« Reply #220 on: October 03, 2015, 10:44:59 PM »
Requested by: freepoints

Donation:

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

CSS Code:
Code: [Select]
@font-face {
font-family: 'Segoe';
src:local('Segoe Print'),
    local('SegoePrint.ttf'),
    local('SegoePrint'),
    url('Segoe Print.ttf');
}

#donor-notification {
position: absolute;
left: 0px !important;
width: 590px !important;
height: 120px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/AxekDBl.png') !important;
}

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

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

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

#donor-notification .message {
position: absolute !important;
margin-top: 50px !important;
margin-left: 10px !important;
width: 550px !important;
font-size: 18px !important;
font-weight: normal !important;
font-family: Segoe !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0.8px;
-webkit-text-fill-color: white;
text-shadow: none !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: -15px !important;
margin-left: -200px !important;
width: 300px !important;
font-size: 24px !important;
font-weight: normal !important;
font-family: Segoe !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
-webkit-text-fill-color: white;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute !important;
margin-top: -15px !important;
margin-left: -220px !important;
width: 500px !important;
font-size: 26px !important;
font-weight: normal !important;
font-family: Segoe !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 1px;
-webkit-text-fill-color: white;
text-shadow: none !important;
}

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

CherokeeGuy

  • Youngling
  • *
  • Posts: 2
  • Karma: +0/-0
    • View Profile
  • Twitch Name: CherokeeGuy
Re: Custom Notification WorkShop
« Reply #221 on: October 14, 2015, 07:31:30 AM »
Follower Alert

Image Link: http://imgur.com/gallery/TEXs97C/new - No, it is not a panda. I's a Cherokee drawing. :P
Font Style/Link: The "New Follower" text: Grilled Cheese BTN Toasted, Follower name: Grilled Cheese BTN Cn
Font Color: Whatever works with below.
Any text fill/boarder?: I would not like the logo itself to be the background of either alert. Maybe some designs or lines resembling the logo? I'd prefer to have a transparent background.
Where do you want text located? (Follower Name): Under the "New Follower" text
Example (If applicable):

New Follower
(name of new follower)

Anything else?:


Donation Alert

Image Link: Same as above
Font Style/Link: Donater name and amount: Grilled Cheese BTN Toasted, donation message Grilled Cheese BTN Cn
Font Color: Black
Any text fill/boarder?: Also same as above
Currency Type: US Dollars ($)
Where do you want text located?(Donator Name, Donation Amount, Message) See Example.
Example (If applicable):

(name) has tipped ($amount)
(Message)

Anything else?: I apologize if I am too vague or picky. This is just off the top of my head. If you need any more details, please let me know.

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« Reply #222 on: October 14, 2015, 12:52:43 PM »
Make sure the fonts are installed on your computer. I also edited the image to be transparent.

Requested by: CherokeeGuy

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 900
Height: 1000

CSS Code:
Code: [Select]
@font-face {
font-family: 'GrilledCheese BTN';
src:local('GrilledCheese BTN Toasted'),
    local('GrilledCheese BTN Toasted.ttf'),
    local('GrilledCheese'),
    url('GrilledCheese BTN Toasted.ttf');
}

@font-face {
font-family: 'GrilledCheese BTN Cn';
src:local('GrilledCheese BTN Cn'),
    local('GrilledCheese BTN Cn.ttf'),
    local('GrilledCheese BTN'),
    url('GrilledCheese BTN Cn.ttf');
}

#follow-notification {
display: none;
position: absolute;
top: 200px !important;
width: 800px !important;
height: 800px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/itdOTLp.png') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: -180px !important;
margin-left: 200px !important;
width: 400px !important;
font-size: 60px !important;
font-weight: normal !important;
font-family: GrilledCheese BTN Cn !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-fill-color: White;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

.followname:before {
content: 'New Follower ' !important;
font-family: GrilledCheese BTN !important;
}

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




Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 900
Height: 1000

CSS Code:
Code: [Select]
@font-face {
font-family: 'GrilledCheese BTN';
src:local('GrilledCheese BTN Toasted'),
    local('GrilledCheese BTN Toasted.ttf'),
    local('GrilledCheese'),
    url('GrilledCheese BTN Toasted.ttf');
}

@font-face {
font-family: 'GrilledCheese BTN Cn';
src:local('GrilledCheese BTN Cn'),
    local('GrilledCheese BTN Cn.ttf'),
    local('GrilledCheese BTN'),
    url('GrilledCheese BTN Cn.ttf');
}

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

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

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

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

#donor-notification .message {
position: absolute !important;
margin-top: -100px !important;
margin-left: 110px !important;
width: 600px !important;
font-size: 34px !important;
font-weight: normal !important;
font-family: GrilledCheese BTN Cn !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: white;
text-shadow: none !important;
}
#donor-notification .amount {
position: absolute !important;
margin-top: -200px !important;
margin-left: 40px !important;
width: 200px !important;
font-size: 34px !important;
font-weight: normal !important;
font-family: GrilledCheese BTN !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: white;
text-shadow: none !important;
}
#donor-notification .donor {
position: absolute !important;
margin-top: -200px !important;
margin-left: -150px !important;
width: 400px !important;
font-size: 34px !important;
font-weight: normal !important;
font-family: GrilledCheese BTN !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: white;
text-shadow: none !important;
}

.donor:after {
content: ' has tipped ' !important;
}

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

CptFive3oh

  • Youngling
  • *
  • Posts: 3
  • Karma: +0/-0
    • View Profile
    • Inspiration Gaming
  • Twitch Name: CptFive3oh
Re: Custom Notification WorkShop
« Reply #223 on: October 16, 2015, 01:12:39 PM »
@RepentGamingTV If you wouldn't mind and do what you did on this donation notification on mine.
http://i.imgur.com/P7nsqrE.png
Thanks for the help with the new follower notification too! Awesome.




Requested by: Frexie

Follower:

Link: http://deepbot.tv/notifications/follownotification1.htm
Width: 1920
Height: 1080

CSS Code:
Code: [Select]
#follow-notification {
display: none;
position: absolute;
width: 1920px !important;
height: 1080px !important;
border-radius: 00px !important;
background-image: url('http://i.imgur.com/tBUQddc.png?1') !important;
background-repeat: no-repeat;
}
#follow-notification .followname {
position: absolute !important;
text-align: center !important;
margin-top: 480px !important;
margin-left: 780px !important;
width: 300px !important;
font-size: 60px !important;
font-weight: normal !important;
font-family: Impact !important;
color: #ffffff !important;
text-transform: capitalize;
-webkit-text-fill-color: black;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
}

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




Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1920
Height: 1080

CSS Code:
Code: [Select]
#donor-notification {
position: absolute;
left: 0px !important;
width: 1920px !important;
height: 1080px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/TalpYOd.png?1') !important;
overflow: hidden !important;
}

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

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

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

#donor-notification .message {
position: absolute !important;
margin-top: 520px !important;
margin-left: 600px !important;
width: 700px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: #C0C0C0 !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 450px !important;
margin-left: -150px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 450px !important;
margin-left: -130px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}

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



TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
Re: Custom Notification WorkShop
« Reply #224 on: October 16, 2015, 01:39:22 PM »
Requested by: CptFive3oh

Donation:

Link: http://deepbot.tv/notifications/donationnotification2.htm
Width: 1920
Height: 300

CSS Code:
Code: [Select]
#donor-notification {
position: absolute;
left: 0px !important;
width: 1920px !important;
height: 264px !important;
background-repeat: no-repeat;
background-size: contain !important;
background-image: url('http://i.imgur.com/P7nsqrE.png') !important;
overflow: hidden !important;
}

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

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

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

#donor-notification .message {
position: absolute !important;
margin-top: 150px !important;
margin-left: 600px !important;
width: 700px !important;
font-size: 30px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: #C0C0C0 !important;
-webkit-text-stroke-color: black;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}
#donor-notification .amount {
position: absolute !important;
margin-top: 60px !important;
margin-left: -130px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}
#donor-notification .donor {
position: absolute !important;
margin-top: 60px !important;
margin-left: -150px !important;
width: 300px !important;
font-size: 40px !important;
font-weight: normal !important;
font-family: Impact !important;
text-transform: capitalize;
color: white !important;
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: 0px;
-webkit-text-fill-color: black;
}

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