Question / Help Ideas for twitch.tv chat on-screen

P

podonnell

Member
I've got the top right of my screen dedicated to displaying a section of my second monitor -- specifically, the area where the twitch.tv chat box is. I've used a chroma key to disable the background, however it is displaying with a nasty white shadow under the black text. It only looks good on a white background(see screenshot).

SKTOM.jpg


Above you can see on the left half my garbled text looks decent, but the right side is a darker background and it is very hard to read.

I'm looking for any ideas on how to make the chat easier to read, without adding a background (I don't want to block my stream).

Thanks for any ideas you can provide! Absolutely love the software, is there anywhere I can donate?
 
M

Muf

Forum Moderator
Another thing you could do is make your IRC client log to a text file, and add a text source from that file. The text source will auto-update immediately after the IRC client writes a new line.

EDIT: I just realised this won't work properly, as log files are FIFO and won't fit after a few lines :/
 
Frostshocker

Frostshocker

Member
Muf said:
Another thing you could do is make your IRC client log to a text file, and add a text source from that file. The text source will auto-update immediately after the IRC client writes a new line.
Click to expand...
Wow i never actually thought of that, might give that a quick try.
 
P

podonnell

Member
Frostshocker said:
This tutorial (It's for xsplit but can be applied to OBS very easily) It will still have a faint outline but it will look a lot better
Click to expand...

Ah, thank you! I had actually seen that tutorial but thought it was specific to xSplit. I'll read through it and see if I can figure out how to apply that to OBS.

That screenshot looks great, just what I'm looking for. Thank you!
 
R

Raini

New Member
I used to use the XChat method, but unfortunately it does not delete the messages of users who are Timed Out or Banned. I get a lot of derogatory remarks when I stream because of the way that my voice sounds, so it is important to me that any action my Moderators take in chat also affects the chat being displayed on my stream video. It defeats the purpose of having Moderators if you have to type /clear in XChat whenever a Moderator action is taken.

The best method I've found for doing this is to rely on the Twitch.tv chat, but edit the CSS directly using a Firefox Add-on called Web Developer. I pop out the chat on my Twitch.tv page, right-click inside the window, and go to Web Developer > CSS > Add User Style Sheet... to add an edited version of the Twitch.tv stylesheet that I made.

Here is how the chat looks on my stream (it is larger than it normally looks for the sake of this preview):


Click to see the un-cropped image.

If you do not want to use my stylesheet, or prefer to edit the existing Twitch.tv stylesheet yourself, just look for the #chat_lines CSS. You'll want to change the color to white, or whatever color you prefer for the chat text, and the background-color to an appropriate offset to be made transparent. Many people use black, but I prefer to use a dark tan color (#3E3600) instead since it rarely corresponds to the colors used in nametags or smileys.

Once the chat's CSS has been edited, I create a new Scene within OBS, and add Software Capture. I use Sub-Region to capture the inner part of the chat window and check Use Color Key. Then I click Select to get the eyedropper tool and use that to click on the background of the chat window to make it transparent within OBS.

I hope someone finds this useful. =)
 
P

podonnell

Member
Another great method, thanks!

Has anyone found a way to clear chat WITHOUT going into these programs and using the clear command? I'd love if I could clear the chat after a period of time has gone by, to prevent stale text from staying on-screen too long.
 
R

Raini

New Member
I don't think that XChat supports that option natively. This is probably a really half-assed way to do it, but one method I've used in the past to automatically enter commands like that at certain intervals is AutoHotkey. It would take a little scripting on your part, but it would probably be the simplest method to get working with any IRC chat client.
 
M

Muf

Forum Moderator
Raini said:
The best method I've found for doing this is to rely on the Twitch.tv chat, but edit the CSS directly using a Firefox Add-on called Web Developer. I pop out the chat on my Twitch.tv page, right-click inside the window, and go to Web Developer > CSS > Add User Style Sheet... to add an edited version of the Twitch.tv stylesheet that I made.
Click to expand...
Neat idea! Looking at the screenshot, I would set the icons for block/timeout to display:none and set the moderator icon to a larger size. Other than that it looks really good.
 
