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

Ildar_Gabdullin · February 8, 2021, 10:59pm

Please check here:

There are examples with common style for all entities.
Note that you can specify a common style and then override it for some particular entity like here:

type: entities
title: 'Changed color'
style: |
  ha-card {
    color: blue;
  }
  ha-card .card-content {
    color: red;
  }
entities:
  - entity: input_boolean.test_boolean
    name: Inherited color
  - entity: sun.sun
    name: Inherited color
    secondary_info: last-changed
  - entity: sun.sun
    name: Changed color
    secondary_info: last-changed
    style: |
      :host {
       color: cyan;
      }

123 · February 8, 2021, 11:15pm

The issue I am experiencing is that if I move the style block to the left, so it applies to all entities, it fails to work (even for just one entity).

type: entities
entities:
  - entity: input_boolean.test_boolean
style:
  hui-generic-entity-row:
    ha-entity-toggle:
      $: |
        ha-switch {
         display: none;
        }

Does the reference within the style have to be modified?

Ildar_Gabdullin · February 8, 2021, 11:20pm

Please check this:

type: entities
title: 'Checkbox: hidden'
show_header_toggle: false
entities:
  - entity: input_boolean.test_boolean
  - entity: input_boolean.test_boolean
style:
  hui-toggle-entity-row:
    $:
      hui-generic-entity-row:
        ha-entity-toggle:
          $: |
            ha-switch {
             display: none;
            }

"hui-generic-entity-row" is inside shadow-root of "hui-toggle-entity-row", so you must specify it.
And you mustn’t if the style is for a particular entity (in short, you are already inside the shadow-root).

Ildar_Gabdullin · February 9, 2021, 12:16am

Colored checkbox:

NOTE:
Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).

Track with static color, colored track’s border:

  - entity: input_boolean.test_boolean
    name: 'colored back (static), colored border'
    style:
      hui-generic-entity-row:
        ha-entity-toggle:
          $:
            ha-switch:
              $: |
                .mdc-switch .mdc-switch__track {
                  background-color: yellow !important;
                  border-color: green !important;
                }

Track with conditional color, colored track’s border:

  - entity: input_boolean.test_boolean
    name: 'colored back (conditional), colored border'
    style:
      hui-generic-entity-row:
        ha-entity-toggle:
          $:
            ha-switch:
              $: |
                .mdc-switch .mdc-switch__track {
                  border-color: green !important;
                }
              .: |
                ha-switch {
                --switch-unchecked-track-color: yellow;
                --switch-checked-track-color: red;
                }

Thumb with conditional color:

  - entity: input_boolean.test_boolean
    name: colored button (conditional)
    style:
      hui-generic-entity-row:
        ha-entity-toggle:
          $: |
            ha-switch {
              --switch-unchecked-button-color: yellow;
              --switch-checked-button-color: red;
            }

More examples are described here.

123 · February 9, 2021, 4:22am

Thanks again! I will have to learn more about how to navigate through the various levels. Your examples are very helpful.

Mikael_Kristensen · February 9, 2021, 6:19am

Thanks for all your posts, they have been quite informative!

But I think I’m at a state where you were too in the beginning. Not grasping the whole idea and not being able to read a good toturial.

Is the idea that you start your tree in the top layer, and write in code your way down untill you get to the eneioty you want changed?
And that $: is to change into those shadow-y-thing-y?
And the dot-colon-space-pipe >> .: | << is for when theres actually coming style code?

Ildar_Gabdullin · February 9, 2021, 10:04am

Yes, I am trying to use this approach.
Also, in this thread there was at least one more method described by the developer of card-mod (look at his posts, you will find the needed one).

It was described in the GitHub (GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card).
$: is used to go inside shadow-root of some element.

.: is used to go inside some element (not shadow-root) - see GitHub.

I am not 100% sure but I think that the pipe | is used to break a line before styles:

    style: |
      :host {
        color: red;
      }
or
    style: ':host { color: red; }'

    style:
      hui-generic-entity-row:
        ha-entity-toggle:
          $: |
            ha-switch {
              --switch-unchecked-button-color: yellow;
              --switch-checked-button-color: red;
            }            
