🔹 Card-mod - Add css styles to any lovelace card

[ryangus]

As a HASS newbie, I’m losing my mind going round in circles simply trying to change the font size and colour of an entity state (in this case, a weather forecast).

I struggled for hours just trying to work out how to wrap text so the string fit, and ended up having some success with a button card (of all things?!). Now I’ve spent the last hour just trying to resize the text! My card code is as follows:

• show_name: false
  show_icon: false
  type: button
  tap_action:
  action: toggle
  entity: sensor.redcliffe_bom_extended_text_0
  show_state: true

Can someone please tell me what I need to do to increase the font size?

[Mariusthvdb (Marius)]

@ryangus

what I need to do to increase the font size?

you mean like this:

type: button
entity: input_boolean.test
name: Button with card-mod
card_mod:
  style:
    ha-state-icon:
      $: |
       ha-icon {
        color: {{'red' if is_state(config.entity,'on') else 'green'}};
       }
    .: |
      ha-card {
        color: {{'green' if is_state(config.entity,'on') else 'red'}};
        background: {{'black' if is_state(config.entity,'on') else 'gold'}};
        font-size: 40px !important;
      }

[VietNgoc (Ngoc John)]

background: #443EF4;

Delete the quotes for hex colors, then it will work …

[ryangus]

@Mariusthvdb

card_mod:
  style:
    ha-state-icon:
      $: |
       ha-icon {
        color: {{'red' if is_state(config.entity,'on') else 'green'}};
       }
    .: |
      ha-card {
        color: {{'green' if is_state(config.entity,'on') else 'red'}};
        background: {{'black' if is_state(config.entity,'on') else 'gold'}};
        font-size: 40px !important;
      }

I ended up getting it to work with this:

styles:
  card:
    - font-size: 20px
  state:
    - text-wrap: wrap

However, for some reason the wrap text works on my PC and phone, but not my tablet Could this be that the tablet is too old (Android 6, Chrome 106.0.5249.126)?

[Ildar_Gabdullin]

Yes, you still have quotes here.

[fela93]

How can I move only text to the bottom

type: custom:mushroom-template-card
layout: vertical
primary: livingroom
icon: mdi:sofa
icon_color: "#C63C51"
entity: input_boolean.vacuum_room_7
tap_action:
  action: toggle
fill_container: false
layout_options:
  grid_columns: 1
  grid_rows: auto
multiline_secondary: true
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: transparent;
        --icon-symbol-size: 30px;
        --icon-size: 0px;
      }
    .: |
      ha-card {
        box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.66);
        background: 
          {% if ( (is_state('sensor.l20_ultra_current_room', 'Living room') and (is_state('sensor.l20_ultra_task_status', 'cleaning_paused') or is_state('sensor.l20_ultra_task_status', 'cleaning'))) or is_state('input_boolean.vacuum_room_7', 'on') ) %}
            #ffb152
          {% else %}
            "#ffffff"
          {% endif %};
        --card-primary-font-size: 11px;
        --card-primary-font-weight: bold;
        --card-secondary-font-size: 12px;
        --card-primary-color: black;
        --card-secondary-color: black;
        margin: 0px 0px 0px 0px !important;
        padding: 7px 0px 0px 0px !important;
        border: 0.1px outset gray;
        
      }
      ha-card:active {
        transform: scale(0.975);
        transition: 0s;
      }

[Mariusthvdb (Marius)]

@ryangus

styles:
  card:
    - font-size: 20px
  state:
    - text-wrap: wrap

This is not card_mod but a config setting in custom:button-card so completely unrelated to this thread, or your question to which I posted my help

[sparkyvision]

I’m attempting to make my moon card’s icon bigger, and I’ve been over the documentation…this code feels like it should work, but it doesn’t.

The card in question: HA-TSMOON

type: custom:tsmoon-card
language: en
card_mod:
  class: middle-contained
  style:
    ha-card $:
      card-content $:
        entity-row $:
          icon $:
            img $: |
              .moon-img-svg {
                height: 10vh;
                width: 10vw;
                }

Reading other cases, it seems that unless you’re drilling down through a shadow-root, you don’t have to do the string of selectors thing, but I’ve tried just .moon-img-svg and that didn’t work either, as well as several variations of the above.

[Ildar_Gabdullin]

@sparkyvision

  style:
    ha-card $:

Try without ha-card.

[ryangus]

My apologies - I’m very new at all this.

[sparkyvision]

I’m afraid that doesn’t work, either.

[arganto]

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

[Mariusthvdb (Marius)]

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

[sparkyvision]

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!

[Mariusthvdb (Marius)]

@sparkyvision

Wondering where you’re pulling your image from

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)

[VietNgoc (Ngoc John)]

Can I also flex a little please? Try my lunar phase card, where you have a lot of info about tracking moon phases

GitHub - ngocjohn/lunar-phase-card: 🌘 Custom card for tracking Moon phases

[Mariusthvdb (Marius)]

haha sure, how could I forget

off topic though…

[sparkyvision]

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?

[VietNgoc (Ngoc John)]

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

[HerbertTestmann]

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?