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

Ildar_Gabdullin · November 12, 2023, 4:48pm

The code was already provided in that post.

MrPresident · November 12, 2023, 5:07pm

This is what i get, do you know how can i add the fan buttons below?

Ildar_Gabdullin · November 12, 2023, 5:23pm

Probably it depends on the fan. It may have only “on/off” states or 4 states as described.

MrPresident · November 12, 2023, 5:28pm

Oh I see now, well mine is no a “fan” im using script to send RF to control a fan. do you think there’s a way to draw chips or buttons like that and make them call a script?

Ildar_Gabdullin · November 12, 2023, 5:32pm

Since you chose a conventional “tile” card - you are supposed to use native “features”.
Or you may develop your own custom card.
Or you may create a card based on any stack card combining any cards to get your design.
This is not related to card-mod and cannot achieved by card-mod (it may only be used to “polish” your design).

Ildar_Gabdullin · November 12, 2023, 9:04pm

Picture Glance - distributing icons

code

type: vertical-stack
cards:
  - camera_view: auto
    type: picture-glance
    image: /local/images/test/blue.jpg
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: input_boolean.test_boolean
    card_mod:
      style: |
        .box div:nth-child(1) div:nth-child(4) {
          flex-basis: 100%;
        }
        .box div:nth-child(1) {
          flex-wrap: wrap;
        }
  - type: picture-glance
    image: /local/images/test/blue.jpg
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: input_boolean.test_boolean
    card_mod:
      style: |
        .box div:nth-child(1) {
          display: grid !important;
          grid-template-columns: repeat(4,1fr);
        }
  - type: picture-glance
    image: /local/images/test/blue.jpg
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
    card_mod:
      style: |
        .box div:nth-child(1) div:nth-child(4) {
          flex-basis: 100%;
        }
        .box div:nth-child(1) {
          flex-wrap: wrap;
        }
        .box div:nth-child(2) {
          display: grid !important;
          grid-template-columns: repeat(4,1fr);
          max-height: 80px;
        }

78andyp · November 14, 2023, 12:51am

Hi

Trying to change the size of the text for temperature in the custom:hourly-weather card.

It looks like this:

In the explorer:

I’ve tried:

card_mod:
                style: |
                  ha-card {
                    background-color: inherit;
                    color: white;
                    border-width: 0px;
                    pointer-events: none;
                  }
                  weather-bar$: |
                    .main axes bar-block bar-block-bottom temperature {
                      color: red !important;
                    }

The ha-card element works, the rest doesn’t.

Thanks
Andy

Krivatri · November 14, 2023, 5:38am

Try this:

card_mod:
  style:
    .: |
      ha-card {
        background-color: inherit;
        color: white;
        border-width: 0px;
        pointer-events: none;
      }
    weather-bar$: |
      .main axes bar-block bar-block-bottom temperature {
         color: red !important;
      }

78andyp · November 14, 2023, 12:44pm

Krivatri:

card_mod:
  style:
    .: |
      ha-card {
        background-color: inherit;
        color: white;
        border-width: 0px;
        pointer-events: none;
      }
    weather-bar$: |
      .main axes bar-block bar-block-bottom temperature {
         color: red !important;
      }

Thanks. Doesn’t work - no change.

joethornriver · November 14, 2023, 1:03pm

Thanks for the great help! I managed to change the font of the scrolling bar displaying title and song name.

Unfortunately, this does not work on iPad.

I have made this adjustment (increase the font size of the text, and increase the overall height of the element so that the text can be fully displayed and is not cut off on bottom and top):

type: custom:mini-media-player
entity: media_player.essen
sound_mode: full
name: null
icon: mdi:speaker-play
volume_stateless: false
toggle_power: false
group: false
artwork: full-cover
mini-media-player-scale: 0.5
hide:
  volume: true
  source: true
  power_state: true
  power: true
  controls: true
  icon_state: false
  state_label: true
  info: false
  name: true
  progress: false
  icon: true
info: scroll
replace_mute: next
style: |
  ha-card {
    .mmp-player .mmp-player__core.flex .entity__info .entity__info__media
    {
      font-size: 45px !important;
      max-height: 100px !important;
      line-height: 55px !important;
      height: 55px !important;
      
    }
    .mmp-player .mmp-player__core.flex .entity__info .entity__info__media .attr__media_title
    {
      font-size: 45px !important;
      max-height: 100px !important;
      line-height: 55px !important;
      height: 55px !important;
      
    }    
  }

Works great on PC with Safari and Chrome, but not on iPad.

Do you have any idea what I can change/do to show the same change on iPad?

Ildar_Gabdullin · November 14, 2023, 1:08pm

Whatever related to Safari (especially turned to be “old versions” < 16) seems to be a low-priority things to devs - so no guaranteed output. Try, experiment…

arganto · November 14, 2023, 2:03pm

You should show, what is “above” weather-bar in your screenshot.

And I would propose to simplify your selectors to avoid problems here, so e.g.

temperature instead of .main axes bar-block bar-block-bottom

If there is only one temperature class, why having all the way down to that?

