Resource icon

Input overlay plugin based on HTML

Overview Updates (2) Reviews (2) Discussion
A

abovnbyond

New Member
hello there!! I really like the freedom this input overlay provides altho its my very first time trying to learn html and I cant figure out why the saved copy doesnt save the colors and padding, I edited them from the inspect of chrome
( edited in chrome )
1664527685047.png


( this is how it shows up in obs )
1664527777047.png


Like I said I'm trying to learn html and maybe its not html that I need to edit , maybe I'm editing in the wrong place pls help!!
 
Zergatul

Zergatul

New Member
abovnbyond said:
hello there!! I really like the freedom this input overlay provides altho its my very first time trying to learn html and I cant figure out why the saved copy doesnt save the colors and padding, I edited them from the inspect of chrome
( edited in chrome )
View attachment 87111

( this is how it shows up in obs )
View attachment 87112

Like I said I'm trying to learn html and maybe its not html that I need to edit , maybe I'm editing in the wrong place pls help!!
Click to expand...
By default all changes you make in Chrome dev tools are not saved to disk. Chrome cannot know for sure where files are located on the disk. You can either setup Chrome to be able to save changes: https://developer.chrome.com/docs/devtools/workspaces/
Or edit files from some text editor
 
cowls192

cowls192

New Member
Can you just get rid of animation altogether? So annoying

For those who agree with my concern, at least for keyboard part, search this line from "default-keyboard.html":

div.released {
animation: key-released 0.0s ease-out; /* animation settings for key releasing */

and change [0.5s ease-out] to [0.0s ease-out], save then click Refresh button within OBS Studio.

Good riddance
 
Last edited:
cowls192

cowls192

New Member
cowls192 said:
Can you just get rid of animation altogether? So annoying

For those who agree with my concern, at least for keyboard part, search this line from "default-keyboard.html":

div.released {
animation: key-released 0.0s ease-out; /* animation settings for key releasing */

and change [0.5s ease-out] to [0.0s ease-out], save then click Refresh button within OBS Studio.

Good riddance
Click to expand...
I found the line for mouse clicks

Search this line from "default-mouse.html":

function addSvgReleased(element) {
animate.setAttribute('values', '1.0; 0.0');

and change ('values', '1.0; 0.0') to ('values', '0.0; 0.0'), save then click Refresh button within OBS Studio.

Good riddance
 
cowls192

cowls192

New Member
Also, if you are like me who want to keep buttons with background color when idle

Search this line from "default-keyboard.html":

div.space-button {

and paste this line

[background-color: black;]

as the first element so it looks like this:

div.space-button {
background-color: black;
border: 2px solid white;
border-radius: 10px;
color: white;
display: inline-block;
font-family: Calibri;
font-size: 20px;
line-height: 40px;
height: 40px;
text-align: center;
width: 40px;
}

You can replace [black] with color of your choice. Apparently, this edit is for space-button but for strange reason it affects all keys.

Now for mouse buttons,

First, restore the "default-mouse.html" file like when you first downloaded, if you prefer,

Search this line from "default-mouse.html":

const buttonReleasedColor = '#96CF13';

change [#96CF13] to [#000000];

Search this line from "default-mouse.html":

function addSvgReleased(element) {
animate.setAttribute('values', '1.0; 0.0');

and change ('values', '1.0; 0.0') to ('values', '1.0; 1.0'), save then click Refresh button within OBS Studio.

You can replace [#000000] with color of your choice. Apparently, each mouse button has to be clicked for the background to take effect, but at least its better than nothing.

Good riddance
 
You must log in or register to reply here.
Top