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
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 )))
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
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 %}
}'
Can someone maybe help me? Im using the big slider card and mushroom cards. Problem is now that the mushroom cards have a different icon Design and i want to have the same in the big slider card too.
Ive Attached a Screenshot to see what i mean.
Is that a simple card mod i need to add?
Hi Ildar, thanks for those examples, I’ll tried the first one and it works great!!
A BIG thank you!! 
New to Card-mod.
Can someone show how I can use Card-mod to make each entry a specific color based on the range of value of the entity? But (hopefully), without repeating the code under each entry?
For example, these are all temperature readings. I would like the readings to show up:
In Dark Blue if the temperature is below 32*F
In Light Blue if the temp is between 32-48
In Green if between 49-64
In Yellow if between 65-75
In Red if over 75
Here’s my basic code:
views:
- title: Home
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout: {}
cards:
- type: entities
entities:
- entity: sensor.pirateweather_temperature
name: Outdoors
- entity: sensor.76_thr316_1_water_temperature
name: 76 Water
- entity: sensor.sonoff_1001dabf2f_temperature
name: 630 Water
- entity: sensor.sonoff_100139392c_temperature
name: White Water
- entity: sensor.sonoff_1001393418_temperature
name: Purple Water
- entity: sensor.well_ecobee_temperature
name: Well
- entity: sensor.125_1st_floor_temperature
name: 125 1st Fl
- entity: sensor.125_2nd_floor_temperature
name: 125 2nd Fl
- entity: sensor.sonoff_100182a1cc_temperature
name: 125 Attic
- entity: sensor.371_1st_floor_temperature
name: 371 1st Fl
- entity: sensor.371_2nd_floor_temperature
name: 371 2nd Fl
- entity: sensor.371_hydronic_temperature
name: 371 Hydronic
- entity: sensor.carmine_temperature
name: Carmine
- entity: sensor.sonoff_1001829f81_temperature
name: Eddie
- entity: sensor.76_temperature
name: 76
- entity: sensor.sonoff_10013932b1_temperature
name: 629
- entity: sensor.630_temperature
name: 630
- entity: sensor.1st_floor_room_temperature
name: 255 1st Fl
- entity: sensor.2nd_floor_east_room_temperature
name: 255 2nd Fl East
- entity: sensor.2nd_floor_west_room_temperature
name: 255 2nd Fl West
- entity: sensor.3rd_floor_room_temperature
name: 255 3rd Fl
- entity: sensor.well_ecobee_temperature
name: Well
- entity: sensor.sonoff_1001392bce_temperature
name: White
- entity: sensor.sonoff_1001dabe7c_temperature
name: Blue THR316
- entity: sensor.sonoff_100139390d_temperature
name: Blue Closet
- entity: sensor.sonoff_1001829f54_temperature
name: Green
- entity: sensor.sonoff_1001392bd9_temperature
name: Purple THR316
- entity: sensor.shop_temperature
name: Shop
I assume I can reuse the code for different card types (like gauges) also.
Thanks very much!
can’t find this anywhere, so maybe not allowed/possible via card_mod:
How to set an entity_picture based on state
first made a customization to get the correct path in inspector.
homeassistant:
customize:
input_select.intercom_language:
entity_picture: /local/flags/nl.png
which then shows promising and seems rather straightforward in inspector
state-badge:
background-image: url(" etc etc ");
the actual path is showing the http address too, but I suppose that would be handled internally… (hope)
also class= " pointer "
so, next step to write the card mod:
- entity: input_select.intercom_language
card_mod:
style: |
state-badge {
background-image: url("/local/flags/nl.png");
}
and .pointer too.
but that does exactly nothing and the default icon is showing in stead.
since these are my last 2 mods I need to completely take out custom-ui I hope someone can find a way to help me out.
would be an awesome addition to the ‘standard’ card_mods available
thanks for having a look
update
Progress:
- entity: input_select.intercom_language
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
{% set flag = states(config.entity)|lower %}
background-image: url("/local/flags/{{flag}}.png");
}
makes the entity_picture show. Still shows the icon too, so need to set display: none there, or, would this work:
.: |
:host {
--card-mod-icon: none;
}
Yes its does!.
a bit more complex but it gets the job done. If anyone can spot a way to get the entity_picture there in a simpler way, please dont hold back! for now Im set.
Nice indeed:
- type: entities
title: Herlaad Integratie
card_mod: *header
entities:
- entity: input_select.integration
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
{% set state = states(config.entity)|lower %}
{% set path = '/local/images/integrations/' %}
background-image:
{% if 'luftdaten' in state %} {% set img = 'luftdaten' %}
{% elif 'philips' in state %} {% set img = 'hue' %}
{% else %} {% set img = state %}
{% endif %}
url("{{path}}{{img}}.png");
}
.: |
:host {
--card-mod-icon: none;
}
- entity: script.reload_integration
action_name: Herlaad
Kind of (untested):
- entity: sensor.76_thr316_1_water_temperature
name: 76 Water
card_mod: &ref_super_style
style: |
:host {
{% if states(config.entity)|int >= AAA and states(config.entity)|int < BBB %}
color: red;
{% elif states(config.entity)|int >= CCC and states(config.entity)|int < DDD %}
color: ...;
...
{% else %}
color: ...;
{% endif %}
}
...
- entity: ...
name: ...
card_mod: *ref_super_style