Deep Bot - Twitch Streamer Assistant

Deep Bot => Custom Notifications => Topic started by: Weeping_Anjel on March 18, 2015, 05:40:10 PM

Title: CSS for Sub notification
Post by: Weeping_Anjel on March 18, 2015, 05:40:10 PM

Hello!

Trying to get a bit of help creating CSS for a custom sub notification using a .Gif

Gif - http://imgur.com/U9sGnD7
Text Color = #CC0000 Dark Red
Resolution 480x270 I think, or whatever the gif turns out to be
Text would be located near the bottom and centered. I would like it to contain [Username] Just Subscribed! in a Bold (Any basic font). Font should be large enough that it is easily readible when scaled down in OBS, but not too large so someone with a lengthy username will cause issues during the animation, or the GIF image is obstructed.

Thanks alot!

Weeping_Anjel

Title: Re: CSS for Sub notification
Post by: TheNumbLock on March 19, 2015, 04:32:45 AM

Requested by:  Weeping_Anjel

Subscriber:

Link: http://deepbot.tv/notifications/subnotification1.htm
Width: 550
Height: 350

CSS Code:

Code: [Select]

#sub-notification {
  display: none;
  position: absolute;
  width: 480px !important;
  height: 270px !important;
  background-repeat: no-repeat;
  background-image: url('http://i.imgur.com/U9sGnD7.gif') !important;
}
#sub-notification .subname {
position: absolute !important;
text-align: left !important;
margin-top: 30px !important;
margin-left: 70px !important;
margin-right: 200px !important;
width: 300px !important;
font-size: 28px !important;
font-weight: bold !important;
font-family: arial bold !important;
color: #CC0000 !important;
-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000000;
}

.subname:after {
content: " just subscribed! " ;
position: absolute !important;
text-align: left !important;
margin-top: 0px !important;
margin-left: 10px !important;
margin-right: 0px !important;
width: 300px !important;
font-size: 26px !important;
font-weight: bold !important;
font-family: arial bold !important;
color: #CC0000 !important;
-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000000;
}

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

(http://puu.sh/gFODO/187c454d76.jpg)