I’m building my first custom card and started with with example card from the custom card docs. I’m able to get my card to display a bunch of sensors, but I can’t figure out how to style the output. No matter what I’ve tried, I just get a list of the sensor data. Here’s the current card code:
class SimpleWeatherClock extends HTMLElement {
// Whenever the state changes, a new `hass` object is set. Use this to
// update your content.
set hass(hass) {
// Initialize the content if it's not there yet.
if (!this.cDiv) {
const style = document.createElement('style');
style.innerText = `
ha-card {
display: flex;
width: 100%;
height: 100vh;
border-width: 0px;
padding: 0px;
background-color: grey;
justify-content: center;
}
.card-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"clock clock clock"
"info info info";
width: 800px;
height: 480px;
background-color: #000000;
font-family: 'IBM Plex Mono', serif;
}
.clock {
grid-area: clock;
justify-self: center;
align-self: start;
color: #dddddd;
font-size: 260px;
margin: -50px;
}
.info {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"info-top info-top info-top"
"info-bottom info-bottom info-bottom";
grid-area: info;
padding-left: 18px;
padding-right: 18px;
margin-top: -10px;
}
.info-top {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"info-top-left info-top-center info-top-right";
grid-area: info-top;
}
.info-top-left {
grid-area: info-top-left;
justify-self: start;
align-self: end;
color: #008001;
font-size: 85px;
}
.info-top-center {
grid-area: info-top-center;
justify-self: center;
align-self: end;
color: #fe0000;
font-size: 85px;
}
.info-top-right {
grid-area: info-top-right;
justify-self: end;
align-self: end;
color: #bdb76b;
font-size: 85px;
}
.info-bottom {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"info-bottom-left info-bottom-center info-bottom-right";
grid-area: info-bottom;
margin-top: -20px;
}
.info-bottom-left {
grid-area: info-bottom-left;
justify-self: start;
align-self: start;
color: #008001;
font-size: 85px;
}
.info-bottom-center {
grid-area: info-bottom-center;
justify-self: center;
align-self: start;
color: #1f90ff;
font-size: 85px;
}
.info-bottom-right {
grid-area: info-bottom-right;
justify-self: end;
align-self: start;
color: #bdb76b;
font-size: 85px;
}
small {
opacity: 0.7;
}
`;
document.head.appendChild(style);
this.innerHTML = `
<ha-card>
<div class="card-content">
<div class="clock"></div>
<div class="info">
<div class="info-top">
<div class="info-top-left"></div>
<div class="info-top-center"></div>
<div class="info-top-right"></div>
</div>
<div class="info-bottom">
<div class="info-bottom-left"></div>
<div class="info-bottom-center"></div>
<div class="info-bottom-right"></div>
</div>
</div>
</ha-card>
`;
this.cDiv = this.querySelector('.clock');
this.tlDiv = this.querySelector('.info-top-left');
this.tcDiv = this.querySelector('.info-top-center');
this.trDiv = this.querySelector('.info-top-right');
this.blDiv = this.querySelector('.info-bottom-left');
this.bcDiv = this.querySelector('.info-bottom-center');
this.brDiv = this.querySelector('.info-bottom-right');
}
const c = hass.states[this.config.clock];
const tl = hass.states[this.config.topleft];
const tc = hass.states[this.config.topcenter];
const tr = hass.states[this.config.topright];
const bl = hass.states[this.config.bottomleft];
const bc = hass.states[this.config.bottomcenter];
const br = hass.states[this.config.bottomright];
this.cDiv.innerHTML = `${c.state}`;
this.tlDiv.innerHTML = `${tl.state}`;
this.tcDiv.innerHTML = `${tc.state}`;
this.trDiv.innerHTML = `${tr.state}`;
this.blDiv.innerHTML = `${bl.state}`;
this.bcDiv.innerHTML = `${bc.state}`;
this.brDiv.innerHTML = `${br.state}`;
}
// The user supplied configuration. Throw an exception and Home Assistant
// will render an error card.
setConfig(config) {
if (!config.clock) {
throw new Error('Please define clock entity');
}
if (!config.topleft) {
throw new Error('Please define top left entity');
}
if (!config.topcenter) {
throw new Error('Please define top center entity');
}
if (!config.topright) {
throw new Error('Please define top right entity');
}
if (!config.bottomleft) {
throw new Error('Please define bottom left entity');
}
if (!config.bottomcenter) {
throw new Error('Please define bottom center entity');
}
if (!config.bottomright) {
throw new Error('Please define bottom right entity');
}
this.config = config;
}
// The height of your card. Home Assistant uses this to automatically
// distribute all cards over the available columns.
getCardSize() {
return 1;
}
}
customElements.define('simple-weather-clock', SimpleWeatherClock);