I do not think it is possible.
Iām trying to resize/compress the items in this card and need to find a way to reduce the āiconā size in my Entities card but I canāt find anything in the forum that points the way
See below - Iād like the Unifi icon to be smaller
Already told you where to take this.
How about you link it then instead? As this looks like a card-mod thread to me
You want other people to find a link for you instead of following a simple path ā1st post ā link at the bottomā.
Imho proposed approach is MUCH more useful than giving ready solutions.
Hi,
Trying to change the color of the graphs fill and the line in an Entities Card with a footer.
footer:
type: graph
entity: sensor.kitchen_thermometer_kitchen_outdoor_temperature
detail: 1
Something like? But Iām not getting it to work. Could someone help out?
hui-graph-header-footer$: |
hui-graph-base {
var(--red-color);
}
This footer/header graphs could be same as a Sensor card.
What you should try to do is:
- Take examples for the Sensor card.
- Take examples for header/footer.
- Compose valid paths for graphs inside footer, find out proper css attributes.
Examples here: 1st post ā link at the bottom.
1 Like
As Iāve already told you, I have done what you suggested and cannot locate the help I need in that extensive list of links.
If anybody would like to assist me instead of making assumptions, then that would be appreciated
Can you find words āEntities cardā in that āextensive list of linksā?
Guess you misunderstood what a ālink at the bottomā means.
Not at all, I just canāt find the info that you say resolves my issue.
You asked about resizing an icon - it is there.
You asked about resizing a row - it is there.
I explained where to find it - you failed and started blaming me in TWO threads.
You asked for links to solutions - I gave you a link to a LIST of solutions.
Guess I am a bit tired with this transaction.
Here is what I take to be the information from your links, which incidentally, I have read several times today trying to resolve this myself, which is why I posted a request for help:
Which if pasted AS IS into the editor, does not function, let alone if I try to integrate it as follows:
Thanks for pointing me in the right direction.
āaccent-color will set the fill and line of the graph as i understand it.
So this is what i came up with that works
card_mod:
style:
.: |
.header-footer.footer {
--accent-color: var(--red-color);
}
Tried to set the --accent-color dynamically dependent on the temperature value of my sensor but i cant get that to work in the footer.
Is it my path inside the footer thatās wrong in this case?
For a Sensor Card i get it to work
graph: line
type: sensor
detail: 1
entity: sensor.kitchen_thermometer_kitchen_outdoor_temperature
card_mod:
style: |
ha-card {
{% if states(config.entity)|float(0) > 24.9 %}
--accent-color: var(--red-color);
{% elif states(config.entity)|float(0) > 18 %}
--accent-color: var(--green-color);
{% elif states(config.entity)|float(0) > 10 %}
--accent-color: var(--orange-color);
{% elif states(config.entity)|float(0) > 0 %}
--accent-color: var(--light-blue-color);
{% else %}
--accent-color: var(--blue-color);
{% endif %}
}
Are you saying that the 1st code (with static color) does work for a graph in header/footer?
And are you saying that the 2nd code (with dynamic color) does work with a Sensor card?
If yes - then use a template from the 2nd code in the 1st code - but note that āconfig.entityā cannot be used here, use a particular entity_id.
(in fact, it depends on a card which is used as the āmain cardā - which contains this header/footer).
Yes, you understand it correctly.
I already tested using the sensor entity (sensor.kitchen_thermometer_kitchen_outdoor_temperature) in footer graph instead of config.entity and I did not work for me
Suggest you to post the SHORT version of a card with a footer/header and card-mod you were testing and failed.
P.S. A familiar face, from Sicario?
1 Like
Probably was to tired yesterday and made some mistake, now in the morning when i tested again with (āsensor.kitchen_thermometer_kitchen_outdoor_temperatureā) instead of (config.entity) it works. Thanks for the help! 
Yes you are correct Sir!
1 Like
Hoping someone might be able to explain where I am going wrong here, Iāve tried using multiple examples from various people and sources to work out how to write the syntax, I got it working once without an if condition thinking Iāll start with getting it working.
But then it broke and I canāt even get the basic syntax to work, based on what Iāve read, the below āshouldā be correct but it doesnāt animate in anyway shape or form.
type: custom:mushroom-template-card
entity: binary_sensor.dishwasher_door_contact
primary: Dishwasher
secondary: |-
{% if is_state('binary_sensor.dishwasher_door_contact', 'on') %}
Not Running
{% else %}
Running
{% endif %}
icon: mdi:dishwasher
icon_color: |-
{% if is_state('binary_sensor.dishwasher_door_contact', 'on') %}
grey
{% else %}
teal
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state('binary_sensor.dishwasher_door_contact', 'off') %}
--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;
transform-origin: 50% 75%;
{% else %}
--icon-animation: none;
{% endif %}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
layout_options:
grid_columns: 2
grid_rows: 1
Any advise would be greatly appreciated.
did anyone already try to card-mod the markdown alert classes?
I gave it a shot, to auto format those based on the state of a sensor, and thought Iād share it here
this is the working and utterly simple markdown:
content: >
{{states(config.entity)}}
# <ha-alert alert-type="success">{{states(config.entity)}}</ha-alert>
and in comment the formatting with the alert-type, which also works fine like that
now set a template with:
{% set level = states(config.entity) %}
{% set color =
{'Laag':'success','Gemiddeld':'warning',
'Hoog':'error','Zeer Hoog':'error'} %}
{% set alert_type = color.get(level,'info') %}
and use that in the styling of the content:
content: >
{% set level = states(config.entity) %}
{% set color =
{'Laag':'success','Gemiddeld':'warning',
'Hoog':'error','Zeer Hoog':'error'} %}
{% set alert_type = color.get(level,'info') %}
<ha-alert alert-type={{alert_type}}>{{states(config.entity)}}</ha-alert>
and lo and behold my attempt to mimic this source websiteās design:
I use a rather hidden unknown to me feature on the markdown card (only yesterday I learned we can make up any key in the config, and use that in the content), and with that I fake an entity so I can duplicate the config easily and not have to redo all the typing for all individual entities:
Full card
type: custom:mod-card
card_mod:
style: |
ha-card {
background: url('/local/season/pollen.jpg');
background-size: cover;
}
card:
type: vertical-stack
cards:
- type: heading
heading: Pollen in de lucht
heading_style: title
card_mod:
class: class-section-heading-no-color
style: |
ha-card .container {
background: transparent;
--ha-heading-card-title-color: var(--primary-color) !important;
}
tap_action:
action: url
url_path: https://www.kleenex.nl/pollenradar
- type: horizontal-stack
cards:
- entity: sensor.pollen_onkruid
name: Onkruid
<<: &card
type: tile
vertical: true
tap_action:
action: more-info
card_mod:
style: |
{% set level = states(config.entity + '_concentratie') %}
{% set color =
{'Laag':'var(--ok-color)','Gemiddeld':'var(--warning-color)',
'Hoog':'darkorange','Zeer Hoog':'var(--alert-color)'} %}
{% set level_color = color.get(level,'gray') %}
ha-card {
background: transparent;
--primary-text-color: var(--primary-color);
}
.icon-container {
border-radius: 24px;
background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient({{level_color}} {{states(config.entity)}}% 0%,
var(--card-background-color) 0% 100%);
}
ha-tile-icon {
--tile-color: {{level_color}};
}
- entity: sensor.pollen_gras
name: Gras
<<: *card
- entity: sensor.pollen_bomen
name: Bomen
<<: *card
- type: horizontal-stack
cards:
- type: markdown
# entity is a fake key, used to allow config templates in the content
entity: sensor.pollen_onkruid_concentratie
<<: &md
card_mod:
style: |
ha-card {
background: rgb(128,193,177,0.9);
color:
{% set level = states(config.entity) %}
{% set color =
{'Laag':'green','Gemiddeld':'orange',
'Hoog':'darkorange','Zeer Hoog':'maroon'} %}
{% set level_color = color.get(level,'gray') %}
{{level_color}};
font-weight: 800;
text-align: center;
}
content: >
{% set level = states(config.entity) %}
{% set color =
{'Laag':'success','Gemiddeld':'warning',
'Hoog':'error','Zeer Hoog':'error'} %}
{% set alert_type = color.get(level,'info') %}
<ha-alert alert-type={{alert_type}}>{{states(config.entity)}}</ha-alert>
- type: markdown
entity: sensor.pollen_gras_concentratie
<<: *md
- type: markdown
entity: sensor.pollen_bomen_concentratie
<<: *md
- type: horizontal-stack
cards: []
2 Likes
o dear. I now realize this isnt even a card-mod thingy, but plain core Jinja evaluation in Markdownā¦
my pardon for that
(and thereās enough card-mod related stuff in it so I donāt feel to badā¦)