My apologies - Iām very new at all this.
In your screenshots the relevant tags are not within shadow roots. You should be able to directly style
card_mod:
style: |
.moon-img-svg {
height: 10vh;
width: 10vw;
}
Depending in order of assigment with !important
besides the exercise of getting this to work, why not try a different approach that focuses on the design you truly prefer? seems a button card with the Moon picture and those singled out attributes would be more to your liking.
enlarging the entity_picture in this cardās design would probably blow it out of proportion?
blowing it up, use a 1 column gridā¦:
or 2
and then use card_mod to kill the card gap and resize a bit
It seems that the issue was that I never tried this solution:
card_mod:
style: |
.moon-img-svg {
height: 10vh !important;
width: 10vw !important;
}
With !important. Sometimes getting these selectors to work is an exercise in frustration.
Enlarging the picture does in fact make it out of proportion to the text, but now that I have the selector correct, I can resize the text. Wondering where youāre pulling your image from? Iāve looked a few times for linkable photos and come up empty. Thatās a clean-looking card!
see this Moon platform with moon phases pictures - #23 by Mariusthvdb on how the template is done, but you can also directly add those to a button-card ofc.
Hide because off topic button-card
type: custom:button-card
template: #button_body
- main_config
- styles_grid
# - styles_label
- styles_name_left
- styles_state
entity: sensor.moon
show_state: false
icon: none
name: >
[[[ var moon = states['sensor.moon'].state;
var phases = {new_moon:'Nieuwe Maan',
waxing_crescent:'Jonge Maansikkel',
first_quarter:'Eerste Kwartier',
waxing_gibbous:'Wassende Maan',
full_moon:'Volle Maan',
waning_gibbous:'Afnemende Maan',
last_quarter:'Laatste Kwartier'};
return phases[moon] || 'Asgrouwe Maan'; ]]]
styles:
card:
- background-image: >
[[[ return `url("${states['sensor.moon_phases'].attributes.entity_picture}")`; ]]]
- background-repeat: no-repeat
- background-size: 100%
- background-position: center
- color: ivory
I suppose the moon pictures are to be found in the community freely, just search for them
the entities card on the right side is a core entities card, so nothing special (other than using type: attribute
)
Can I also flex a little please? Try my lunar phase card, where you have a lot of info about tracking moon phases
haha sure, how could I forget
off topic thoughā¦
I appreciate all the responses, as well as the cool moon card I did not know existed, so thank you VietNgoc.
Can I ask, so that I can understand better:
Why doesnāt my first solution work? If Iām reading the documentation correctly, it should work whether there is a #shadow-root in the way, or not, correct? Why isnāt it matching all the classes there?
I have a little tip for beginners with cardmod. Use this excellent helper. Follow the helper instruction. From the converted output, copy everything from the end to the ha-card selector. And insert into card under card_mod style with this as the current element.
.: |
https://matt8707.github.io/card-mod-helper/
In your case, the result looks like this
Later, after some trial and error, you will surely find out where what is under what and howā¦
type: custom:tsmoon-card
card_mod:
style:
.: |
ha-card>div.card-content>div>div.icon>img {
height: 10vh;
width: 10vw;
}
Hello
I need help on installation.
my configuration.yaml
# Load frontend themes from the themes folder
frontend:
themes: !include_dir_merge_named themes
extra_module_url:
- /www/community/lovelace-card-mod/card-mod.js
and the yaml code on a switch card
type: tile
entity: switch.eg_hwr_licht_eg_hwr_licht
card_mod:
style: |
ha-card {
color: red;
}
But the Text on card isnāt red.
does anyone see the mistake?
Why do you think that this code works for Tile card?
sure, and weāre here to helpā¦
where did you find this syntax for the primary text (hint) on the card to change color ?
One more remark: we should not take a code for card_A and blindly apply it for card_B.
Hi,
I am using a tile card, but I would like to have the icon itself (not just the color) changed based on the status of that entity.
I tried the YAML below, but was not succesfull. Iām seeing a lot of posts to change the icon colour based on the status, but not the icon itself.
type: tile
entity: sensor.sauna_status
name: Status
vertical: false
hide_state: false
show_entity_picture: false
icon: |-
{% if is_state(entity, '0') %}
mdi:power-off
{% else %}
mdi:power-standby
{% endif %}
I guess this is possible using card-mod?
sorry.
The instructions on Git-Hub say ā¦ take this code, copy it into your card and the text is red.
I have now used a ātype: entitiesā card. It works with this code. Now I know that the integration works if I use the right syntax.
How do I find out for a type of card which attributes are supported, e.g. ha-card.
i was curious if anyone has used card mod with kiosk mode at all. or if itās even possibleā¦
as an example i was hoping to have something like a fixed position for a cardā¦ but it doesnāt matter whether the header in kiosk mode is showing or hidden, itās always in the same spotā¦ can we make the fixed position based on whether the header is showing in kiosk mode?
Correct, and this code is for Entities card.
What you can (should) do is:
- Take that simplest example for Entities card.
- With Code Inspector (or whatever it is called in your browser) find out which particular css property that simplest code changes. This is for learning.
- Next take your Tile card and with Code Inspector find out what elements of your card and with what css properties may be styled.
Or use a shorter way: find ready styles for Tile card for your needs.
Based on some examples in this topic (thx), I concluded that I should adapt the mdc-icon propertiesā¦ But below code is not successful. Can anyone help?
type: tile
entity: sensor.sauna_status_text
name: Status
vertical: false
hide_state: false
show_entity_picture: false
icon: mdi:heat-wave
card_mod:
style: |
ha-state-icon {
--mdc-icon:
{% if is_state('sensor.sauna_status_text', 'Uitgeschakeld') %}
"mdi:power-off"
{% elif is_state('sensor.sauna_status_text', 'Stand-by') %}
"mdi:power-standby"
{% elif is_state('sensor.sauna_status_text', 'Opwarmen') %}
"mdi:heat-wave"
{% elif is_state('sensor.sauna_status_text', 'Fout!') %}
"mdi:alert-circle"
{% else %}
"mdi:help-circle"
{% endif %};
}
take out all the quotes around the mdi: icons
edit: I didnt check whether this is a functional mod for tile, my remark was only valid for the jinja template itself