šŸ”¹ Card-mod - Add css styles to any lovelace card

My apologies - Iā€™m very new at all this.

Iā€™m afraid that doesnā€™t work, either.

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? :sweat_smile: :rofl: Try my lunar phase card, where you have a lot of info about tracking moon phases :point_down: :sweat_smile:

3 Likes

haha sure, how could I forget :wink:

off topic thoughā€¦

I appreciate all the responses, as well as the cool moon card I did not know existed, so thank you VietNgoc. :slight_smile:

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;
      }

1 Like

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?

1 Like

sure, and weā€™re here to helpā€¦ :wink:
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:

  1. Take that simplest example for Entities card.
  2. 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.
  3. 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

1 Like