Hi there

I tried creating a remote for my Nvidia Shield. I used the Mibox as a template. Aside from the remote not showing up in HA, the icons for the remote don't look like the actual remote buttons. It looks like they've been cut off. Here is some code - I know I'm missing code for some buttons. I'm a noob at this so I'm learning as I go along.

function getRemoteStyle_nvidia_shield(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: 224px; margin: 0 auto }

remote-control-nvidia_shield {

position: relative;
background: url(${base_url}/remote.png) no-repeat;
width: 153px;
height: 608px

}

remote-control-nvidia_shield h2,

remote-control-nvidia_shield span {

position: absolute;
left: -5000px

}

remote-control-nvidia_shield ul {

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

}

power a,

volumeup a,

volumedown a,

clickleft a,

clickright a,

mute a,

microphone a,

info a,

home a,

back a,

top a,

bottom a,

ok a {

position: absolute;
display: block

}

remote-control-nvidia_shield li#power a {

left: 17px;
top: 37px;
width: 29px;
height: 30px;
background: url(${base_url}/power.png) no-repeat

}

remote-control-nvidia_shield li#power a:hover {

background-image: url(${base_url}/power.png);
background-repeat: no-repeat;
background-position: 0 0px

}

remote-control-nvidia_shield li#microphone a {

left: 119px;
top: 250px;
width: 28px;
height: 29px;
background: url(${base_url}/voice_search.png) no-repeat

}

remote-control-nvidia_shield li#microphone a:hover {

background-image: url(${base_url}/voice_search.png);
background-repeat: no-repeat;
background-position: 0 0px

}

remote-control-nvidia_shield li#volumeup a {

left: 69px;
top: 299px;
width: 29px;
height: 30px;
background: url(${base_url}/volume_up.png) no-repeat

}

remote-control-nvidia_shield li#volumeup a:hover {

background-image: url(${base_url}/volume_up.png);
background-repeat: no-repeat;
background-position: 0 0px

}

remote-control-nvidia_shield li#volumedown a {

left: 69px;
top: 359px;
width: 29px;
height: 30px;
background: url(${base_url}/volume_down.png) no-repeat

}

remote-control-nvidia_shield li#volumedown a:hover {

background-image: url(${base_url}/volume_down.png);
background-repeat: no-repeat;
background-position: 0 0px

}

remote-control-nvidia_shield li#clickleft a {

left: 21px;
top: 137px;
width: 29px;
height: 29px;
background: url(${base_url}/left.png) no-repeat

}

remote-control-nvidia_shield li#clickleft a:hover {

background-image: url(${base_url}/left.png);
background-repeat: no-repeat;
background-position: 0 0px

}

remote-control-nvidia_shield li#clickright a {

left: 116px;
top: 138px;
width: 29px;
height: 29px;
background: url(${base_url}/right.png) no-repeat

}

remote-control-nvidia_shield li#clickright a:hover {

background-image: url(${base_url}/right.png);
background-repeat: no-repeat;
background-position: 0 0px

}

remote-control-nvidia_shield li#source a:hover {

background-image: url(${base_url}/remote-sitemap.jpg);
background-repeat: no-repeat;
background-position: 0 -37px

}

remote-control-nvidia_shield li#home a {

width: 29px;
height: 30px;
left: 69px;
top: 248px;
background: url(${base_url}/home.png) no-repeat 0px 0

}

remote-control-nvidia_shield li#back a {

width: 28px;
height: 29px;   
left: 17px; 
top: 249px;
background: url(${base_url}/left.png) no-repeat 0px 0px

}

remote-control-nvidia_shield li#right a {

width: 23px;
height: 59px;
left: 139px;
top: 365px;
background: url(${base_url}/remote-circle3.png) no-repeat -98px -53px

}

remote-control-nvidia_shield li#top a {

width: 29px;
height: 29px;
left: 69px;
top: 93px;
background: url(${base_url}/up.png) no-repeat 0px 0px

}

remote-control-nvidia_shield li#bottom a {

width: 29px;
height: 29px;
left: 68px;
top: 190px;
background: url(${base_url}/down.png) no-repeat 0px 0px

}

remote-control-nvidia_shield li#ok a {

width: 29px;
height: 29px;
left: 68px;
top: 141px;
background: url(${base_url}/select.png) no-repeat 0px 0px

}

remote-control-nvidia_shield li#home a:hover {

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

}

remote-control-nvidia_shield li#back a:hover {

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

}

remote-control-nvidia_shield li#top a:hover {

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

}

remote-control-nvidia_shield li#bottom a:hover {

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

}

remote-control-nvidia_shield li#ok a:hover {

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

}

`; }

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

${config.name}

Main navigation