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

[au190 (Kallós Róbert)]

the answer to my question

type: ‘custom:mod-card’
style:
hui-vertical-stack-card:
$: |
#root > * {
margin: 0px 0 0px 0;
}
card:
type: vertical-stack
cards:

• entity: switch.plug_perfume
  type: ‘custom:au190-mqtt_card’
• columns: 5
  entities:
  • entity: binary_sensor.living_room
  • entity: sensor.living_room_temp
  • entity: binary_sensor.md_living_room
  • entity: binary_sensor.alarmsytem
  • entity: binary_sensor.entrance
    show_icon: true
    show_name: false
    show_state: false
    type: glance
• entities:
  • entity: sensor.bed_room_temp
    secondary_info: last-changed
  • entity: sensor.living_room_temp
    secondary_info: last-changed
  • entity: sensor.bed_room_pressure
    secondary_info: last-changed
  • entity: sensor.living_room_pressure
    secondary_info: last-changed
    type: entities

[dany83 (Danilo)]

hello, i have a probelm with my card
I can change the size of the card but I cannot change edit the size
I send you picture my problem , can i solve this ?
even if I change the size of the card I cannot adjust it on lovecale because edit equal size
it is possible to have a free card movement position in the lovelace ?

entity: switch.shelly_shsw_1_ba661d
hold_action:
  action: more-info
icon: 'mdi:lightbulb'
icon_height: 100px
name: SALA
show_icon: true
show_name: true
tap_action:
  action: toggle
type: button
style: |

  ha-card {
      border-radius: 20px;
      overflow: hidden;
      width: 60%;
      height: 40%;
      margin: 0 auto;
      padding-top: 0p
      border: 6px solid green;
     
    }

[thomasloven (Thomas Lovén)]

thomasloven/lovelace-layout-card

[dany83 (Danilo)]

Hello, i have install this custom you card.
But i no very good undestand solve this problem in my card .
Can you please example do with my entity ?
So i can undestand all code i need put for see a right card equal edit and can solve.

[serega.pte (Sergey)]

Hello. I have a piece of markup in my ui-lovelace.yaml

• type: custom:color-lite-card
  entity: light.zal_rgbw_controll_85
  tap_action:
  action: none
  color_image:
  “/local/ui/floorplan_v2/livingroom_led4.png”
  style:
  top: 29.7%
  left: 45.1%
  width: 25.5%

I have several light sources in one room and I would like to display different images for color_image.
Can i use something like this?

