Author Topic: [Guide] OBS CLR Browser Setup for Notifications  (Read 16152 times)

0 Members and 1 Guest are viewing this topic.

TheNumbLock

  • Advisor
  • Councilor
  • **
  • Posts: 4776
  • Karma: +137/-5
    • View Profile
  • Twitch Name: TheNumbLock
[Guide] OBS CLR Browser Setup for Notifications
« on: February 21, 2015, 05:39:01 PM »
    To get this feature to work, you first need to have OBS and the CLR Browser plug-ins installed. Relevant links are shown below.

Pre-requisites

*Note: When installing CLR Browser I would recommend disabling/turning off your anti-virus.


Installing CLR Browser for OBS

Installing OBS CLR plug-in is as easy as copy/pasting the plug-in files into the plug-ins folder of your OBS install.

32-bit plugins folder = C:\Program Files (x86)\OBS\plugins
64-bit plugins folder = C:\Program Files\OBS\plugins

All you need to do is put the DLL files and any folders that come with the plugin inside the correct directory according to the version of OBS that the plugin is compatible with.



Other Required software


You need to update your MS Visual C++ Run Times to 2013. Download using the following link:
http://www.microsoft.com/en-us/download/details.aspx?id=40784
Click download and choose the x86 or x64 accordingly.

You also need to upgrade (if you have not already) your .NET installation to 4.5.x:
OR



Setup

  • In DeepBot, you have to enable the CLR Browser notification in the notification options panel. This panel is available on the config tab on the bottom right.

  • Then go into OBS and under sources, right click, select Add > CLR Browser. Enter a custom name to identify this source and click OK.
  • Next up, add the URL for the notification page. By default, this should be:

Donation Notification (Below are current notification options available)

Follower Notification (Below are current notification options available)

Subscriber Notification (Below are current notification options available)

Other Options


Following on, add the Dimensions to the OBS CLR Browser on the first tab of the properties menu (If there are no dimensions listed, use the image that you are using as the dimensions). Default dimensions are listed above.



CSS

This is the part where you get to customize your notification to what you want. If you want someone else to do this part for you, please read this post: http://deepbot.deep.sg/forums/index.php?topic=2704.0 If you want examples, check out the Galleries here: http://deepbot.deep.sg/forums/index.php?board=13.0

Donation Alert

[/list]
Code: [Select]
#donor-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 800px;
    height: 365px;
    background-repeat: no-repeat;
    background-image: url('InsertYourImageLinkHere');
}


#donor-notification .date {
    margin-right: 40px;
    padding-top: 43px;
    text-align: right;
    line-height: 20px;
    vertical-align: top;
    font-size: 20px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: white;
}

#donor-notification .streamname {
    margin-left: 34px;
    padding-top: 28px;
    text-align: left;
    line-height: 26px;
    vertical-align: top;
    font-size: 24px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #FFF;
    color: black;
}

#donor-notification .message {
    margin-left: 38px;
    float: left;
    padding-top: 9px;
    width: 70%;
    line-height: 40px;
    text-align: left;
    vertical-align: top;
    font-size: 20px;
    font-family: Verdana;
    color: black;
}
#donor-notification .amount {
    float: right;
    width: 21%;
    padding-top: 17px;
    text-align: left;
    line-height: 26px;
    vertical-align: top;
    font-size: 30px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #fff;
    color: black;

#donor-notification .donor {
    margin-left: 520px;
    padding-top: 147px;
    text-align: left;
    line-height: 28px;
    vertical-align: middle;
    font-size: 28px;
    font-family: Comic Sans MS;
    text-shadow: 2px 2px 1px #fff;
    color: black;
}



Follower Notification

Code: [Select]
body {
    background-color: transparent;
    color: white;
}

#follow-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 100px;
  border-radius: 10px;
  background-image: url('InsertYourImageHere') !important;
  background-repeat: no-repeat;
}
#follow-notification .leftimage {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
  background-size: 100px;
  float: left;
  border-radius: 10px;
}
#follow-notification .followname {
  margin-left: 96px;
  padding-top: 15px;
  text-align: center;
  width: 385px;
  line-height: 55px;
  vertical-align: middle;
  font-size: 32px;
  font-family: Algerian;
  text-shadow: 2px 2px 1px #000;
  color: #ffffff;
}

#follow-notification .header {
  margin-right: 115px;
  padding-top: 10px;
  text-align: left;
  vertical-align: top;
  font-size: 26px;
  line-height: 26px;
  font-family: Algerian;
  text-shadow: 1px 1px 1px #FFFDE8;
  color: red;
  float: right;
  border-bottom: red;
  border-bottom-style: double;
}



Subscriber Notification

Code: [Select]
body {
    background-color: transparent;
    color: white;
}
#sub-notification {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 500px;
  height: 410px;
  background-repeat: no-repeat;
  background-image: url('InsertYourImageHere') !important;
  background-position-y: 30px;
}
#sub-notification .subname {
  margin-left: 55px;
  padding-top: 100px;
  text-align: left;
  width: 385px;
  line-height: 45px;
  vertical-align: middle;
  font-size: 32px;
  font-family: Algerian;
  text-shadow: 2px 2px 1px #000;
  color: #ffffff;
}
#sub-notification .streamname {
  margin-right: 40px;
  padding-top: 20px;
  text-align: right;
  line-height: 45px;
  vertical-align: top;
  font-size: 32px;
  font-family: Algerian;
  text-shadow: 2px 2px 1px #000;
  color: transparent;
  text-shadow: 0 0 3px rgba(255,255,255,1);
}
#sub-notification .header {
  margin-right: 0px;
  padding-top: 10px;
  text-align: center;
  vertical-align: top;
  font-size: 32px;
  line-height: 26px;
  font-family: Algerian;
  text-shadow: 2px 2px 1px #CBC2FF;
  color: black;
}



OBS Chat Overlay

Code: [Select]
::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    min-width: 18px;
    width: expression((document.body.clientWidth < $width) ? "18px":"auto");
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}

.turbo {
    background-color: #6441a5;
    background-image: url(http://chat-badges.s3.amazonaws.com/turbo.png);
}

.moderator {
    background-color: #009900;
    background-image: url(http://chat-badges.s3.amazonaws.com/mod.png);
}

.broadcaster {
    background-color: #000000;
    background-image: url(http://chat-badges.s3.amazonaws.com/broadcaster.png);
}

.staff {

    background-image: url(http://chat-badges.s3.amazonaws.com/staff.png);
}

.admin {

    background-image: url(http://chat-badges.s3.amazonaws.com/admin.png);
}
.creator {

    background-image: url(http://deepbot.deep.sg/images/obschat/creator.png);
}
.vipbronze {

    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {

    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {

    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {

}
#chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}

Common Problems/Issues

Problem: I get Scrolls Bars when I preview the image on OBS.
Fix: Adjust the Dimensions on CLR Browser General Tab by 100 or so on.
« Last Edit: October 04, 2015, 11:05:14 AM by RepentGamingTV »
Old Name: RepentGamingTV
Twitch: Here

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