How to style Twitch Chat text with CSS to change font color

I've been experimenting with setting up overlays for my stream using OBS, including a Twitch Chat overlay. I've been able to customize it a bit with filters and found a snippet that allows for a transparent background here.

My current issue is with the font color. Since I have a custom dark background with transparency, the black chat font isn't very visible. I'm looking to change it to white, but the snippet I used doesn't seem to do the trick. Just to clarify, I pasted the snippet directly into the CSS box on OBS.

Does anyone know how I can change the font color of the chat messages to white? If you need any more details or information, please feel free to ask!

Answer №1

To achieve a white background color, you must include the following code in your CSS file within the Body class selector.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Replicating DIV element with input field

Once again, I find myself stuck in my attempt to duplicate a DIV and its form elements using jQuery. Button: <div class="addNew" id="addSkill">Add Skill <i class="icon-plus"></i></div> This is the Div and contents that I want to ...

Prevent side-to-side scrolling using the translate property

With Bootstrap 4, I successfully implemented a functionality where clicking a button hides/shows the sidebar on desktop, allowing the main content area to occupy the remaining space: HTML: <a class="sidebar-toggle" href="#"><i class="fa fa-bars" ...

Text color-coded for specific hues

I am looking to change the color of a specific text within HTML/PHP/CSS/JS code. Here is an example of the text structure: @john please move the invite to the next week. My goal is to make the word "@john" appear in green, while keeping the rest of the ...

Tips on effectively centering a wide div

After much experimentation, this is what I came up with: (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en ...

Which attribute stores a value for jQuery droppable?

I am currently working on a project involving droppable/draggable elements where I want something to happen when both droppable divs have an element dropped into them. var dropbox = $('#dropbox').val(); var dropbox1 = $('#dropbox1&a ...

Rails 4: Issue with asset helper in production mode on Heroku preventing fingerprinted image assets from loading

My mind is spinning with frustration over this issue... I feel like I've exhausted every possible solution involving Sass files, ERB files, asset helpers, image helpers, and more. Can someone please offer some fresh ideas? Situation: In Rails apps, ...

Eliminate unnecessary white space in Bootstrap styling

While coding in bootstrap, I needed to move the button up towards the horizontal bar. see image here <div class="separator-breadcrumb border-top"></div> <div class="row"> <div class="col-12"> ...

Show a background picture while hovering on the main image

Is there a way to make the background image appear when hovering over the original image and disappear when no longer hovering? Below is a snippet of my HTML and CSS. Is there a straightforward CSS command to hide the original image or show the background ...

Retrieve main page elements from an additional page called PageSlide

I have implemented the jquery PageSlide plugin as a menu feature on my website. The plugin opens a separate page on the side of the main page to function as a menu. However, I am facing a challenge in accessing the main page's elements from this side ...

The CSS no-repeat background image property seems to be functioning properly only in the Firefox

.myclass{ background-image: url('http://image.flaticon.com/icons/svg/34/34164.svg'); background-repeat: no-repeat; background-size:contain; background-position: 1.5%; } Every row (tr) in my table is assigned the class myclass: <tr cl ...

Placing CSS elements in an absolute position over dynamic heights

I am facing a challenge with positioning two divs inside a parent div. My goal is to have the first div positioned absolutely at bottom:0 of the parent div, while the second div should always be on top of the first one. The issue arises because the height ...

Changing the background color of navigation items when the navbar in Bootstrap 4 adjusts for responsiveness

Hi there, I'm having an issue with my Bootstrap 4 navbar. When I test the responsiveness of my page, the background color of my nav-items disappears and only the text is visible. Can someone guide me on how to maintain the navbar color when I click th ...

Will the bootstrap carousel continue running in the background even if I hide it?

Currently, I have incorporated the twitter bootstrap carousel into my website with the following code: <div id="slider" class="carousel slide"> <!-- Wrapper for slides --> <div class="caro ...

What is the best method to incorporate Font Awesome icons into select options?

Is there a way to incorporate fontawesome icons into the user status indicators, such as active or inactive? I've been attempting it with the following code: <td> <select class="statusSelect" data id="{{$user->id}}&q ...

Maintaining a set margin with a width that can adjust relative to the parent container's size

Is there a way to achieve this layout using only CSS and HTML? I want to create 2 divs, one nested inside the other. The parent div should span 100% of the window width, while the child div should have fixed margins and fluid width filling the remaining s ...

dynamic display carousel

Utilizing technology Bootstrap CSS JS Django Python The Issue at Hand I am facing a challenge with declaring the container-fluid and ensuring that the carousel slide occupies the entire screen. However, I have noticed that there is some space remaining ...

Angular2 allows users to move text by dragging it with the cursor while holding down the mouse button

Is it feasible to implement a feature in Angular 2 where users can drag text along with the cursor while clicking the mouse? I am currently working on a web "painter" application and would like the ability for users to click on a textbox and move it around ...

JavaScript failing to accurately measure the length

Currently experiencing a Javascript issue where the length of an element is not displayed correctly when using .length, even though it shows up in Chrome console. Here is what it looks like in Chrome console <html xmlns="http://www.w3.o ...

Updating the style of a CSS element using Python Selenium

Is it possible to change the css element style using Python Selenium during automation to increase the height of the page? The structure of the element in the HTML is as shown below: <div style="overflow-y:scroll;overflow-x:hidden;height:150px;&quo ...

[meteor]Is it possible to place the combined CSS file at the bottom of the <head> tag?

I am currently working with meteor and vue. However, I am facing an issue where meteor automatically extracts CSS from the Vue component within the npm and places it in the head, leading to a conflict. Is there a way to avoid this conflict? Software Versi ...