if(light.zal_osnovnoi_svet_93 == «on», url(“/local/ui/floorplan_v2/livingroom_led.png”), url("/local/ui/floorplan_v2/livingroom_led4.png

[eggman (bertie basset)]

This doesn’t seem to have anything to do with card-mod. Does the documentation for color-lite-card suggest that color_image can use tempaltes? If so, that’s the way.

If not then try using either

iantrich/config-template-card

or

gadgetchnnel/lovelace-card-templater

[codylv7 (Cody)]

I’ve been banging my head against the wall for a few hours now trying to figure out how to remove the padding/margins from text divider row. Currently I have:

- type: entities
  entities:
    - type: custom:text-divider-row
      debug_cardmod: true
      text: People
      style:
        .: |
        "#states div":
          $: |
            .text-divider-row {
              margin: 0px;
            }

Which does nothing… the selector in Chrome is

document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view").shadowRoot.querySelector("#columns > div > stack-in-card").shadowRoot.querySelector("ha-card > div > hui-vertical-stack-card").shadowRoot.querySelector("#root > hui-entities-card").shadowRoot.querySelector("#states > div > text-divider-row").shadowRoot.querySelector("h2")

Not sure what I’m missing. Any help is appreciated

[thomasloven (Thomas Lovén)]

When you add styles to a row in an entities card, .: is text-divider-row.shadowRoot.
I don’t have the means to test right now, but I think what you want is:

style: |
  div {
    margin: 0 -16px;
  }

[Mariusthvdb (Marius)]

is it correct the new card-mod still shows 1.1.0 in the inspector:

I’ve given it several reload resources, and refreshes now…

btw Thomas, does this new version already include the mdi helper classes we discussed earlier?

[thomasloven (Thomas Lovén)]

If by “still” you mean “since two hours”, then yes. That’s a new thing.

No, that feature is not included yet. That will be in 2.0 or so. There’s a big update to card-mod coming when I finish the documentation and examples.

[Mariusthvdb (Marius)]

@thomasloven

If by “still” you mean “since two hours”, then yes. That’s a new thing.

no, I meant after upgrading from the previous version. Expected it to show the version 14 in the console, while it is showing 1.1.0, as it did before the update.
No issue, just wanting to ascertain my install went alright. Must admit I am not even sure I had the beta version or 13 installed.

@thomasloven

There’s a big update to card-mod coming when I finish the documentation and examples.

cant wait!, thanks for this great and unmissable addition to HA.

[sira87]

Hi I need some help changing the vertical-align: of the highlighted icon from “middle” to “text-bottom”.

I managed to change the size of the icon with this code:

 :host {
      font-size: 24px;
      --iron-icon-width: 32px;
      --iron-icon-height: 32px;
       }

but I cannot change its position and it’s driving me crazy.

Icon:

Chrome Inspector screenshot:

JS path of the icon:

document.querySelector(“body > home-assistant”).shadowRoot.querySelector(“home-assistant-main”).shadowRoot.querySelector(“app-drawer-layout > partial-panel-resolver > ha-panel-lovelace”).shadowRoot.querySelector(“hui-root”).shadowRoot.querySelector(“#view > hui-panel-view > layout-card”).shadowRoot.querySelector(“#columns > div:nth-child(1) > hui-entities-card:nth-child(1)”).shadowRoot.querySelector(“#states > div:nth-child(1) > hui-toggle-entity-row”).shadowRoot.querySelector(“hui-generic-entity-row”).shadowRoot.querySelector(“state-badge”).shadowRoot.querySelector(“icon”)

Relevant part of .yaml file:

type: entities
show_header_toggle: false
style: |
  :host {
  --paper-slider-active-color: var(--switch-checked-color);
  }
entities:
  - entity: light.piano_terra
    icon: 'mdi:home-floor-0'
    style: |
      :host {
        font-size: 24px;
        --iron-icon-width: 32px;
        --iron-icon-height: 32px;
          }
  - type: divider
  - type: 'custom:fold-entity-row'
[...]

Any help is appreciated, thank you!

[codylv7 (Cody)]

Sorry for the delayed reply, but I’m still not able to get it working. I ended up changing the way I was going to group stuff together and now I have

  - type: custom:stack-in-card
    mode: vertical
    keep:
      margin: true
      outer_padding: true
    style: |
      ha-card {
        background: none;
        box-shadow: none;
      }
    cards:
      - type: custom:text-divider-row
        text: People
        style: |
          div {
            margin: 0 -16px;
          }

Which also doesn’t work. The selector is now

document.querySelector(“body > home-assistant”).shadowRoot.querySelector(“home-assistant-main”).shadowRoot.querySelector(“app-drawer-layout > partial-panel-resolver > ha-panel-lovelace”).shadowRoot.querySelector(“hui-root”).shadowRoot.querySelector(“#view > hui-panel-view > layout-card”).shadowRoot.querySelector(“#columns > div:nth-child(1) > stack-in-card”).shadowRoot.querySelector(“ha-card > div > hui-vertical-stack-card”).shadowRoot.querySelector(“#root > text-divider-row:nth-child(1)”).shadowRoot.querySelector(“h2”)

But after changing my code and reading through this thread some more it appears it will only work if it’s in an entity card?

Let me know if I should revert my config, here is what I had after your suggested change with previous format

  - type: entities
    entities:
      - type: custom:text-divider-row
        debug_cardmod: true
        text: People
        style: |
          div {
            margin: 0 -16px;
          }

[Honza]

looking for some help with defining the style code. I want to simply add “margin” to the camera view to push the card down (so I can see the date and time). I hacked the console to add margin, so you can see the bottom camera image is shown the way I want it, but i cannot figure out what the style code looks like. Any help?

Here is the

[hajo62 (Hajo)]

@Mattias_Persson

Figured it out

How did you figure out?
I have a similar question but no idea how to handle. If you find some minutes, you might have a look at? Link

[Mattias_Persson]

I explained it here.

So you could do something like this

- type: picture-elements
  style:
    '#root > bar-card':
      $: |
        ha-card {background: none; box-shadow: none;}

[Hurde]

I have two questions. Sorry if these seem like basic questions, but I was not able to solve these myself. First, I’m trying to use card-mod with the following setup. The card consists of a entities card, which has two auto-entities cards inside it. The auto-entities cards are using glance as the card.

YAML

      - entities:
          - card:
              show_header_toggle: false
              style: |
                ha-card {
                  box-shadow: none;
                  background: transparent;
                }
                .card-header {
                  font-size: 20px;
                }
              title: Helsinki
              type: glance
            filter:
              exclude:
                - name: '54'
                - name: '201'
              include:
                - entity_id: sensor.hsl_hel_*
                  state: '> 3'
            sort:
              count: 5
              method: state
              numeric: true
            type: 'custom:auto-entities'
          - card:
              show_header_toggle: false
              style: |
                ha-card {
                  box-shadow: none;
                  background: transparent;
                }
                .card-header {
                  font-size: 20px;
                }
              title: Leppävaara
              type: glance
            filter:
              include:
                - entity_id: sensor.hsl_lpv_bus*
                  name: '/[0-9]{3}[NK]?/'
                  state: '> 3'
                - entity_id: sensor.hsl_lpv_train*
                  state: '> 3'
            sort:
              count: 5
              method: state
              numeric: true
            type: 'custom:auto-entities'
        title: Public transport
        type: entities

I have already succeeded with removing the borders of the auto-entitites (glance) cards and changing the size of titles. However, I would like to bold out or apply italics to the line number (235, 550, 39, A etc.) from each entity. Does anybody have suggestions on how to achieve this? I’ve tried to inspect element, but didn’t find anything noteworthy.

Second question: I’m trying to add conditional coloring to entities card’s states. So that the icon and entity name would always display as normal, but the state would change between red and green.

YAML

entities:

• entity: sensor.googlesheets_stocks_gainloss
  name: Portfolio gain/loss
  style: |
  :host {
  color:
  {% if states(config.entity)[:1] == “-” %}
  red
  {% else %}
  green
  {% endif %}
  ;
  }
  title: Stock portfolio
  type: entities

I was able to change to whole row’s color based on the state, but I would like to only change the color of the state (and not the entity name). In my example, the state is <div class="text-content">-€291.40</div>. How can I achieve this?

[xbmcnut]

New to card mod (and css altogether) so trying to get my head around a few things so some advice would be appreciated.

Here is my current sensor card.

And my custom:mini-graph-card with a touch of card-mod to try and get the icon, header text colour, value colour and unit of measurement colour the same as the standard sensor card (with the ‘slate’ theme).

Three questions:

• Can some assist with code on the colours for the text?
• Is there a way to reduce the size of the card altogether? I’ve been trying to get it about 75% of its current height but nothing seems to work.
• Is there a way to transition though all my colour values without listing them all as I’ve done?

style: "ha-card {\n  --paper-item-icon-color: dodgerblue;\t\n}\n.card-header {\n  color: #b58e31;\n}\n"
color_thresholds:
  - color: '#0012ff'
    value: 08
  - color: '#0022ff'
    value: 09
  - color: '#0032ff'
    value: 10
  - color: '#0044ff'
    value: 11
  - color: '#0054ff'
    value: 12
  - color: '#0064ff'
    value: 13
  - color: '#0074ff'
    value: 14
  - color: '#0084ff'
    value: 15
  - color: '#0094ff'
    value: 16
  - color: '#00a4ff'
    value: 17
  - color: '#00b4ff'
    value: 18
  - color: '#00c4ff'
    value: 19
  - color: '#00d4ff'
    value: 20
  - color: '#00e4ff'
    value: 21
  - color: '#00fff4'
    value: 22
  - color: '#00ffd0'
    value: 23
  - color: '#00ffa8'
    value: 24
  - color: '#00ff83'
    value: 25
  - color: '#00ff5c'
    value: 26
  - color: '#00ff36'
    value: 27
  - color: '#00ff10'
    value: 28
  - color: '#17ff00'
    value: 29
  - color: '#3eff00'
    value: 30
  - color: '#65ff00'
    value: 31
  - color: '#8aff00'
    value: 32
  - color: '#b0ff00'
    value: 33
  - color: '#d7ff00'
    value: 34
  - color: '#fdff00'
    value: 35
  - color: '#FFfa00'
    value: 36
  - color: '#FFf000'
    value: 37
  - color: '#FFe600'
    value: 38
  - color: '#FFdc00'
    value: 39
  - color: '#FFd200'
    value: 40
entities:
  - entity: sensor.temperature_xiaomi_office
hours_to_show: 12
icon: 'mdi:thermometer'
name: Office
points_per_hour: 1
show:
  graph: bar
type: 'custom:mini-graph-card'

[majkers]

Hi, is it possible to style conditionally secondary info entity card inisde auto entities card?

This is not working

card:
  show_header_toggle: false
  title: Rachunki
  type: entities
filter:
  include:
    - entity_id: variable.*
      options:
        secondary_info: >-
          Do zapłaty: <b style='color:[[ if({entity}.attributes.czy_oplacony ==
          'nie', 'green', 'red') ]]'>[[ {entity}.attributes.do_zaplaty ]]</b>
        type: 'custom:secondaryinfo-entity-row'
sort:
  method: state
type: 'custom:auto-entities'

So I thought about condition move to style. Something like this:

card:
  show_header_toggle: false
  title: Rachunki
  type: entities
filter:
  include:
    - entity_id: variable.*
      options:
        secondary_info: >-
          Do zapłaty: <b style='color:red'>[[ {entity}.attributes.do_zaplaty ]]</b>
        type: 'custom:secondaryinfo-entity-row'
        style: |
          div.secondary b {
            color: green !important; //condition must go here
          } 
sort:
  method: state
type: 'custom:auto-entities'

[thomasloven (Thomas Lovén)]

See the advanced configuration section of the readme.
Getting through the shadowDOM to the secondary info row is a bit more involved than that.

https://github.com/thomasloven/lovelace-card-mod/blob/1105f6f1c3f3d91a389f810c96826f0d816e1df5/test/views/tricks.yaml#L147-L149