Strange, I have another result with the last code:
I need some time to find out the reason of this.
Use search next time please)
Thank you so much.
You are absolutely right but it is not easy to find something among more than 1300 posts.
Thanks again
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;
}
