Deep Bot - Twitch Streamer Assistant

Deep Bot => Custom Notifications => Topic started by: Grumbul on January 16, 2017, 01:17:27 AM

Title: Adding 'New Sub' text to CSS
Post by: Grumbul on January 16, 2017, 01:17:27 AM

Hi folks,

I need to add the text 'New Sub' when a new subscriber joins to the following CSS:

Code: [Select]

body {
    background-color: transparent;
    color: white;
}
#sub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 575px;
    height: 140px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: url('http://i.imgur.com/04ZDn79.png');
}
#resub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 575px;
    height: 140px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: url('http://i.imgur.com/04ZDn79.png');
}
.subname {
margin-left: 65px;
  padding-top: 60px;
  width: 455px;
  text-align: center;
  line-height: 14px;
  font-size: 34px !important;
  font-family: Calbri !important;
  font-weight: bold !important;
  text-shadow: 2px 2px 1px #000 !important;
  text-transform: lowercase;
  color: white !important;
}
.months {
  position: absolute;
  top: 48px;
  margin-left: 10px;
  width: 165px;
  text-align: center;
  line-height: 14px;
  font-size: 28px !important;
  font-family: Calbri !important;
  font-weight: bold !important;
  text-shadow: 2px 2px 1px #000 !important;
  text-transform: lowercase;
  color: white !important;
}

.months::after {
  content: " Months!";
}
.badge {
    position: absolute;
    top: 50px;
    margin-left: 420px;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: 25px 25px;
    width: 30px;
    height: 30px;
    -webkit-animation: rot 3s infinite linear;
}
.msg {
    position: absolute;
    top: 110px;
    margin-left: 30px;
    width: 90%;
    text-align: center;
    font-size: 28px;
    font-family: 'Squada One', cursive;
    text-shadow: 2px 2px 1px #000;
    color: #FFF;
}
@-webkit-keyframes rot {
    from {
        -webkit-transform: rotate(0deg) translate(-30px) rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg) translate(-30px) rotate(-360deg);
    }
}

Anyone able to help at all?

Title: Re: Adding 'New Sub' text to CSS
Post by: TheNumbLock on January 17, 2017, 10:02:35 AM

You would make two images, one for subs, and one for resubs.

Title: Re: Adding 'New Sub' text to CSS
Post by: Grumbul on January 18, 2017, 04:29:06 PM

Hi Repent,

You've misunderstood me.

As with the GameWisp code here:

Code: [Select]

body {
  background-color: transparent;
  color: white;
}
 
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 575px;
  height: 140px;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://i.imgur.com/1iSR1WK.png);
}
 
#sub-notification .subname {
  margin-left: 65px;
  padding-top: 60px;
  width: 455px;
  text-align: center;
  line-height: 14px;
  font-size: 34px !important;
  font-family: Calbri !important;
  font-weight: bold !important;
  text-shadow: 2px 2px 1px #000 !important;
  text-transform: lowercase;
  color: white !important;
}
 
#sub-notification .subtier {
  position: absolute;
  top: 53px;
  margin-left: 45px;
  width: 380px;
  text-align: left;
  line-height: 14px;
  font-size: 1px;
  font-family: Verdana;
  text-shadow: 2px 2px 1px #F00;
  color: ##FF0000;
}
 
#sub-notification .submonths {
  position: absolute;
  top: 48px;
  margin-left: 10px;
  width: 165px;
  text-align: center;
  line-height: 14px;
  font-size: 28px !important;
  font-family: Calbri !important;
  font-weight: bold !important;
  text-shadow: 2px 2px 1px #000 !important;
  text-transform: lowercase;
  color: white !important;
}
 
#sub-notification .newsubmsg {
  position: absolute;
  top: 48px;
  margin-left: 10px;
  width: 165px;
  text-align: center;
  line-height: 14px;
  font-size: 28px !important;
  font-family: Calbri !important;
  font-weight: bold !important;
  text-shadow: 2px 2px 1px #000 !important;
  text-transform: lowercase;
  color: white !important;
}
 
#sub-notification .submonths::after {
  content: " Months!";
}
 
#sub-notification .newsubmsg::after {
  content: "New Sub!";
}
 
#sub-notification .subamount {
  font-family: 'Vollkorn', serif;
  font-size: 28px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: bold;
  color: red;
  border: 7px solid rgba(255, 0, 0, 0.5);
  float: left;
  padding: 10px 7px;
  border-radius: 10px;
  opacity: 0.8;
  -webkit-transform: rotate(-25deg);
  -o-transform: rotate(-25deg);
  -moz-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  position: absolute;
  top: 20%;
  left: 80%;
}
....all I want is for the TEXT 'New Sub!' to come up when it is a NEW subscriber.

As it stands if it is a NEW sub the image comes up with the player name etc. - I also want the TEXT to come up.

This works for GameWisp so I just need the CSS code for the Normal Sub window.

Title: Re: Adding 'New Sub' text to CSS
Post by: TheNumbLock on January 19, 2017, 12:12:36 AM

Gamewisp CSS is different because you only get one image to use for both subs and resubs, that is why the .newsubmsg CSS is in there. While Partner Sub notifications you have two image places:

New Sub:

Code: [Select]

#sub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 575px;
    height: 140px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: url('http://i.imgur.com/04ZDn79.png');
}

and Resub:

Code: [Select]

#resub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 575px;
    height: 140px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: url('http://i.imgur.com/04ZDn79.png');
}

Gamewisp:

Code: [Select]

#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 575px;
  height: 140px;
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-image: url(http://i.imgur.com/1iSR1WK.png);
}


I am not 100% sure if this would work, but you could try:

Code: [Select]

#resub-notification:before {
content: 'New Sub ' !important;
}


Title: Re: Adding 'New Sub' text to CSS
Post by: Grumbul on January 21, 2017, 04:23:46 PM

Hi Repent,

Really appreciate the help on this. I could not see the wood for the trees here! So simple to resolve.

My honest thanks for all the support recently mate.