why not? it’s the description of the z-index property?
I may have misunderstood the request, but I already understand how z-index works. Offer up a solution vs replying to me…
thats a nice ‘hack’ indeed, but suppose not a true solution.
As Ive expressed before, the only way I found so far is by simply adding an empty card of the same height as the sticky menu with some margin.
this has the downside of leaving an open spot when not using the sticky menu.
Still looking for some css element to the bottom, just like the top has in the HA view from Ildars example:
top: var(--header-height);
sorry to have tickled you there, was not particularly replying to you but quoting you.
We will leave all the solutions to you so they are hack free. 
“Nothing is more dangerous than an idea when it is the only one you have.”
here’s a ‘solution’ which can be easily included on all views
- type: conditional
conditions:
- condition: state
entity: input_boolean.sticky_menu
state: 'on'
card:
type: entities
card_mod:
style: |
ha-card {
margin: 20px;
background: transparent;
box-shadow: none;
}
}
entities: []
when saved as an include, so I can do:
- !include ../../includes/include_sticky_menu_spacer.yaml
ofc, this works in my config where I have set a vertical, or 1 column view design everywhere.
I believe it can also be added to the sticky menubar itself, that would even be better, but it requires a bit more control over margins and other card_mods
I did have to overcome an issue with my menubar not being displayed completely when using my iPhone (13pro). So I added some @media specifics to the cards styling. First tried it verbosely with 2 type: conditional cards, but then figured out how to set the styling in 1:
- type: conditional
conditions:
- condition: state
entity: input_boolean.sticky_menu
state: 'on'
# - condition: screen
# media_query: '(min-width: 570px)'
card:
type: custom:mod-card
card_mod:
style: |
@media (min-width: 570px) {
ha-card {
position: fixed;
background: var(--primary-color);
width: 494px;
bottom: 10px;
z-index: 1;
}
}
@media (orientation: portrait) { /* and (max-width: 569px) */
ha-card {
position: fixed;
background: var(--primary-color);
width: calc(100%); /*384px;*/
bottom: 10px;
z-index: 1;
}
}
card: !include /config/dashboard/buttons/buttons_dashboards.yaml
(I’ve left the some commented settings, so you can see what also worked, but that was too device specific. As my Desktop does not have a portrait mode, that selector suffices, and width is then using 100%, making it work on all handhelds here.)
I had originally hoped to only have the media_query see to the width, and lift the identical properties out of it
ha-card {
position: fixed;
background: var(--primary-color);
bottom: 10px;
z-index: 1;
but that seems more trouble than it solves… unless someone has a great suggestion here I suppose to leave it like this 
although, this seems to work:
card_mod:
style: |
ha-card {
position: fixed;
background: var(--primary-color);
bottom: 10px;
z-index: 1;
}
@media (min-width: 570px) {
ha-card {
width: 494px;
}
}
@media (orientation: portrait) and (max-width: 569px) {
ha-card {
width: calc(100%); /*384px;*/
}
}
reason we need to mess with that (it’s regular horizontal-stack with buttons, so should never go beyond a single columns width), is the position: fixed which is the main property to set the sticky menu…
all in all, it’s not too obvious. yet doable.
Hello I am a beginner can anyone help me how to get the card mod working? I have already done the following in the dashboard under sources: local/www/community/lovelace-card-mod/card-mod.js
but nothing works can you help me what to do or do I need to add something in configuration?
@Novan007 Check out this guide and test a few card examples on your dashboard.
Start simple, but realize that different cards require different mod code. Ildar’s guide is extensive and covers a large portion of the available cards. The guide is designed to teach vs copy and paste.
type: entity
entity: light.your_light
card_mod:
style: |
ha-card {
background: blue;
}
If the sample I provided didn’t work after applying your own entity, you may have an installation issue.
I am trying to modify the icon color and the font for the secondary text in the following simple-entity:
- type: simple-entity entity: switch.test_entity name: Test Entity secondary_info: last-changed state_color: true
If I add the following after “state_color: true”, I can modify the font for the secondary text:
card_mod: style: hui-generic-entity-row: $: .info.pointer .secondary: | ha-relative-time { font-size: 13px; color: grey !important; }
If I add the following after “state_color: true”, I can modify the icon color:
card_mod: style: | :host { {% if states(config.entity)=='on' %} --card-mod-icon-color: red {% else %} --card-mod-icon-color: SteelBlue {% endif %} }
But how can I get both? The following does not work…
card_mod: style: | :host { {% if states(config.entity)=='on' %} --card-mod-icon-color: red {% else %} --card-mod-icon-color: SteelBlue {% endif %} } hui-generic-entity-row: $: .info.pointer .secondary: | ha-relative-time { font-size: 13px; color: grey !important; }
I am probably not understanding how to combine “:host:” with an “|” after “style:” and “hui-generic-entity-row:” without an “|” after “style:” and two “style:” sections also don’t work?
Any help would be highly appreciated. Thanks so much!
First post. Link to ildars examples. Example for combining shadow and non shadow root elements.
1 Like
works like a charm, thank you!
card_mod: style: hui-generic-entity-row: $: .info.pointer .secondary: | ha-relative-time { font-size: 13px; color: grey !important; } - type: divider .: | :host { {% if states(config.entity)=='on' %} --card-mod-icon-color: red {% else %} --card-mod-icon-color: SteelBlue {% endif %} }
Hi,
I would like the input numbers all controls within an entity card to be equal length but can’t get it to work.
This is what I have now:
card_mod:
style: |
input-number-entity-row:
$:
input: {
width: 120px;
}
Any sugestions?
It’s detailed in the guide. Here is the link for review
1 Like
Thanks, didn’t know I could use css variables in HA.
Hello forum 
maybe you can help me a bit.
I have created an entities-card, to each entity I have added an image.
Now I would like to get the image bigger.
How can I best realize this with card_mod?
type: entities
entities:
- entity: sensor.abfallrestmuell
image: /local/Bilder/Muelltonnen/restmuell.png
name: ' '
- entity: sensor.abfallgelbersack
image: /local/Bilder/Muelltonnen/gelbersack.png
name: ' '
secondary_info: none
- entity: sensor.abfallbio
image: /local/Bilder/Muelltonnen/biomuell.png
name: ' '
Hello, i have the following problem with the card:
type: entity
entity: sensor.pra_lx1_battery_level
state_color: true
card_mod:
style: |
ha-card {
--ha-card-border-radius: 14px;
--ha-card-background: lightgrey;
{% if states('sensor.pra_lx1_battery_level')|int >= 30%}
color: green ! important;
{% elif states('sensor.pra_lx1_batterylevel')|int >= 20%}
color: orange ! important;
{% else %}
color: red ! important;
{% endif %}
}
:host {
{% if states('sensor.pra_lx1_batterylevel')|int >= 30%}
--card-mod-icon: mdi.battery;
{% elif states('sensor.pra_lx1_batterylevel')|int >= 20%}
--card-mod-icon: mdi.battery -30;
{% else %}
--card-mod-icon: mdi.battery -10;
{% endif %}
}
The visual editor is not supported for this configuration:
Key “card_mod” is not expected or supported by the visual editor.
You can still edit the configuration in YAML.
I can save this and the icons are working but the background is not changing in lightgrey en the radius is not working.
Can you help to get this working?
hi, can I ask you a question?
If you are talking tot me? Oke
This is one method
type: entity
entity: sensor.pra_lx1_battery_level
state_color: true
card_mod:
style: |
ha-card {
border-radius: 14px !important;
background: lightgrey !important;
color:
{% set state = states(config.entity)|int(0) %}
{% if state > 30 %} green
{% elif state > 20 %} orange
{% else %} red
{% endif %};}
.info .measurement {
color:
{% set state = states(config.entity)|int(0) %}
{% if state > 30 %} green
{% elif state > 20 %} orange
{% else %} red
{% endif %};}
:host {
--card-mod-icon:
{% set state = states(config.entity)|int(0) %}
{% if state > 30 %} mdi:battery
{% elif state > 20 %} mdi:battery-30
{% else %} mdi:battery-10
{% endif %};}
1 Like
This is one method
type: entities
entities:
- entity: sensor.abfallrestmuell
image: /local/Bilder/Muelltonnen/restmuell.png
name: ' '
card_mod:
style:
hui-generic-entity-row$: |
state-badge {
flex: 0 0 60px !important;
height: 60px !important;
}
- entity: sensor.abfallgelbersack
image: /local/Bilder/Muelltonnen/gelbersack.png
name: ' '
secondary_info: none
card_mod:
style:
hui-generic-entity-row$: |
state-badge {
flex: 0 0 60px !important;
height: 60px !important;
}
- entity: sensor.abfallbio
image: /local/Bilder/Muelltonnen/biomuell.png
name: ' '
card_mod:
style:
hui-generic-entity-row$: |
state-badge {
flex: 0 0 60px !important;
height: 60px !important;
}
3 Likes
Thank you very mutch it has working for a moment i have a refresh and now it work anymore.
May a ask what you have in your configuration file? I have:
extra_module_url:
- /local/card-mod.js
in my ui-lovelace.yaml
lovelace:
mode: yaml
resources:
- url: local/card-mod.js
type: mode
under dashbord sources:
/local/card-mod.js
Is this right because the github say: You’ll need to adjust that path according to where you have installed card-mod.js . If you installed through HACS, this is probably /hacsfiles/lovelace-card-mod/card-mod.js . But when installed the path is: /config/www/community/lovelace-card-mod/card-mod.js
can you help me