or
    style:
      hui-generic-entity-row ha-entity-toggle:
        $: 'ha-switch { --switch-unchecked-button-color: yellow; --switch-checked-button-color: red; }'

The means that the pipe must be used ONE time after the LAST colon.

The example:

type: entities
title: Using pipe
show_header_toggle: false
entities:
  - entity: input_boolean.test_boolean
    name: colored text
    style: |
      :host {
        color: red;
      }
  - entity: input_boolean.test_boolean
    name: colored text
    style: ':host { color: red; }'
  - entity: input_boolean.test_boolean
    name: colored button
    style:
      hui-generic-entity-row:
        ha-entity-toggle:
          $: |
            ha-switch {
              --switch-unchecked-button-color: yellow;
              --switch-checked-button-color: red;
            }            
  - entity: input_boolean.test_boolean
    name: colored button
    style:
      hui-generic-entity-row:
        ha-entity-toggle:
          $: 'ha-switch { --switch-unchecked-button-color: yellow; --switch-checked-button-color: red; }'
  - entity: input_boolean.test_boolean
    name: colored button
    style:
      hui-generic-entity-row ha-entity-toggle:
        $: 'ha-switch { --switch-unchecked-button-color: yellow; --switch-checked-button-color: red; }'

KTibow · February 9, 2021, 2:36pm

I’ve been off here for a bit. Are there any posts that haven’t already been answered?

parautenbach · February 17, 2021, 7:56pm

How can I reach the first div in order to add style elements? I tried a few searches but I’m not even sure what to search for. I scanned a number of Ildar Gabdullin’s posts as there are many examples but except for going into shadow roots I couldn’t find the answer for this.

KTibow · February 17, 2021, 11:48pm

I’m pretty sure you don’t need shadow-rooting for that. What happens without shadow-rooting? Could you also specify your whole intentions?

parautenbach · February 18, 2021, 5:17am

Sorry if I explained badly. I meant: I understand how to navigate into shadow roots (and there are many examples of those) and how to get into inner elements (like a div) but here are 3 divs on the same level and I’m unsure how to be specific about how to apply styling to only one of those divs. Should I aim to style the class on the div instead, since they each use different classes?

Ildar_Gabdullin · February 18, 2021, 8:27am

I was trying to simulate your situation but failed since I do not have any details…
In my opinion you should use smth like “.classname” notation.
Like:

style: |
  ha-card .mmp__bg {
    ....
  }

But cannot check myself if it works…

KTibow · February 18, 2021, 2:36pm

The class styling would be the easiest, but you could also try nth-of-type.

maxym · February 18, 2021, 2:56pm

there are several css pseudoclasses for that. ie :first-child etc

see https://www.w3schools.com/css/css_pseudo_classes.asp

Ildar_Gabdullin · February 18, 2021, 6:00pm

Specially for @parautenbach

Styling "custom:mini-media-player"

Font-size for all text:

type: 'custom:mini-media-player'
name: Player
toggle_power: true
entity: media_player.kodi_rpi_1
artwork: full-cover
card_mod:
  style: |
    ha-card {
      font-size: 25px !important;
    }

Colored player’s name (+font-size):

card_mod:
  style: |
    .entity__info__name {
      font-size: 25px !important;
      color: magenta !important;
    }

Colored movie’s (or song) name (+font-size):

card_mod:
  style: |
    .entity__info__media {
      font-size: 25px !important;
      color: magenta !important;
    }

Colored icon:

card_mod:
  style: |
    .entity__icon {
      color: magenta !important;
    }

Alternatively - the icon may be styled by using a stock “--mmp-icon-color” variable:

card_mod:
  style: |
    ha-card {
      --mmp-icon-color: cyan !important;
    }

Colored “power” button:

card_mod:
  style:
    mmp-powerstrip $: |
      ha-icon-button {
        color: cyan !important;
      }

Colored buttons (except “power” button):

card_mod:
  style:
    mmp-media-controls $: |
      ha-icon-button {
        color: cyan !important;
      }

Colored play-control buttons:

card_mod:
  style:
    mmp-media-controls $: |
      .flex.mmp-media-controls__media ha-icon-button {
        color: cyan !important;
      }

Colored play-control buttons (different colors):
(Updated 28.02.21 because of this post)

