so what did you end up with Tom?
Also having my share of issues here (on another card btw, the new horizon-card) , and hope to find some help in your solutionā¦
Iāve had issues with styling the markdown card since the December update.
Also take note of this in the card-mod docs:
NOTE 2: Following on the note above; due to the high level of load order optimization used in Home Assistant, it is not guaranteed that the
#shadow-rootor themwc-buttonactually exists at the point in time when card-mod is looking for it. If you use the second method above, card-mod will be able to retry looking for#shadow-rootat a later point, which may lead to more stable operation.In short; if things seem to be working intermittently - try splitting up the chain.
I previously made this with a markdown card, which is what broke.
After asking here, I subsequently logged this issue, because I could see the <style> wasnāt being injected at all levels. I then later on spotted that some elements are dynamically reloaded, the the style appears shortly before disappearing. I fear thereās nothing card-mod can do about this.
Can you see a <style> element at all levels?
Thank you for your reply, so this is an issue that is not isolated to my environment. Not sure if thatās good or bad 
I set up a super simple tab in Lovelace and looks to me that the style tag is empty, is that what you mean?
In my case it was absent from a specific point downwards. If you have the tag, it means card-mod should work. You just need to get the path right.
How do you mean with getting the path right? This worked perfectly for months and then all of a sudden it stopped working but works occasionally and a Ctrl-F5 always works and on my phone it works almost all the time. So feels like it should be OK code wise?
Getting a bit desperate here since that background is very important for my way of designing HA dashboards
How are you resonating around this, waiting for a fix or trying to solve it?
Summare of devices:
- Android phone (app). Works fine 9/10 times
- iPad, tried a few times and worked just fine
- Firefox on my laptop, seems to work fine
- Chrome on laptop: Works 1/10 times. hard refresh solves the issue.
I need to figure out how to address this image using card-mod. I want to set a max height. I just canāt seem to figure out what to put in front of the curly brace. What I have below is effectively what I want, but itās obviously not working. What do I replace āimgā with?
- type: picture-entity
entity: camera.apod_nasa_gov
show_name: false
show_state: false
card_mod:
style: |
ha-card {
border-radius: 0px;
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
}
img {
max-height: 250px;
width: 100%;
object-fit: scale-down !important;
}
The keys in your card-mod config thatās basically a CSS selector (the path).
You showed that you had an empty <style> element, so whatās in your config isnāt ending up where it should or where you are expecting it to be. I canāt say what the answer is, besides that you need to investigate the path (see above). Something could be sitting at a different level in the HTML than where it used to be.
Honestly, I hate to admit this, but I gave up on my old solution. I tried every CSS trick known to me but couldnāt get anything reliable working. I didnāt want to install another custom card (there are cards for rendering HTML or your custom tables), so I just coded it with HTML and some JS to construct my table, and then CSS to style it, all in a fake custom button card. Iām not posting my solution here as itās would be off topic, but I can DM it to you or you can start a new thread and tag me.
Sorry to hear, makes me realize that I might have to reconsider my entire layout since it heavily relies on card-mod and CSS being applied. Initally thought it was the background that was the issue but now I know itās the applying of CSS to markdown cards that is the issue.
Please share your workaround in a PM and Iāll see if I can use it.
@thomasloven, should I create a github issue on this or do you have any ideas why we have this issue? My original post about this issue is here.
Did you consider to apply a theme to the card as shown above?
And you can try to put a mod_card around it and address from there with a more open $ at the end. According to the tipp in one of the last release note oder card_mod.So that the style can be re-applied if the element is there if - before - not there at the time card_mod wont to try it.
In general: Donāt tag/@ people here.
1 Like
Iāve only had an issue with styling the markdown card. I still use it in all other cases. Just wanted to make that clear in case you were going to completely drop card-mod or if readers interpret you as such.
Not sure how to do that, my card-mod knowledge is a bit limited. If you have an example Iām happy to try. I think you are on to something since a reload of the entire view solves the issue. So reloading the code if it fails might be the solution. Would you mind pointing me in the right direction?
Absolutely, sorry if that was unclear. Itās pure magic - thatās why I miss it so bad on the markdown card 
1 Like
I figured out my own issue: code attached in case anyone finds it helpful.
- type: picture-entity
entity: camera.apod_nasa_gov
show_name: false
show_state: false
card_mod:
style:
hui-image$: |
img {
max-height: 350px;
width: 100%;
object-fit: scale-down !important;
}
.: |
ha-card {
border-radius: 0px;
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
padding: 0 0 0 0px;
}
Thought about giving this a try:
type: custom:mod-card
card_mod:
style:
hui-markdown-card:
$: |
ha-card {
margin: 17px 15px 0px 15px;
background: rgba(250, 250, 250, 1.0);
box-shadow: none;
font-size: 15px;
font-family: 'Segoe UI Light';
color: #404040;
font-weight: 300;
text-align: left;
border-radius: 15px;
--mdc-icon-size: 35px;
}
card:
type: markdown
content: |
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">Test</td>
</tr>
</table>
1 Like
I gave it a try and after testing to open up HA on my laptop about 10 times my original code failed all 10 times and your code worked all 10 times.
Iāll test more tomorrow but so far it works and Iām super grateful for the help! Thanks a million!
Edit:
The only thing that broke is my H1 and H6 tags. Not sure why, any idea how to get them to work in this?
I have tried different variations of the code including/excluding the ha-markdown $: |.
card_mod:
style:
hui-markdown-card:
$: |
ha-card {
margin: 17px 15px 0px 15px;
background: rgba(250, 250, 250, 1.0);
box-shadow: none;
font-size: 15px;
font-family: 'Segoe UI Light';
color: #404040;
font-weight: 300;
text-align: left;
border-radius: 15px;
--mdc-icon-size: 35px;
}
ha-markdown $: |
h1 {
font-weight: 200;
color: 404040;
margin: 0px;
font-size: 30px;
}
h6 {
margin: 0px;
font-size: 14px;
font-family: 'Segoe UI Light';
color: #404040;
font-weight: 400;
}
Can somebody help me hiding (display: none) the icon and name of an entities entity row?
I canāt manage to get the selector (tree) right. Thanks!
Hello everyone. Please help me get rid of box shadows. I use the following template:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: soggiorno
icon_color: blue
multiline_secondary: true
primary: ŠŃŃŠ°Š»ŃŠ½Ń
card_mod:
style: |
ha-card {
box-shadow: none;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.ewelink_th01_temperature_2
icon_color: blue
card_mod: null
style: |
ha-card {
box-shadow: none;
}
- type: entity
entity: sensor.ewelink_th01_humidity_2
icon_color: blue
card_mod: null
style: |
ha-card {
box-shadow: none;
}
alignment: center
1st post ā Link at the bottom from Ildar ā Entities Card.
Arenāt those borders rather than box shadows?
I think your code is working. Try adding border: none; as well
1 Like
I have created a 5 column grid card to display a mix of button cards and mushroom chips. I am trying to use custom:mod-card to modify two aspects of the grid. My code successfully changes the font size and margins of the card header (i.e.title) but try as I might I cannot get a Border drawn around the whole grid card. This is relevant part of my code which is at the beginning of the card configuration:
type: custom:mod-card
style:
hui-grid-card$: |
.card-header {
font-size: 15px !important;
margin-top: -12px !important;
margin-bottom: -15px !important;
}
.grid-container {
display: grid;
border: 30px solid red;
}
card:
type: grid
columns: 5
square: false
title: Living Room
ā¦etcā¦etc
The .card-header part of the code works but when I enter the grid-container part of the code a border sometimes flashes on then disappears. I therefore request help on how to get the border drawn around the whole grid (i.e. around the grid-container)
Hi Ildar,
using this now for the input_text
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.: |
hui-generic-entity-row {
margin: 0px -12px;
}
:host {
--text-field-padding: 8px;
}
and its almost okā¦ Id love to also move the Label to the same 8px padding, but can not find the correct element.
would you know which element I should target?
