Attempting to create a new Ollny lights remote.

I have simplified the setup to one button until I can get it working. JS is:

function getRemoteStyle_ollnyremote(config) { const template = config.remote_template; const base_url =/hacsfiles/generic-remote-control-card/remotes/${template}`;

return ` ha-card{ background-color:transparent; box-shadow:var(--paper-material-elevation-0_-_box-shadow); } body { margin: 0; padding: 20px; font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif }

.container { width: 360px; margin: 0 auto }

remote-control-ollnyremote {

position: relative;
background: url(${base_url}/ollnyremote.png) no-repeat;
width: 208px;
height: 345px

}

remote-control-ollnyremote h2,

remote-control-ollnyremote span {

position: absolute;
left: 5000px

}

remote-control-ollnyremote ul {

margin: 0;
padding: 0;
list-style-type: none

}

on a {

position: absolute;
disrwd: block

}

remote-control-ollnyremote li#on a {

left: 43px;
top: 54px;
width: 37px;
height: 38px;   
background: url(${base_url}/on.png) no-repeat

}

remote-control-ollnyremote li#on a:hover {

background: url(${base_url}/on_over.png) no-repeat 0px 0px

}
`; }

function getRemoteHtml_ollnyremote(config){ const template = config.remote_template; return `

${config.name}

Main navigation

; }

The card yaml is based on the firesticktv remote, as is the js, and I have implemented the firestick successfully in a card just to ensure I can confirm that the basic setup works, and it does. It is just my cut down version that is not right.

type: custom:generic-remote-control-card name: Ollny Remote remote_template: ollnyremote buttons: 'on': call: script.ollny_button data: button_pressed: '{{ input_text.ollny_on_text }}' The ollnyremote.png and on.png file sizes match the settings in the js file but its still looks wrong in the dashboard.

2023-01-05