I am trying to completely hide an icon and a title in the tile card, to keep only buttons for target temperature using climate entity but I cannot reach the result. Anyone with a little time to provide me with a card mod code, please?
using following yaml, I could achieve the following, but I am sure that I need to edit the CSS directly to get rid of the icon background and its tiny icon.
name: ' '
icon: none
This code is working with frontend 20231206.0
type: tile
entity: climate.thermostat
features:
- type: target-temperature
card_mod:
style:
.: |
ha-card .tile {
display: none !important;
}
It will give you something like this:
It looks better in a stack-in-card card because of the missing space at the top
Unfortunately, that does not have any effect on my frontend. Adding margin to the top would not add the needed space? Thank you
I noticed that the upgrade to 2023.12.1 is breaking the code.
That is the pittfall of using card-mod, it is dependent on the frontend version.
So, this morning I rolled back to 2023.12.0 and I’ll investigate the reason why it is broken.
Interesting, I am using several tweaks for years and almost all are still working.
My current version.
I would be super happy to learn how can I properly read from the browser dev tools the path to call the particular object. Each tweak is a bit different, sometimes . is present, sometimes : sometime people use two objects on one row, sometimes the objects in the path are called in subsequent rows etc…
That Frontend is coming with Core2023.12.1 as you can see in the github page
And this is the root of the non-working code. Probably a #shadow-root or any other change in the tile div sections.
Needs investigations.
Sorry, but I do not follow. I have everything updated (there was update yesterday, 8th Dec) and you are telling me to update to the version I currently have. What am I missing?
The version of yesterday changed the div section of tile card.
The working code is now
type: tile
entity: climate.thermostat
features:
- type: target-temperature
card_mod:
style:
.: |
ha-card .content {
display: none !important;
}
Great! working. I am going to play with the top margin but if you can solve it quickly, I will appreciate it.
In browser dev tools, adding following will do the job.
ha.card {
padding-top: 10px !important;
}
but in your code, it does not work:
card_mod:
style: |
ha-card .content {
display: none !important;
}
ha.card {
padding-top: 10px !important;
}
and that’s exactly the moment I would love to learn how the CSS are inherited…
ok done
card_mod:
style: |
ha-card .content {
display: none !important;
}
ha-card {
padding-top: 10px !important;
}
There was a typo in my post above…
Sorry for interfere, in most cases there is no need to write
ha-card sub_element {
...
}
you may just write
sub_element {
...
}
since ha-card COULD be already a starting point for a DOM navigation.
I’m like @Vahaldor, I’m struggling with the DOM path. At least it was working with the unnecessary ha-card 
do not guess ))) use code inspector to define proper paths
That’s what I’m doing and never understood the dot, no dot, dollar sign, what is orange and/or blue when I’m writing the card_mod part. What if there is or not a #shadow-root, why is it important, how to deal with it.
It is recently that I got the !important tag, to override the style if already defined.
I’m a professional computer scientist and developing since 1997 but I’m a strong back-end kind of guy.
Similar, 1997, QNX realtime, cruise missiles sw. Never dealt with css before 2020, we all do smth 1st time.
Hi. If i use a sensor in the tile it hides everything as i am not using a feature. do you have a solution for just hiding the icon?
You’ll find there how to colorize the icon, I’m confident that you’ll find the way to change that code to a “display: none;” code
Here is the card-mod thread
