though nice we can now use the color variable names, I donāt feel this is as clear as in what one is doing. eg this seems more intuitive considering the layout of the badge (a circle on top, the actual badge, than an attached .label, and below that we set the style for the name, and below config represents that better imho:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border-style: dashed;
border-color: blue;
color: grey;
background-color: yellow;
}
.badge-container .label-badge .label span {
border-style: dotted;
border-color: pink;
color: red;
background-color: green;
}
.: |
:host {
color: orange;
}
in fact, this might even be better yet:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border-style: dashed;
border-color: blue;
color: grey;
background-color: yellow;
}
.badge-container .label-badge .label span {
border-style: dotted;
border-color: pink;
color: red;
background-color: green;
}
.badge-container .title {
color: orange;
}
and seeing the last version here, makes me wonder if we couldnāt level up the .badge-container?
apparently yes:
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;
}
KTibow
January 25, 2021, 2:32pm
1340
You could use comments as well. In the format /* Color circle */.
yes, thatās a great idea, edited the final styling above this one.
In the following entity is it possible to enlarge the font only of the state? (in this case the temperature)
type: entities
entities:
- entity: sensor.snzb_02_corridoio_temperature
name: Room
Use search next time please)
How to change a font-size for Entities card:
[image]
type: entities
title: Size for title
card_mod:
style: |
ha-card .card-header {
font-size: 35px;
color: red;
}
entities:
- entity: sun.sun
name: Standard size
secondary_info: last-changed
- entity: sun.sun
name: Size for whole row
secondary_info: last-changed
card_mod:
style: |
:host {
font-size: 25px;
color: red;
}
- entity: sun.sun
name: Size for ā¦
1 Like
Strange, I have another result with the last code:
Use search next time please)
Thank you so much.
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
Mariusthvdb:
this is my latest code:
Very strange. I see this:
no, I am notā¦
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ā¦
basti4k
January 27, 2021, 7:35pm
1353
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
KTibow
January 27, 2021, 8:41pm
1354
basti4k:
but it does not work
Always check your indentation, and try basic troubleshooting. Also youāre using a
basti4k:
.: |
when you could just delete that whole line.
radekD
January 28, 2021, 4:46am
1355
Hi, Im trying to color my icon in picture-elements depends od state of entity (āOtevÅenoā - red or āZavÅenoā - green).
- 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?
KTibow
January 28, 2021, 2:33pm
1356
Are you sure the sensor has that exact state?
I suspect the sensor is for a window (open/closed).
georgelza
January 30, 2021, 8:04am
1358
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;
}
