- May be the style is incorrect, i.e. not the mentioned āindentationā or āpipeā problem. Is it your code? The code must be written based on actual DOM paths.
- This is not related to card-mod-themes, suggest to ask in the main card-mod thread.
2 Likes
Hey
I use the tile card with input selection to select a room. I was already able to hide the icon and title so that there is only the selection part. But I canāt figure out how to reduce the size of the selection menu. Does anyone have a little tip for me? Thanks in advance
- type: tile
entity: input_select.media_select_room
features:
- type: select-options
card_mod:
style:
hui-card-features $: |
hui-select-options-card-feature {
margin-bottom: -10px !important;
margin-left: -10px !important;
margin-right: -10px !important;
}
.: |
div.content {
display: none;
}
Wrong thread. At least example is not related to a theme modding.
1 Like
Oh sry. I should read the complete title of the topic. 
Edit:
I figured out the problem ā I needed to remove the whitespaces. Iāll leave this in case someone finds it useful in the future. This comment explains how to use classes and the shadow DOM.
I have a div in a card that I am trying to target that requires going down the shadow DOM. I can target it just fine with card-mod-card or with card-mod-card-yaml. Iām trying to figure out if there is a way to assign a class to the card and only select the div if the card it is in matches the class.
Example:
card-mod-card-yaml: |
"div hui-horizontal-stack-card $": |
div {
justify-content: flex-end;
gap: 0 !important;
}
This works just fine, but ideally Iād be able to only target this div if the ha-card has a particular class. I can target ha-card with a class if I use card-mod-card and specify the class there, but then I canāt access the div because I canāt navigate the shadow DOM. Iāve tried multiple different configurations and canāt seem to get it working, so I figured Iād ask here if its something that is even possible. TIA!
Sadly the Dashboard has had some changes, with the view set to panel, box-shadows is disabled for the card, and therefore all the nested cards, see this ticket: Theme variable box-shadow / ha-card-box-shadow doesnāt work with Dashboard view type āpanelā. Ā· Issue #21038 Ā· home-assistant/frontend (github.com)
So this seems to be the way forward, not a bug. Which lead me here.
Does anyone know a way to add in global shadows to all the cards again by using card-mod in the them yaml?
Ignoring box-shadow for nested cards IS a bug.
I guess there is an error, described here.
As a temporary fix:
test_panel_fix:
card-mod-theme: test_panel_fix
card-mod-view-yaml: |
hui-panel-view $: |
hui-vertical-stack-card {
--restore-card-border-shadow: 5px 5px 8px red, 10px 10px 8px green, 15px 15px 8px blue;
}
Update: not needed in 2024.11 due to PR.
1 Like
Thank you for the temp fix, will try out. Also thanks for researching and mentioning it is in fact a bug!
Hi, I tried that code in my theme, but it doesnāt work. I think itās because I use a grid card and in there I have layout-card. Do you happen to know what the correct code might be? I tried changing hui-vertical-stack-card to some variations with grid and layout, but didnāt manage to get it t to work.
This is my basic dashboard setup:
- title: Home
path: home
type: panel
icon: "mdi:home"
badges: []
cards:
- type: grid
columns: 1
square: false
cards:
- custom:layout-card
The code I posted is for a simple case: a stack card on a panel view.
In other cases you will probably have to add alterations(
Thanks, this seems to be the correct code for grid-card, in case somebody else also comes across this
card-mod-theme: theme-name
card-mod-view-yaml: |
hui-panel-view $: |
hui-grid-card {
--restore-card-border-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16);
}
hui-grid-card > * {
box-shadow: var(--restore-card-border-shadow) !important;
}
Keep in mind, this not a solution, but just a bandaid. Since itās using card-mod, itās delayed when refreshing browser. So youāll see the shadows get added in in a split second.
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: ' '
Wrong thread, should be asked here.
This thread is for THEMES.
Off-topic: increasing an image size may cause increasing a whole rowās height.
If you need to make the image more vivid - consider using a button-like card instead of Entities card.
Not sure if I am being a bit stupid! New to YAML, so I am trying to add a image to one of my dashboard cards instead of the name, when I add this below, i have created the file in the www/views/ folder which I created and has this:
title: āRachel Test Tabā
path: card-mod-themes-rachel
icon: mdi:car
badges:
cards:
views:
- !include www/views/card-mod-themes-rachel.yaml
I get this error . I am sure I am doing something stupid!
Include works in yaml mode dashboards only.
@Ildar_Gabdullin / anyone - can someone give me a pointer as to how I might change the title of my view dynamically?
In my case Iād like to adjust the āHeatingā to be āHeating 
ā when the heating is on.
How do I remove the 'unit_of_measurement from an entity in an entities card?
My example entities card now looks like this:
The code for this card:
type: entities
title: Power [Watt]
entities:
- entity: sensor.electricity_meter_power_consumption_phase_l1
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
.info {
display: none;
}
- entity: sensor.electricity_meter_power_consumption_phase_l2
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
.info {
display: none;
}
- entity: sensor.electricity_meter_power_consumption_phase_l3
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
.info {
display: none;
}
I want the card look like this:
In other words I want to remove the āWā indication and just have the numbers shown.
Have tried without success:
.unit_of_measurement {
display: none;
}
and:
.value {
--secondary-text-color: transparent;
}
How can I remove the āWā indication after the numbers for the unit of measurement?
Many thanks in advance.
this might be better served with another card, why eg not simply list those values in a Markdown if you want to hide everything, except a value?
Also, if you want to move to card-mod thread that would help you better, this is the card-mod-theme thread, and not about per card mods
I havent seen it done though, and
card_mod:
style:
hui-generic-entity-row:
$: |
.text-content:not(.info) {
display: none;
}
hides both value and unit, because the unit does not seem to have its own element to mod.
reason to again to point to other solutions, in core use markdown,
or, in custom, use template-entity-row, and simply dont set a unit
- type: custom:template-entity-row
# name: []
# icon: []
state: >
{{states('sensor.electricity_meter_power_consumption_phase_l3')}}
although that would list the value at the right side of the card, in its regular spot
Anyways, hop over to card-mod thread and get more assistance there
1 Like
Dear Marius [Mariusthvdb],
Thank you very much; I have used your ātemplate-entity-rowā solution.
Apologies for using the wrong thread.
I donāt see/know how to move my question to the card-mod thread; maybe a moderator can do this?
itās fine, just use the other thread next time.
glad I could help you, thx for the feedback
1 Like