I tried adding !important:
card_mod:
style: |
.forecast-image-icon
{
width: 64px !important;
height: 64px !important;
}
Same issue as before, it just pushes down the footer values.
Try changing mdc-icon-size var.
It doesnāt do anything.
Then probably you are trying to set attributes to a wrong element. Check again code inspector.
It shows these attributes not to the element you are trying to use - but to its child.
1 Like
In your screenshot, you are setting the width and height of a div that is inside the .forecast-image-icon element, but then in your card-mod you are trying to target the .forecast-image-icon element itself. Try to target the same element that you are modifying in the dev inspector:
card_mod:
style: |
ha-card div.forecast-image-icon > div
{
width: 64px !important;
height: 64px !important;
}
Edit: you can override the same class that is shown in your screenshot (it seems that the element inside the .forecast-image-icon could be also something different from a div)
card_mod:
style: |
ha-card div.forecast-image-icon > *
{
width: 64px !important;
height: 64px !important;
}
2 Likes
You are awesome! That worked, thank you.
1 Like
Has anyone tried to style the whole āsectionā in the new Sections layout? Iām trying to figure out what point in the DOM tree can be tapped into. Hereās a view of it:
The top-most element that I can find is the hui-section with div.container inside that (a few levels down) being the DOM primitive (which is the element with the dashed border when in edit mode).
Editing a Section does allow you to get to its root YAML which makes me think that you can use card-mod on it, but Iām also only speculating.
I almost got this working:
type: custom:stack-in-card
cards:
- type: tile
entity: climate.zigbee_grzejnik_salon
features:
- type: climate-hvac-modes
hvac_modes:
- auto
- heat
- "off"
card_mod:
style: |
ha-card {
border: none;
}
- type: tile
entity: sensor.zigbee_grzejnik_salon_position
state_content: state
name: " "
card_mod:
style: |
ha-card {
position: absolute;
top: -30px;
right: 10px;
width: 100px;
height: 0px;
border: none;
}
But the clickable area of the second card is too big, it overlaps with the hvac controls:
How do I get this not to oveflow on the HVAC controls?
FWIW, I think I figured out my main problem. I am using:
type: custom:mod-card
card:
type: grid
card_mod:
style: |
ha-card {
border-radius: 10px;
}
on a grid card. Which does work when manually specifying the style like this. Oddly, the Readme says:
NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen , but not e.g.
conditional,entity_filter,vertical-stack,horizontal-stack,grid
but this DOES work. However, I cannot apply a template to it. Perhaps because the template canāt apply to it since itās not āseenā? 
Iām not a super CSS / Front end person so itās not clear to me but thought I would share.
You are doing exactly same what Docs suggested - using mod-card for the Grid which does not have ha-card.
to what?
type: custom:mod-card
card:
type: grid
card_mod:
style: |
ha-card {
border-radius: 10px;
}
^ This works
type: custom:mod-card
card:
type: grid
card_mod:
class: test_class
card-mod-theme: new-theme
card-mod-card: |
ha-card.test_class {
border-radius: 10px;
}
or
card-mod-theme: new-theme
card-mod-card: |
.test_class {
border-radius: 10px;
}
^ Does not work
Class cannot be applied to mod-card.
Call it a bug or a designed feature)))
And what you tried to do is not a ātemplateā. Here people understand a jinja code as a ātemplateā.
Not sure what you mean, itās in the readme / docs: lovelace-card-mod/README-themes.md at f59abc785eabb689ac42a9076197254421f96c60 Ā· thomasloven/lovelace-card-mod Ā· GitHub
āThemeā was added in a previous release?
- Release THEMES Ā· thomasloven/lovelace-card-mod Ā· GitHub
- š¹ Card-mod - Add css styles to any lovelace card - #731 by tom_l
Yeah, I keep thinking theme/class == template and mixing them up.
You can use a class for a card containing ha-card.
You cannot use a class for mod-card.(there is an issue in GitHub about this limitation)
Means - this works
type: xxx
card_mod:
class: xxx
This does not:
type: custom:mod-card
card:
type: xxx
card_mod:
class: xxx
1 Like
Thanks! This actually helps explain my confusion a lot. Appreciate it.
1 Like
@Ildar_Gabdullin is right, I have checked and mod_card only takes into account a styles config, it will not accept anything else.
Meanwhile try to use this patch, it should solve your issue. If I have some time Iāll open a pull request with that change.
1 Like
Thanks for a patch. Will be able to check in 8 days. Would be great to have a PR created))
1 Like
Hi all, assist please - is it possible to style only the first .sensor-value.clickable with Current temperature? The problem is that sensors have the same class name, maybe is it possible to check .sensor-heading value?
cards:
- type: custom:simple-thermostat
header:
name: HALLWAY
entity: climate.hallway
decimals: 0
step_size: 1
sensors:
- entity: sensor.ble_temperature_e72e00f1001b
name: Current
decimals: 1
- attribute: min_temp
name: Min
unit: '.0 Ā°C'
- entity: sensor.plug_nobo_hallway_power
name: Power
hide:
temperature: true
state: true
layout:
mode:
headings: false
card_mod:
style: |
.sensor-value.clickable { color: #4285F4; }
control:
preset:
away: true
none:
name: AUTO
Do the two .sensor-value.clickable belong to the same entity? If not, you can style each entity, so it should only apply to that entityās .sensor-value.clickable.
Does anybody know if it is possible to define the width of the slider in a slider-entity-row?