This was very helpful, thank you.
How do I hide the text you made red here (‘was detected at …’)? I tried display: none; but this hides the whole line.
This is not a part of the line. The 1st word is an entity, you cannot style entity & rest of the line separately.
1 Like
That’s what I thought, thank you. I was hoping that maybe it is somehow possible, since the entity name was not red while the text behind it was. Oh well.
Use Code Inspector to get a structure of UI elements.
No need to guess if you have a tool to know for sure.
why not use the builtin html code for styling the font in Markdown?
- type: markdown
content: >
<font size = 20> {{state_attr('sensor.rss_news','md')}} </font>
title: News
and if you want to style the header too, take the title out, and add it to the content with some additional markdown header styling
all core, no custom card_mod required
@Ildar_Gabdullin can you help me with this?
i want to hide all icons of my entities-cards while i apply the card mod on the parent (vertical-stack). is this possible while having the other style at the same level?
this is my code
type: custom:mod-card
style:
hui-vertical-stack-card:
$: |
div#root > * {
--ha-card-border-width: 0px;
}
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
.: |
hui-vertical-stack-card {
--vertical-stack-card-margin: 0px 0px -10px 0px;
--vertical-stack-state-badge-display: none;
}
ha-card {
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-color,var(--divider-color,#e0e0e0)) solid var(--ha-card-border-width,1px);
}
card:
type: vertical-stack
cards:
- type: entities
entities:
- sun.sun
- type: entities
entities:
- sun.sun
- Please avoid tagging people!!!
- Here a style for “hui-generic-entity-row” is definitely misplaced:
since it is located behind “hui-entities-card” shadowRoot.
sorry for tagging.
could you give me an example how to do it the correct way? trying for hours but its not working
There is no such a standard var.
Ofc it is possible:
type: custom:mod-card
style:
hui-vertical-stack-card $:
hui-entities-card:
$ hui-simple-entity-row $ hui-generic-entity-row $: |
state-badge {
display: none;
}
.: |
div#root > * {
--ha-card-border-width: 16px;
}
.: |
ha-card {
--vertical-stack-card-margin: 16px;
background-color: red;
border: 4px dashed cyan;
}
card:
type: vertical-stack
title: xxx
cards:
- type: entities
entities:
- sun.sun
- type: entities
entities:
- sun.sun
but it is meaningless to style Entities card from the upper level.
Just a waste of resources & adding a possible instability.
Big thanks dude. You are a hero.
but it is meaningless to style Entities card from the upper level.
Just a waste of resources & adding a possible instability.
I just thought i could apply the same style to the parent than to all childs and it would be better. Less code and less problems.
So i shouldnt do this and apply the same code to all of my entities with an own card_mod section? Could you explain why its a waste of rescources?
the simpler = the better
is there a way we can style entities icons inside an auto-entities with a template filter?:
we can do this, in a straightforward filter
filter:
include:
- integration: zwave_js
entity_id: sensor.*actueel
options:
card_mod:
style: |
:host {
--paper-item-icon-color: {% set state = states(config.entity)|int(-5) %}
{% if state == 'unknown'%} gray
{% elif state > 2000 %} purple
{% elif state > 1000 %} maroon
{% elif state > 450 %} darkred
{% elif state > 300 %} firebrick
{% elif state > 250 %} crimson
{% elif state > 150 %} darkorange
{% elif state > 70 %} orange
{% elif state > 10 %} lightsalmon
{% elif state > 0 %} gold
{% else %} var(--no-power-color)
{% endif %}
}
but the template filter poses challenges
- type: custom:auto-entities
card:
type: entities
card_mod: *mod
filter:
template: >
{% set threshold = states('input_number.power_threshold')|float(0) %}
{% set ns = namespace(below_threshold=[]) %}
{% for s in states.sensor
|rejectattr('entity_id','search','solaredge')
|rejectattr('entity_id','eq','sensor.alle_schakelaars_samen_actueel')
|selectattr('entity_id','search','_actueel|_current_power')
if s.state|float(0) <= threshold %}
{% set ns.below_threshold = ns.below_threshold + [s.entity_id] %}
{% endfor %}
{{ns.below_threshold}}
sort: *sort
and set that same card_mod on the icon…
aware we can do things like:
filter:
template: >
{%- for train in expand(integration_entities('nederlandse_spoorwegen')) -%}
{{
{
'type': 'custom:template-entity-row',
'entity': train.entity_id,
'secondary': 'Aankomst: ' + train.attributes.arrival_time_planned
}
}},
{%- endfor -%}
but for now I cant find a way to write the {{ns.below_threshold}} template in a way I can add the card_mod on the entities to it.
Please have a look if you can help me?
Of course, but since I’m not very good at this stuff, I thought that maybe you wizards know a way that I don’t. 
There is no need for schools, education etc - if wizards can help us )))
1 Like
Did you find a solution for hiding the keypad?
happy to share my configuration.yaml code and then the code that i use on the screen where the alarm arm’/disarm’s are done.
– configuration.yaml
alarm_control_panel:
- platform: template
panels:
master_alarm_panel:
code_arm_required: false
value_template: >
{% set p1 = states('alarm_control_panel.alarm_part1') %}
{% set p2 = states('alarm_control_panel.alarm_part2') %}
{{ p1 if p1 == p2 else 'pending' }}
arm_away:
- service: alarm_control_panel.alarm_arm_away
data:
entity_id:
- alarm_control_panel.alarm_part1
- alarm_control_panel.alarm_part2
arm_home:
- service: alarm_control_panel.alarm_arm_home
data:
entity_id:
- alarm_control_panel.alarm_part1
- alarm_control_panel.alarm_part2
arm_night:
- service: alarm_control_panel.alarm_arm_night
data:
entity_id:
- alarm_control_panel.alarm_part1
- alarm_control_panel.alarm_part2
disarm:
- service: alarm_control_panel.alarm_disarm
data:
entity_id:
- alarm_control_panel.alarm_part1
- alarm_control_panel.alarm_part2
and the panel on the screen
type: vertical-stack
cards:
- type: alarm-panel
states:
- arm_away
- arm_home
- arm_night
style: |
#keypad, #alarmCode {
display: none !important;
}
entity: alarm_control_panel.master_alarm_panel
name: Master Panel
1 Like
Thank you.
What can i do if i got two secondary informations like this
Blockquote
primary: ‘{{ states(’‘sensor.bad_soll_temperatur’‘) }}°C’
secondary: >-
{{ states (‘sensor.bad_temperatur’) }} °C / {{ states
(‘sensor.bad_luftfeuchtigkeit’) }} %
Blockquote
and i want to change the color of both secundary informations with differnt
colors.
This is what i got now:
Blockquote
ha-card {
margin-top: -20px;
padding: 0;
–icon-size: 50px;
–card-primary-font-size: 30px;
–card-secondary-font-size: 30px;
–secondary-text-color:
{% set temperatur = states(‘sensor.bad_temperatur’) | float %}
{% if temperatur <= 21 %}
blue
{% elif temperatur <= 25.0 %}
orange
{% else %}
red
{% endif %}; {% set luftfeuchtigkeit = states(‘sensor.bad_luftfeuchtigkeit’) | float %}
{% if luftfeuchtigkeit <= 50 %}
green
{% elif luftfeuchtigkeit <= 65.0 %}
orange
{% else %}
red
{% endif %};
–primary-text-color:
{% if states(‘sensor.bad_soll_temperatur’) == ‘6.0’ %}
red
{% else %}
green
{% endif %}
}’
Blockquote
but it only works for the first secondary information.
type: custom:layout-card
layout_type: custom:grid-layout
layout:
width: 130
cards:
- type: entities
entities:
- entity: light.badezimmer
primary_info: name
secondary_info: state
icon: phu:ceiling-round
state_color: true
layout: vertical
name: Bad
- type: custom:mushroom-template-card
layout: vertical
icon: mdi:heating-coil
primary: '{{ states(''sensor.bad_soll_temperatur'') }}°C'
secondary: >-
{{ states ('sensor.bad_temperatur') }} °C / {{ states
('sensor.bad_luftfeuchtigkeit') }} %
badge_icon: mdi:percent
badge_color: |-
{% set luftfeuchtigkeit = states('sensor.bad_luftfeuchtigkeit') | float %}
{% if luftfeuchtigkeit <= 50.0 %}
#00ff00
{% elif luftfeuchtigkeit <= 65.0 %}
#FFA500
{% else %}
#f50505
{% endif %}
icon_color: |-
{% if states('sensor.bad_soll_temperatur') == '6.0' %}
red
{% else %}
green
{% endif %}
entity: climate.bad_bad
tap_action:
action: more-info
card_mod:
style: |
ha-card {
margin-top: -20px;
padding: 0;
--icon-size: 50px;
--card-primary-font-size: 30px;
--card-secondary-font-size: 30px;
--secondary-text-color:
{% set temperatur = states('sensor.bad_temperatur') | float %}
{% if temperatur <= 20 %}
blue
{% elif temperatur <= 25.0 %}
orange
{% else %}
red
{% endif %};
--primary-text-color:
{% if states('sensor.bad_soll_temperatur') == '6.0' %}
red
{% else %}
green
{% endif %}
}'
