- Open any dashboard (seems it could be ANY).
- Select āEdit Dashboardā:
- Add a new view:
- Select Panel:
Hey there,
can somebody explain me how to use Card-Mod to compress a Card? I mean i want to reduce the unused space of a card on top and bottom - see picture (red lines are showing the space i want to reduce:
What you need is to change paddings or margins.
Goto 1st post ā link at the bottom ā examples for similar solutions.
Iām trying to do that since 2-3h - havenāt found a working solution yet
I want a blinking icon when attribute value is between 0 and 78ā¦
style: |
@keyframes blink {
50% {
background: red;
}
}
ha-card {{ 'animation: blink 2s linear infinite;' if not is_state(config.entity, '0') and not is_state(config.entity, '78') }
}
What is wrong ?
To be honest: Everything. 
- no card_mod (somehow optional but sometimes needed)
- Wrong indention below style
- css after ha card starts with {{ and ends with )}
- you are checking of not 0 and not 78. Not the range
- you are checking strings which would work here if you want to check only <>0 and <>78, but is not what you want to do
- syntax of your if
- you have written that you want to blink an icon, but you will animate the whole card
- etc.
Where did you find or take from such examples?
Start with this
card_mod:
style: |
{% if states(config.entity)|int(default=-1) > 0 and states(config.entity)|int(default=-1) < 78 %}
@keyframes blink {
50% {
background: red;
}
}
ha-card {
animation: blink 2s linear infinite;
}
{% endif %}
And you should start putting your cod into developer tools template section and see what would be the output (ofc there your have to set e.g āsun.sunā or (better) the entity in use instead of config.entity.
Here the output from your code
What would already lead you to topic 3 above in my list, ā¦
I get āUndefinedError: āconfigā is undefinedā
And you are rightā¦ I just donāt know a thing, I have to ask everything 
Then I would be interested in which card or thing you want to mod. Just post, where you have added the lines.
I would suggest to read the docs from card-mod and the examples there. And secondly go through the examples from Ildar in the very first post of this thread and try to understand how this is working.
2 Likes
I have a very simple question, but I canāt find the solution!
I would like to manipulate an horizontal rule (ā or *** in markdown syntax or hr in html) in a markdown card through card-mod, but I canāt find a solution!
I apologise for my question but Iām a noob with card mod and CSS (Iāve never used CSS before this week!)
Thank you very much to everybody helps me! 
Starting point
Letās use this example with two horizontal rules (Iāve specified the id of the second element, in order to target it with its id).
Code:
type: markdown
content: |
An horizontal rule with **markdown syntax**
---
Another horizontal rule with <b>html syntax<b/>
<hr id="my_line" />. ### I've tried both <hr> and <hr/>
card_mod:
style: |
ha-card {
background: transparent;
border-style: none;
}
Chrome inspector
This is chrome inspector:
My attempts
Iāve tried this:
type: markdown
content: |
An horizontal rule with **markdown syntax**
---
Another horizontal rule with <b>html syntax<b/>
<hr id="my_line" color="red"> #### <- ATTEMPT 1
card_mod:
style: |
ha-card {
background: transparent;
border-style: none;
--divider-color: red; #### <- ATTEMPT 2
}
hr {
border: 2px dashed red !important; #### <- ATTEMPT 3
}
#my_line {
border: 2px dashed red !important; #### <- ATTEMPT 4
}
Results: nothing changed!
References
Conclusion
Can somebody help me? Thank you very much!!
1 Like
It looks like you have to make a helper ( input number ) does it excist in your entities ?
Hi guys ,
I hope someone more experienced than I would take a look at this config and tell me if it seem okay.
Periodically my tablet that always shows HA in fully kiosk doesnt load this correctly, just this part.
Anything wrong with it?
card_mod:
style:
config-template-card:
$:
div:
hui-vertical-stack-card:
$: |
h1.card-header {
padding: 5px !important;
font-size: 15px !important;
line-height: 15px !important;
}
A small customization for restriction-card:
For a card:
code
- type: custom:mod-card
card:
type: custom:restriction-card
action: hold
duration: 10
card:
type: entities
entities:
- input_boolean.test_boolean
card_mod:
style:
restriction-card:
$: |
div#overlay {
background: repeating-linear-gradient( -45deg, transparent 0 20px,rgba(255,127,127,0.2) 20px 40px);
border-radius: var(--ha-card-border-radius,12px);
}
div#overlay:has(.hidden) {
background: unset;
}
ha-icon {
display: none;
}
For a row:
code
- type: entities
entities:
- entity: input_boolean.test_boolean
- type: custom:restriction-card
row: true
action: hold
duration: 10
card:
entity: input_boolean.test_boolean
card_mod:
style: |
div#overlay {
background: repeating-linear-gradient( -45deg, transparent 0 20px,rgba(255,127,127,0.2) 20px 40px);
}
div#overlay:has(.hidden) {
background: unset;
}
ha-icon {
display: none;
}
4 Likes
Thank you. That works.
never really used browser-mod pop-ups before, and decide to give it a try, working nicely indeed:
hold_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: markdown
content: >
{{state_attr('sensor.marquee_alerts','marquee')}}
I have 2 questions on the subject though: how come my main theme settings ha-card-border-radius: 0px are not applied? Need they be set specifically for browser-mod pop-ups?
should we card-mod that so it also applies here?
the same card in a dashboard does get the borders set correctly:
the other is a placement issue, so probably not a card-mod or theme question, will see where to take that 
update
foind this:
hold_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |
--popup-border-radius: 0px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em) brightness(1.2);
content:
type: markdown
content: >
### Actieve waarschuwingen voor:
{{state_attr('sensor.marquee_alerts','marquee')}}
but must check if that is still the most up to date css for the card mod, and also, if a card-mod-theme for the popups would not be an option?
considering we have:
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
}
in place, I also figured the popup would benefit from that, but obviously not.
also trying to getto the top and bottom margins there, is not successful:
hold_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |
--popup-border-radius: 0px;
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--dialog-backdrop-filter: blur(0.8em) brightness(1.2);
content:
type: markdown
card_mod:
style: |
ha-card {
background: maroon;
color: ivory;
margin:-20px 0px;
}
or even do:
type: markdown
card_mod:
style: |
ha-card {
background: maroon;
color: ivory;
margin: 0px;
font-size: 20px;
font-weight: bold;
text-align: center;
animation: blink 2s ease infinite;
}
@keyframes blink {
100% {opacity: 0;}
}
but that top/bottom margin remainsā¦ now how to get rid of that?
feels a bit like a hack, but taking off 4px of the 24px of the content padding makes it happen:
--dialog-content-padding: 20px;
hi,
Iām sure this should be easy, but iām stumped.
Is there a way to move the text over to the right in this markdown card so that the icon is inline with the text, rather than the text being below the icon?
hereās my code so far:
card:
type: markdown
card_mod:
style:
.: |
ha-card {
--mdc-icon-size: 50px;
}
content: >-
{% if states('sensor.health_alert_level') == 'YELLOW' %}
<font color = 'gold'>
{% elif states('sensor.health_alert_level') == 'AMBER' %}
<font color = 'darkorange'>
{% elif states('sensor.health_alert_level') == 'RED' %}
<font color = 'dark'>
{% endif %}
{% if states('sensor.health_alert_type') == 'Heat' %}
<ha-icon icon="mdi:sun-thermometer-outline"></ha-icon>
{% else %}
<ha-icon icon="mdi:snowflake-thermometer"></ha-icon>
{% endif %}
</font>
There is a **{{states('sensor.health_alert_Level')}}** {{
states('sensor.health_alert_type') }} Health Alert for London
from {{ states('sensor.health_alert_start_date') }} at {{
states('sensor.health_alert_start_time') }} until {{
states('sensor.health_alert_end_date') }} at {{
states('sensor.health_alert_end_time') }}
Use Jinjaās whitespace control features. Compare e.g. {% with {%-.
1 Like
Thanks, I got it partway with that!
I seem to have lost the bold on the color and canāt get the 2nd line up. What have I missed please?
card:
type: markdown
card_mod:
style:
.: |
ha-card {
--mdc-icon-size: 50px;
font-size: 13px;
}
content: >-
{% if states('sensor.health_alert_level') == 'YELLOW' %}
<font color = 'gold'>
{% elif states('sensor.health_alert_level') == 'AMBER' %}
<font color = 'darkorange'>
{% elif states('sensor.health_alert_level') == 'RED' %}
<font color = 'dark'>
{% endif -%}
{% if states('sensor.health_alert_type') == 'Heat' -%}
<ha-icon icon="mdi:sun-thermometer-outline"></ha-icon>
{% else -%}
<ha-icon icon="mdi:snowflake-thermometer"></ha-icon>
{% endif -%}
</font>
There is a **{{states('sensor.health_alert_Level')}}** {{
states('sensor.health_alert_type') }} Health Alert for London
from {{ states('sensor.health_alert_start_date') }} at {{
states('sensor.health_alert_start_time') }} until {{
states('sensor.health_alert_end_date') }} at {{
states('sensor.health_alert_end_time') }}
Markdown canāt be interpreted correctly once youāre inside HTML tags. Use <bold> instead.
thank you
thatāll do 