card_mod:
  style:
    mmp-media-controls $: |
      .flex.mmp-media-controls__media ha-icon-button:nth-child(1) {
        color: cyan !important;
      }
      .flex.mmp-media-controls__media ha-icon-button:nth-child(2) {
        color: red !important;
      }
      .flex.mmp-media-controls__media ha-icon-button:nth-child(3) {
        color: lightgreen !important;
      }

Colored “mute” button:

    card_mod:
      style:
        mmp-media-controls $: |
          .mmp-media-controls__volume.flex ha-icon-button {
            color: cyan !important;
          }

Colored progress bar:

    card_mod:
      style:
        mmp-progress $: |
          .mmp-progress:before {
            background-color: cyan !important;
          }
        .: |
          mmp-progress {
            --mmp-accent-color: magenta;
          }

Colored volume slider:

    card_mod:
      style: |
        ha-card {
          --md-slider-inactive-track-color: cyan;
          --md-slider-active-track-color: red;
          --md-slider-handle-color: green;
        }

Transparent cover:

card_mod:
  style: |
    .mmp__bg .cover {
      opacity: 0.1 !important;
    }

Alternatively - the opacity may be styled by using a stock “--mmp-artwork-opacity” variable:

card_mod:
  style: |
    ha-card {
      --mmp-artwork-opacity: 0.3 !important;
    }

Colored shortcut buttons:

type: custom:mini-media-player
name: Player
toggle_power: true
card_mod:
  style:
    mmp-shortcuts $: |
      mmp-button ha-icon {
        color: cyan;
      }
      mmp-button {
        background-color: green;
      }
artwork: full-cover
entity: media_player.kodi_iiyama
shortcuts:
  columns: 4
  buttons:
    - icon: mdi:dog
      type: source
      id: aaaa
    - icon: mdi:dog
      type: script
      id: script.test_script
    - icon: mdi:dog
      type: script
      id: script.test_script
    - icon: mdi:dog
      type: script
      id: script.test_script

For some particular button:

card_mod:
  style:
    mmp-shortcuts $: |
      mmp-button:nth-of-type(2) ha-icon {
        color: cyan;
      }
      mmp-button:nth-of-type(2) {
        background-color: green;
      }

Colored shortcut name - similarly to colored icon:

card_mod:
  style:
    mmp-shortcuts $: |
      mmp-button span {
        color: cyan;
      }
      mmp-button {
        background-color: green;
      }

More examples are described here.

splinter · February 19, 2021, 1:40pm

If I use “custom: slider-entity-row” in a new card, everything works fine:

type: entities
entities:
  - type: 'custom:slider-entity-row'
    entity: input_number.secondi_accensione_luce_davanti
    name: Secondi accensione
    icon: 'mdi:clock'

but if I use it inside a card where there are already other entities, the right margin of the slide disappears

type: 'custom:mod-card'
style: |
  ha-card {
    border: 1px solid black;
    background: white;
  }
card:
  type: vertical-stack
  cards:
    - type: 'custom:button-card'
      name: Luce davanti
      styles:
        name:
          - font-size: 20px
    - type: 'custom:slider-entity-row'
      entity: input_number.secondi_accensione_luce_davanti
      name: Secondi accensione
      icon: 'mdi:clock'
    - type: horizontal-stack
      cards:
        - type: 'custom:button-card'
          entity: input_select.modalita_luce_davanti
          icon: 'mdi:lightbulb-on-outline'
          name: sempre_acceso
          tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              entity_id: input_select.modalita_luce_davanti
              option: sempre_acceso
          show_state: false
          show_name: false
          state:
            - value: sempre_acceso
              color: 'rgb(5, 147, 255)'
        - type: 'custom:button-card'
          entity: input_select.modalita_luce_davanti
          icon: 'mdi:motion-sensor'
          name: automatico
          tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              entity_id: input_select.modalita_luce_davanti
              option: automatico
          show_state: false
          show_name: false
          state:
            - value: automatico
              color: 'rgb(5, 147, 255)'
        - type: 'custom:button-card'
          entity: input_select.modalita_luce_davanti
          icon: 'mdi:lightbulb-off-outline'
          name: sempre_spento
          tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              entity_id: input_select.modalita_luce_davanti
              option: sempre_spento
          show_state: false
          show_name: false
          state:
            - value: sempre_spento
              color: 'rgb(5, 147, 255)'

