Note that there is no ā:ā after ābadge-containerā in the last code. So that is not a ālevel upā.
im the first to confess the code is still somewhat unfamiliar to me, but what I posted above does work. To be clear on what I posted last (there we more than a couple of iterations in that post) this is my latest code:
- entity: sensor.state_badge
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container
/* Top circle of the Badge (State) */
.label-badge {
border-style: dashed;
border-color: blue;
color: grey;
background-color: yellow;
}
/* Label of the Badge (Unit) */
.label-badge .label span {
border-style: dotted;
border-color: pink;
color: red;
background-color: green;
}
/* Below the Badge (Name) */
.title {
color: orange;
}
resulting in:
With Ildar_Gabdullinās suggestion I was able to change the font of the state of an entity but this doesnāt work for an attribute. Can you help me?
type: entities
entities:
- entity: sensor.snzb_02_corridoio_temperature
name: Temperatura rilevata
icon: mdi:thermometer
style: |
:host .text-content {
font-size: 30px;
font-weight: bold;
color: black;
}
- entity: climate.riscaldamento_termosifoni
name: Temperatura impostata
icon: mdi:thermometer
attribute: temperature
type: attribute
style: |
:host .text-content {
font-size: 30px;
font-weight: bold;
color: black;
}
Styling Entities card with attributes:
type: entities
entities:
- type: attribute
entity: sun.sun
attribute: azimuth
name: Size for name, sec_info & attribute
secondary_info: last-changed
card_mod:
style: |
hui-generic-entity-row {
font-size: 10px;
color: red;
}
- type: attribute
entity: sun.sun
attribute: azimuth
name: Size for attribute
secondary_info: last-changed
card_mod:
style:
hui-generic-entity-row $: |
.text-content {
font-size: 10px;
color: red;
}
- type: attribute
entity: sun.sun
attribute: azimuth
name: "!!!! Size for attribute (w/o sec_info) !!!!"
card_mod:
style:
hui-generic-entity-row $: |
.text-content:not(.info) {
font-size: 10px;
color: red;
}
- type: attribute
entity: sun.sun
attribute: azimuth
name: Size for name & sec_info
secondary_info: last-changed
card_mod:
style:
hui-generic-entity-row:
$: |
.info.pointer {
font-size: 10px;
color: red;
}
- type: attribute
entity: sun.sun
attribute: azimuth
name: Size for sec_info
secondary_info: last-changed
card_mod:
style:
hui-generic-entity-row:
$: |
.info.pointer .secondary ha-relative-time {
font-size: 10px;
color: red;
}
- type: attribute
entity: sun.sun
attribute: azimuth
name: Size for name (w/o sec_info)
card_mod:
style:
hui-generic-entity-row:
$: |
.info.pointer.text-content {
font-size: 10px;
color: red;
}
- type: attribute
entity: sun.sun
attribute: azimuth
name: Size for name
secondary_info: last-changed
card_mod:
style:
hui-generic-entity-row:
$:
.info.pointer: |
.secondary ha-relative-time {
font-size: var(--mdc-typography-body1-font-size,1rem);
color: orange;
}
.: |
.info.pointer {
font-size: 10px;
color: red;
}
- type: attribute
entity: sun.sun
attribute: azimuth
name: Colored icon
card_mod:
style: |
:host {
--paper-item-icon-color: orange;
}
More examples are described here.
1 Like
Very strange. I see this:
Once again I want to remark about ā:ā after ā.badge-containerā - are you sure that it must be absent?
no, I am notā¦
though it works Safari, our doesnāt in Chromeā¦
changed it to:
- entity: sensor.state_badge
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
/* Top circle of the Badge (State) */
border-style: dashed;
border-color: blue;
color: grey;
background-color: yellow;
}
/* Label of the Badge (Unit) */
.badge-container .label-badge .label span {
border-style: dotted;
border-color: pink;
color: red;
background-color: green;
}
/* Below the Badge (Name) */
.title {
color: orange;
}
makes it work in Chrome to:
Safari:
Chrome:
Firefox:
So Chrome is the exclusion here. Which is surprising because the iOS companion app, essentially a Chrome browser, shows fine tooā¦
I am using Chrome, btw. That is why this differenceā¦
hi, how can i edit the ha-switch? @maxym ?
CSS:
ha-switch {
padding: 13px 5px;
}
here the yaml:
entities:
- entity: switch.test_force_data_refresh
name: Erzwingen
toggle: true
style:
.: |
"ha-entity-toggle":
$: |
ha-switch {
padding: 3px 5px;
}
but it does not work 
Always check your indentation, and try basic troubleshooting. Also youāre using a
when you could just delete that whole line.
Hi, Im trying to color my icon in picture-elements depends od state of entity (āOtevÅenoā - red or āZavÅenoā - green).
I try this code:
- type: picture-elements
image: /local/images/myhouse.jpg
style: |
ha-card {
--my-icon-color: {% if is_state('sensor.okno_pracovna', 'OtevÅeno') %} red {% else %} green {% endif %}
}
elements:
- type: state-icon
entity: sensor.okno_pracovna
tap_action:
action: more-info
icon: mdi:window-maximize
state_color: true
style:
'--paper-item-icon-color': var(--my-icon-color)
top: 50%
left: 27%
But it not work (icon is still blue). Can you help me where is the mistake?
Are you sure the sensor has that exact state?
I suspect the sensor is for a window (open/closed).
Do not have any windows/doors, so cannot say what must be an exact value.
guys, how can i check if Iāve installed the module correctly. I went into my ssh terminal, went into the config directory, created a www directory, cdād into that and ran the git clone command.
Iām now trying to add the bit from styleā¦ onwards (intend is to hide the keypad)
type: alarm-panel
entity: alarm_control_panel.master_alarm_panel
name: Master Panel
states:
- arm_home
- arm_away
- arm_night
style: |
#keypad, #alarmCode {
display: none !important;
}
I would like to modify the standard light card for a dimmer with three goals:
- eliminate the three dots for the more-info menu
- make the background transparent
- let the icon keep its color instead of changing with dim level / brightness
I managed to achieve the first two but Iām stuck with the third. Any advice?
type: light
entity: light.shelly_leo_dimmer
style: |
mwc-icon-button.more-info {
display: none;
}
ha-card {
background: none;
}
Inspecting the document, I can see that a filter: on ha-icon-button is responsible for the changing color. However, setting it to none doesnāt seem to have an effect:
type: light
entity: light.shelly_leo_dimmer
style: |
mwc-icon-button.more-info {
display: none;
}
ha-card {
background: none;
}
ha-icon-button {
filter: none;
}
I feel like missing something obvious.
The filter is responsible for the brightness; you also need to set color.
I donāt think it is that easy. The following has no effect:
type: light
entity: light.shelly_leo_dimmer
style: |
mwc-icon-button.more-info {
display: none;
}
ha-card {
background: none;
}
ha-icon-button {
filter: none;
color: green;
}
Use !important
Thanks, yes, that was it!
type: light
entity: light.shelly_leo_dimmer
style: |
mwc-icon-button.more-info {
display: none;
}
ha-card {
background: none;
}
ha-icon-button {
filter: none !important;
}
Thank you very much! I am wondering where I can put the Variable so that I can reuse it in other cards.
In your theme.
1 Like