Custom css donation/follow/sub/resub notifications

Discussion in 'HTML/CSS Modifications' started by deedlit0011, Feb 28, 2017.

Tags:
  1. deedlit0011

    deedlit0011 New Member

    Good morning everyone.

    First I want to give some information before putting the problem down. I am a starter when it comes to CSS but have been reading a lot. These notifications did work on my older bot. With the help from the admins, moderators and Dev I have come to branebot.

    Because of the sheer amount of images the space on Branebot is kinda limited. Now I want to run the notifications through my own imgur. So this is what I do:

    1. I setup my OBS to get the CLR.
    2. Branebot is setup so the text is centered and no message given. No animations either.
    3. I add a css code to my CLR from OBS that contains (this is a css code written for a Donation):

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

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

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

    #donor-notification .message {
    position: absolute;
    margin-left: 35px !important;
    margin-top: 135px !important;
    float: left !important;
    height: 120px !important;
    padding-top: 0px !important;
    width: 460px !important;
    line-height: 24px !important;
    text-align: center !important;
    vertical-align: top !important;
    font-size: 22px !important;
    font-family: Earth Kid, Verdana !important;
    color: white !important;
    }
    #donor-notification .amount {
    position: absolute;
    margin-top: -70px !important;
    margin-left: 530px !important;
    width: 350px !important;
    padding-top: 0px !important;
    text-align: center !important;
    line-height: 26px !important;
    vertical-align: top !important;
    font-size: 52px !important;
    font-family: Algerian !important;
    text-shadow: 1px 1px 1px #000 !important;
    color: white !important;
    }
    #donor-notification .donor {
    position: absolute;
    margin-left: 35px !important;
    padding-top: 0px !important;
    margin-top: 73px !important;
    width: 460px !important;
    text-align: center !important;
    line-height: 28px !important;
    vertical-align: initial !important;
    font-size: 32px !important;
    font-family: Earth Kid, Algerian !important;
    text-shadow: 1px 1px 1px #000 !important;
    color: white !important;
    }

    Because I do not know the css code needed from branebot I am here to ask for help. What command does it us for all these?

    So hovering over the "Follow Alert" and all the other Onscreen alerts on the website gives me this:

    Follow Alerts: #follow
    Tip Alerts: #tip
    Host Alerts: #host
    GW Sub Alerts: #gwsub
    GW Resub Alerts: #gwresub

    And those are the onces i wish to use. So my question is: what are the commands to make this work?
     
  2. LadyMatrix

    LadyMatrix Member Bot Admins

    Replying to wrap this post up for other curious peeps that don't roam/use discord:

    deedlit asked on discord if there was just a blank alert system (like the now defunct TNotifier) so he could do his own CSS

    to which string replied " one of the next things i'm going to do after this upcoming release is to expose the html and css for all of the events "
     

Share This Page