R

Raini

New Member
Muf said:
Raini said:
The best method I've found for doing this is to rely on the Twitch.tv chat, but edit the CSS directly using a Firefox Add-on called Web Developer. I pop out the chat on my Twitch.tv page, right-click inside the window, and go to Web Developer > CSS > Add User Style Sheet... to add an edited version of the Twitch.tv stylesheet that I made.
Click to expand...
Neat idea! Looking at the screenshot, I would set the icons for block/timeout to display:none and set the moderator icon to a larger size. Other than that it looks really good.
Click to expand...

I've been trying to find a way to do this, but I can't find the code for the icons in this specific CSS file that I am altering. I think it might be in a separate CSS referenced by this CSS. I have been wanting to remove these icons for a long time and possibly even replace emoticons with my own (larger) versions. Any help/suggestions would be very much appreciated!
 
M

Muf

Forum Moderator
Raini said:
I've been trying to find a way to do this, but I can't find the code for the icons in this specific CSS file that I am altering. I think it might be in a separate CSS referenced by this CSS. I have been wanting to remove these icons for a long time and possibly even replace emoticons with my own (larger) versions. Any help/suggestions would be very much appreciated!
Click to expand...
The mod icon is a span with class "tag mod", the streamer icon is a span with class "tag broadcaster", and the block/timeout buttons are an img inside an a with class "mod_button", specifically "mod_button timeout" and "mod_button ban".
 
R

Raini

New Member
Wow, thanks! I just added this to my CSS and it removed the timeout/ban icons:

Code: 
.mod_button { 
 display: none;
 }

I also increased the size of rank icons, but I can't figure out how to center the images inside.

chat-icons.png
 
R

Raini

New Member
You guys are awesome! This is how it looks now all prettied up and centered. Thank you so much for the help!

chat-centered.png


Updated CSS available for download here:

http://faq.nerdorable.net/misc/chat.css

Now if only I could figure out how to replace whatever CSS controls emoticons so that I can replace them with larger versions of my own. That's the only drawback of this, since the emotes look tiny compared to the text.
 
W

warcode

New Member
The emoticons are loaded dynamically in the code, and gets their css generated at that time.

Each emoticon gets a class set by ".emo-NN", where NN is simply a numerical counter starting at 1.

This will change the size of all possible emoticons, but of course won't change their quality.
Code: 
span[class*=' emo'],div[class^='emo'] {
    width: 50px !important;
    height: 50px !important;
    background-size: 50px 50px;
}


//example css class for reference
.emo-NN {
background-image: ;
height: Ypx;
width: Ypx;
}

To change individual sizes you would have to pick out which ones you want to change and set up a .emo-1, .emo-2, etc list.

A full list real-world example:
http://pastebin.com/LasVaHhU

Which seems to be a reversed:
https://api.twitch.tv/kraken/chat/channelname/emoticons




For the people who are interested in digging around in non-whitespace code, this can be found in the javascript at 'getEmoticonsForChat' and 'generate_emoticon_css'.
 
R

Raini

New Member
warcode said:
The emoticons are loaded dynamically in the code, and gets their css generated at that time.

[...]

A full list real-world example:
http://pastebin.com/LasVaHhU

Which seems to be a reversed:
https://api.twitch.tv/kraken/chat/channelname/emoticons
Click to expand...

Thank you for all of the help warcode! Do you know if I need to replace the emoticons CSS too? I'm trying to use this in my chat.css at the moment, but it isn't working:

Code: 
.emo-50 {
background-image: url('http://nerdorable.net/twitch/emotes/kappa.png');
width: 30px;
height: 40px;
vertical-align: middle;
}

The resizing code you gave me works great, if only I could also replace a few select emoticons with my own.

Jim said:
But it looks so good!
Click to expand...

Thank you! Everyone in this thread has been a tremendous help improving it. =)
 
You must log in or register to reply here.
Top