[Guide] OBS CLR Browser Setup for Notifications

[TheNumbLock]

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.

• OBS - http://obsproject.com/
• CLR Browser Plugin - https://obsproject.com/forum/resources/clr-browser-source-plugin.22/
• Latest CLR Browser 32bit - http://catchexception.org/tmp/CLRBrowserSourcePlugin3.7z
• Latest CLR Browser 64bit - http://catchexception.org/tmp/CLRBrowserSourcePlugin64Mark2.7z

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:

• Web install: http://www.microsoft.com/en-us/download/details.aspx?id=42643

OR

• Offline install: http://www.microsoft.com/en-us/download/details.aspx?id=42642

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)

• Default Image: http://deepbot.tv/notifications/donationnotification.htm (Dimensions 800x370)
• Custom CSS/Image: http://deepbot.tv/notifications/donationnotification2.htm

Follower Notification (Below are current notification options available)

• Default Image: http://deepbot.tv/notifications/follownotification.htm?dur=10000 (Dimensions 500x100) ''Dur in the link indicates the duration the notification should stay on.''
• Default Image 2: http://deepbot.tv/notifications/follownotification1.htm?dur=10000 (Dimensions 500x100) ''Dur in the link indicates the duration the notification should stay on.''
• Custom CSS/Image: http://deepbot.tv/notifications/follownotification1.htm?dur=10000 ''Dur in the link indicates the duration the notification should stay on.''

Subscriber Notification (Below are current notification options available)

• Default Image: http://deepbot.tv/notifications/subnotification.htm (Dimensions 500x410)
• Custom CSS/Image: http://deepbot.tv/notifications/subnotification1.htm

Other Options

• The OBS Chat overlay : http://deepbot.tv/notifications/OBSChatv8.htm?fade=30 (Enable External Chat on the Chat Tab)
• Drag Race on Screen Display : http://deepbot.tv/widgets/racetrack.htm (Dimensions 900x650)
• Sub Target Tracker : http://deepbot.tv/widgets/subtracker.htm (Dimensions 300x150)
• Donation Target Tracker Vertical: http://deepbot.tv/widgets/donationtracker.htm (Dimensions 300x300)
• Donation Target Tracker Horizontal : http://deepbot.tv/widgets/donationtracker.htm?mode=2

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.