Which leads me to most probably the main problem: temperature is a class so .temperature and not temperature

Same for the elements above, but as said leave them all away in this case in general.

78andyp · November 14, 2023, 2:09pm

Hi

Here is what’s above.

I’ve tried to simplify to:

              card_mod:
                style: |
                  .temperature {
                    color: red !important;
                  }

but it doesn’t work.

Thanks
Andy

arganto · November 14, 2023, 2:54pm

I didn’t suggest to simply that way. Take the old version from Krivatri and just replace what I said. “.main axes bar-block bar-block-bottom temperature” with “.temperature”

card_mod:
  style:
    .: |
      ha-card {
        background-color: inherit;
        color: white;
        border-width: 0px;
        pointer-events: none;
      }
    weather-bar$: |
      .temperature {
         color: red !important;
      }

joethornriver · November 14, 2023, 2:55pm

Thanks for the quick answer - it is working on a Safari with Ipad OS 17. Had not checked this before.

78andyp · November 14, 2023, 3:10pm

arganto:

card_mod:
  style:
    .: |
      ha-card {
        background-color: inherit;
        color: white;
        border-width: 0px;
        pointer-events: none;
      }
    weather-bar$: |
      .temperature {
         color: red !important;
      }

Thank you. That works.

What does the .: do/mean??

Can any class after a shadow root be referred to as .class??

Thanks
Andy

Ildar_Gabdullin · November 14, 2023, 3:42pm

Suggest to:

Read Docs - this chapter.
Read these posts: 1st post in this thread → link at the bottom → other stuff → a few links about navigation

Fraggz · November 14, 2023, 9:02pm

Hi,

I’m wondering if it’s possible to reduce the size of a card, including all its parameters?

I know font sizes can be reduced but you can also just reduce the complete card?

baustin104 · November 15, 2023, 3:11am

I’m banging my head against a wall on this…I’ve studied the links Ildar_Gabdullin posted and gone through several examples. I’m admittedly a CSS newbie, so any assistance is appreciated.

I’m using card-mod to style secondary entity icons in a multiple-entity-row to create a street-light-style alert panel. I’m able to style based on previous code examples posted on here, with one exception:

I’d like to conditionally show some of the rows based on the state of other binary sensors (e.g. only include the “door entry sensor status” row if my status is set as “away”.) To do this, I’m nesting the multiple-entity-row within a conditional entity, which is disrupting the card-mod styling.

I’m nearly positive it’s because I’m not selecting the correct element to style; but I’ve also read some posts about card-mod styling having inconsistent results when nested within a conditional entity (it works fine in a conditional card). I’ve opened Element inspector and attempted to follow the steps the OP posted to no avail.

Any advice on what I can do to style (color) the icon of a secondary entity in a multiple-entity-row within a conditional entity? Hopefully I put that correctly, but you get the idea. Any advice is appreciated.

type: entities
entities:
  - entity: binary_sensor.alert_inside_temperature_threshold_exceeded
    type: custom:multiple-entity-row
    name: Always Show this Row
    icon: mdi:thermometer
    secondary_info: false
    show_state: false
    entities:
      - icon: mdi:alert
      - icon: mdi:check-circle
    tap_action:
      action: navigate
      navigation_path: air
    card_mod:
      style:
        hui-generic-entity-row $: ''
        .: |
          div.entity:nth-child(1) state-badge {
            color: {% if states('binary_sensor.alert_inside_temperature_threshold_exceeded') == 'on' %} orange {% else %} grey {% endif %}
          }
          div.entity:nth-child(2) state-badge {
            color: {% if states('binary_sensor.alert_inside_temperature_threshold_exceeded') == 'off' %} green {% else %} grey {% endif %}
          }
  - type: conditional
    conditions:
      - entity: sensor.okay_to_open_windows
        state_not: '1'
    row:
      entity: binary_sensor.alert_inside_temperature_threshold_exceeded
      type: custom:multiple-entity-row
      name: Conditional Row
      icon: mdi:thermometer
      secondary_info: false
      show_state: false
      entities:
        - icon: mdi:alert
        - icon: mdi:check-circle
      tap_action:
        action: navigate
        navigation_path: air
      card_mod:
        style:
          hui-generic-entity-row $: ''
          .: |
            div.entity:nth-child(1) state-badge {
              color: {% if states('binary_sensor.alert_inside_temperature_threshold_exceeded') == 'on' %} orange {% else %} grey {% endif %}
            }
            div.entity:nth-child(2) state-badge {
              color: {% if states('binary_sensor.alert_inside_temperature_threshold_exceeded') == 'off' %} green {% else %} grey {% endif %}
            }
title: Alert Panel

Ildar_Gabdullin · November 15, 2023, 3:26am

  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: 'on'
    row:
      type: custom:multiple-entity-row
      entity: sun.sun
      show_state: false
      entities:
        - icon: mdi:alert
        - icon: mdi:check-circle
    card_mod:
      style:
        multiple-entity-row:
          $: |
            div.entity:nth-child(1) state-badge {
              color: lightgreen;
            }
            div.entity:nth-child(2) state-badge {
              color: red;
            }