Can anyone help me?

leacho73 · February 19, 2021, 3:10pm

Hi All,

I am looking at aligning my text in the middle of a card using the card-mod add-on.

I’ve tried aligning using the following code:

     - type: 'custom:simple-thermostat'
        entity: climate.kitchen
        show_header: false
        control: false
        step_layout: row
        step_size: '0.5'
        hide:
          temperature: true
          state: true
        style: |
          ha-card {
            --st-font-size-xl: 20px;
            --st-font-size-m: 20px;
            --st-font-size-title: 20px;
            --st-font-size-sensors: 20px;
            --st-spacing: 1px;
            color: black;
            height: 192px;
            text-align: center;
            vertical-align: middle;
          }

But I am just seeing the following:

Is it possible to vertically align the text to the center?

Its worth noting that the text displayed is from the simple-thermostat card and the plus and minus are buttons.

Thanks
Leacho

parautenbach · February 19, 2021, 8:01pm

Thank you, but I can’t seem to solve this one with card-mod (and it seems I don’t need to as I’ll explain).

I thought this gave me the lead I needed:

Ildar_Gabdullin:

type: 'custom:mini-media-player'
name: Player
toggle_power: true
style: |
  .mmp__bg .cover {
    opacity: 0.1 !important;
  }
entity: media_player.kodi_rpi_1
artwork: full-cover

What I wanted to do was to have a default background image (cover artwork) when there’s none available (like when the player is off).

This is what I tried:

          - type: custom:mini-media-player
            name: Main Bedroom
            entity: media_player.main_bedroom
            artwork: cover
            volume_stateless: true
            hide:
              power: true
              volume: false
              mute: true
            idle_view:
              when_idle: false
              when_paused: false
              when_standby: false
            style: |
              .mmp__bg .cover {
                background-image: url('/local/tivoli-model-three.png');
                background-size: cover;
              }

The problem is that this doesn’t work, because when there’s no artwork there’s no .cover class (I only discovered this now).

To help explain this better:

This is what the HTML looks like when there is artwork.

And this, when there’s none:

Screenshot 2021-02-19 at 21.40.44

Note how <div class="mmp__bg"></div> is empty.

Of course, card-mod can only modify what’s there.

And to make me really feel silly, I just discovered there’s already a documented feature for this in mini-media-player. My humble apologies for wasting anybody’s time. Ildar, your list of examples are still useful – I’m using the opacity config now.

Ildar_Gabdullin · February 19, 2021, 8:33pm

Got your point.
I have just started looking at this card - so could you tell me which property is to be used to specify the “idle picture”?

Please do not apologize - I must thank you for pointing me at this useful card.
Also my styling examples will be useful for somebody anyway. I am also still learning and value every good & clear advice.

BTW, you still can do that:

type: 'custom:mini-media-player'
name: Player
toggle_power: true
style: |
  .mmp__bg {
    background-image: url("/local/images/persons/ildar.png") !important;
    background-repeat: no-repeat  !important;
  }
artwork: material
entity: media_player.kodi_iiyama

Left - idle, right - some music is played:

parautenbach · February 21, 2021, 7:59pm

Sure, search for background under the main card options here.

You’re welcome – and thank you.

Ildar_Gabdullin:

BTW, you still can do that:

type: 'custom:mini-media-player'
name: Player
toggle_power: true
style: |
  .mmp__bg {
    background-image: url("/local/images/persons/ildar.png") !important;
    background-repeat: no-repeat  !important;
  }
artwork: material
entity: media_player.kodi_iiyama

Left - idle, right - some music is played:

Yes, you’re right. It’s one of the things I did but the problem was that I wanted the “smart” logic of MMP to size and fit the picture in the same way it does for cover art (I could’ve copied just all the attributes of the cover class but didn’t want to duplicate it, or size the image exactly).

Compare e.g.

Screenshot 2021-02-21 at 21.50.58

which cuts off the picture in the same way your picture in your example is, with

Screenshot 2021-02-21 at 21.51.23

which is what you get using MMP’s background option (cropped but in a different way).

But, it’s still useful if people want to have all kinds of other interesting effects and things that the background setting doesn’t cover.