Free Use Nightbot AutoDJ with Mac Easy

I wanted to use the AutoDJ feature on nightbot, but I'm on a mac. Sure people can request the song, but I wanted to show them the song title on my stream. In this tutorial we'll be tweaking the css and javascript on the AutoDJ page, then using window capture to show on our stream.

Get google chrome and these extensions:

Stylebot
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha

Custom JavaScript for websites
https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija

Once download you'll see a CSS and CJS icon on the chrome bar next to the 3 lines on the right, visit the AutoDJ page on nightbot.
https://www.nightbot.tv/autodj
MUST BE ON THAT PAGE

Then click the CSS button then choose options, click backup then import styles. Copy and paste this:

{"www.nightbot.tv":{"_enabled":true,"_rules":{"div.box-content":{"background-color":"#2c2c2c"},"#currentTitle":{"color":"#ffffff","width":"500px","text-wrap":"none","overflow":"hidden","height":"20px"},"#currentUser":{"color":"#adadad","text-align":"right"}}}}

Now click the CJS icon on your Chrome bar, choose jquery from the dropdown then copy and paste this:

$('#currentTitle').wrapAll('<div class="title-box">');

var marquee = $('.title-box');
marquee.each(function() {
var mar = $(this),indent = mar.width();
mar.marquee = function() {
indent--;
mar.css('text-indent',indent);
if (indent < -1 * mar.children('#currentTitle').width()) {
indent = mar.width();
}
};
mar.data('interval',setInterval(mar.marquee,1000/70));
});

That's it! You'll now notice the the title is moving right to left. You can now capture that part of the webpage using OBS.

What did you do to create this?

In a nutshell: I added a div around the title of the the song so could target it easier. Then I styled it to look how I wanted. Then I used some jquery to make it scroll. If you want to change the colors, you can select the element and then change it, or ask me in the comments :)

Hope this helps!

If this helped you I'd appreciate a follow on twitch: http://www.twitch.tv/chrisspeaketh