Adding 'New Sub' text to CSS

[Grumbul]

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?

[TheNumbLock]

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

[Grumbul]

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.

[TheNumbLock]

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;
}


[Grumbul]

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.