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.
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! 
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;
}
This is chrome inspector:
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!
Can somebody help me? Thank you very much!!
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:
- 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:
- 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;
}
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 {%-.
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 
Can anyone please help me to increase the font size for the Mushroom Thermostat card temperature control?
type: custom:mushroom-climate-card
entity: climate.bedroom_ac
layout: vertical
show_temperature_control: true
secondary_info: none
tap_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.bedroom_ac_toggle
data: {}
icon: mdi:snowflake
collapsible_controls: false
hvac_modes: []
fill_container: false
card_mod:
style: |
ha-card {
--card-primary-font-size: 1.6em;
}
Any help would be greatly appreciated.
Hi all!
I have a vertical-stack with a media-control card and a custom-button card. I have modified the size of the button so that it does not occupy the entire width of the column and my ultimate goal is to place the button on top of the control-card and align it after the next track button.
Below I show my code.
- type: custom:mod-card
card:
type: vertical-stack
card-mod:
style: |
ha-card {
display: flex;
justify-content: center;
}
cards:
- type: media-control
entity: media_player.musiccast_kitchen
- type: custom:button-card
icon: mdi:link-variant
styles:
card:
- width: 50px
- height: 50px
- position: relative
- transform: translate(100px, -100px)
The problem is that depending on the screen (mobile, tabletā¦) the relative position of the button with respect to the media-control card varies.
Is there a way to make this not happen?
If itās not possible, how can I at least make the button appear centered in the column?
Iām totally new to card-mod, so Iād appreciate if someone could help me.
Start with fixing this:
When using mod-card - styles are supposed to be defined on mod-card level.
I would like to change the style āāgrid-card-column-countā of a hui-grid-card.
<hui-grid-card style="--grid-card-column-count: 2;"></hui-grid-card>
I tried the following - but it does not work 
type: grid
card_mod:
style:
hui-grid-card$: |
hui-grid-card {
--grid-card-column-count: {{ 1 if user == 'handy' else 2 }} !important;
}
Could please someone help?
Hi everyone,
Iāve noticed that the newer HA updates have added a box around my once boxless/shadowless card:
I canāt seem to figure out how to remove it.
Iāve tried:
ha-card-border: 0px
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-width: 0
ha-card-box-shadow: 0px
with no luck.
Am I missing anything in the below code?:
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: '{{ now().strftime(''%I'') }}:{{ now().strftime(''%M %p'') | lower }}'
subtitle: >-
{{ now().strftime('%A') }}, {{ now().strftime('%B') }} {{
now().strftime('%d') }}
card_mod:
style:
mushroom-title-card$: |
.header {
--title-padding: 12px 12px 3px;
}
.title {
font-size: 34px!important;
spacing: 100px;
}
.subtitle {
font-size: 25px!important;
}
ha-card {
height: 98px !important;
}
ha-card-border: 0px
}
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
}
ha-card-border-width: 0
}
ha-card-box-shadow: 0px
}
Thanks in advance
Same as for the stack cards. Have a look in the developer tools of your browser. There is no ha-card element, which is needed for ingesting code via card-mod. So you have to place a mod-card around it here as well. See here.
Thanks for pointing me in the right direction. I have put the styles on mod-card level and tried to apply the style only for the custom:button-card but the code doesnāt work. Surely because the selector is not correct.
Please, could you tell me what Iām doing wrong.
- type: custom:mod-card
card:
type: vertical-stack
cards:
- type: media-control
entity: media_player.musiccast_kitchen
- type: custom:button-card
icon: mdi:link
card_mod:
style:
ha-card $:
hui-vertical-stack-card $:
div#root button-card$:
div#aspect-ratio ha-card: |
.button-card-main {
position: relative;
display: block;
margin: auto;
width: 60%;
justify-content: center;
}