How do I use OBS Software with browser source (Google Sheet) then remove cell background with CSS?
Background: I'm working with a small school who is interested in bringing live text into their athletic streams. The most cost effective yet easily editable solution for students is to use a Google Sheet. The solution is great, but now they've evolved to wanting the "white" in the cell background to become transparent.
Question: I'm working with OBS studio (https://obsproject.com/).
I use a local Chrome browser source going to a Google Sheet as one of my media layers. Works great.
The next thing I need to do is make the white background of a cell(s) to be transparent rather than the classic "white". I've attempted a ChromaKey filter within OBS on the browser source. Unfortunately the ChromaKey filter fails on the browser source.
Someone mentioned to use CSS and change the "white" to "transparent". Maybe simply inspect modify the CSS in the local Chrome browser and the data may update using the modifications. It's a long shot from my experience.
Is this something easily attainable to someone starting from scratch on the subject?
Question: I'm working with OBS studio (https://obsproject.com/).
I use a local Chrome browser source going to a Google Sheet as one of my media layers. Works great.
The next thing I need to do is make the white background of a cell(s) to be transparent rather than the classic "white". I've attempted a ChromaKey filter within OBS on the browser source. Unfortunately the ChromaKey filter fails on the browser source.
Someone mentioned to use CSS and change the "white" to "transparent". Maybe simply inspect modify the CSS in the local Chrome browser and the data may update using the modifications. It's a long shot from my experience.
Is this something easily attainable to someone starting from scratch on the subject?
ASKER
I'm still stumped on the project. I have not been able to solve it.
ASKER
Maybe just assistance to start can nudge me in the right direction.
Here is a inspect of the local browser.
The selected "Blue" cells is what I would like to make transparent. Fill Opacity is probably what I'm looking for, but the only thing I find in the CSS is this section of the filter under "Display"
Are these able to be editing somehow?
The cell text needs to remain visible and maybe the grid, but it could be removed too if possible.
Here is a inspect of the local browser.
The selected "Blue" cells is what I would like to make transparent. Fill Opacity is probably what I'm looking for, but the only thing I find in the CSS is this section of the filter under "Display"
Are these able to be editing somehow?
The cell text needs to remain visible and maybe the grid, but it could be removed too if possible.
ASKER
Still working toward the goal. I'm stuck on how to edit the CSS.
I'm open to any suggestions.
I'm open to any suggestions.
This is what it looks like for me when I select something.
Note that there are inline styles being applied with a background-color of rgb(160, 195, 255).
You could override this by using an important declaration such as
With the selection transparent important:
Note that there are inline styles being applied with a background-color of rgb(160, 195, 255).
You could override this by using an important declaration such as
.selection {background-color: transparent !important;}
With the selection transparent important:
ASKER
Thank you Brandon for the time and screenshot.
I'll look into stylus for sure.
The rgb(160, 195, 255) from the selection of cells is nice to know that it can be forced to be transparent.
I'm looking to remove just the white background from un-selected cells. (The selection from my earlier screen was to show a range, but removing the white from the entire sheet will work too.)
Could you note in the CSS where the white is being applied for the cell background?
*edited
I'll look into stylus for sure.
The rgb(160, 195, 255) from the selection of cells is nice to know that it can be forced to be transparent.
I'm looking to remove just the white background from un-selected cells. (The selection from my earlier screen was to show a range, but removing the white from the entire sheet will work too.)
Could you note in the CSS where the white is being applied for the cell background?
*edited
ASKER
It was pointed out that maybe adding some background detail would help.
What I'm doing in OBS is a simple text overlay.
(Layer 1): A standard RTSP camera feed.
(Layer 2): On top of the RTSP we overlay a browser source (google sheet) for the swimmers names.
(this image is the end goal, names pulled from Google Sheet and overlayed on the video stream)
My problem is using a browser source brings in the sheet's cell background with the text.
This creates an opaque block of white around the text and we can no longer see the swimmers under the text.
(this is what we currently have, names overlayed with blocky cell background)
The end result (goal) is the image which is a simple live stream that allows text manipulation on the fly.
The reason for using a Google Sheet is to allow for automated displaying of names while manipulating from a second device.
*edited
EagleEye-Names.jpg
What I'm doing in OBS is a simple text overlay.
(Layer 1): A standard RTSP camera feed.
(Layer 2): On top of the RTSP we overlay a browser source (google sheet) for the swimmers names.
(this image is the end goal, names pulled from Google Sheet and overlayed on the video stream)
My problem is using a browser source brings in the sheet's cell background with the text.
This creates an opaque block of white around the text and we can no longer see the swimmers under the text.
(this is what we currently have, names overlayed with blocky cell background)
The end result (goal) is the image which is a simple live stream that allows text manipulation on the fly.
The reason for using a Google Sheet is to allow for automated displaying of names while manipulating from a second device.
*edited
EagleEye-Names.jpg
I don't believe this is possible in Google Sheets. You should be able to use the streaming software to accomplish this https://obsproject.com/wiki/Sources-Guide#text-gdi.
You might try photo editing software such as Photoshop, gimp or online pixlr.com or even Illustrator. Either of these options allow you to export with a transparent background.
You might try photo editing software such as Photoshop, gimp or online pixlr.com or even Illustrator. Either of these options allow you to export with a transparent background.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Ok, so you just changed the background color? I was almost going to suggest that, something like a hot pink. Glad you have that worked out. Looks professional!
I am here to help you with your open question. Do you still need help? I have the ability to alert more experts if you still need help.
If you solved the problem on your own, would you please post the solution here in case others have the same problem?
If you need me to delete this question just say "Delete."
Thank you for using Experts Exchange.
Regards,
Kyle Santos
Customer Relations