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

[arganto]

And why do you not show your faulty jinja if statement then?

[CDRX2]

Try this:

background: {{iif (is_state('switch.sonoff_tavolo_switch_1',  'on'), 'yellow', 'blue'}}

Yellow will be the color when the switch is on, blue for when it’s off.

[Mikypan81 (Michele)]

@Mikypan81

{

Thank you so much, it’s worked.
Sorry if I take advantage of your kindness, but I would have another problem. I have now set the buttons to 50% of the width because I wanted to put them side by side, but I see that anyway on my lovelace there are only 3 columns. How do you increase them and maybe put all the buttons for which I have set the width to 50%?

[CDRX2]

I think the easiest way to do that would be to wrap your buttons in a horizontal stack.

[eggman (bertie basset)]

Not exactly sure I understand what you’re trying to do. But take a look at the grid card.

Grid Card

It’ll let you put your buttons into one of the lovelace columns. You can then specify how many columns / rows you want, and it’ll scale the button cards to fit. It can replicate both / either horizontal or vertical stacks, plus more. The next 3 rows are a single 2x3 grid.

The top row of this image is a 1x5 grid, if I add another button, I’d probably make it a 2x3 grid and everything will resize. Both grid cards are nested in a vertical-stack (although I could have used a 1x2 grid )

[almighty59]

Could @Ildar_Gabdullin or anyone else help me out and point me in the right direction for adding CSS styles to the regular standard grid card.? I don’t think this is something that normally gets styled so there’s nothing really on it in the forums. I’m specifically trying to add styling to accomplish two things on the grid card.

1. Add styling that will change the spacing between each of the cards within the grid. I’m trying to increase the space on the side of each card in the grid because some of the cards in my smaller grids look like they’re almost on top of each other. I found one way to do this using mod-card and it works but I want to see if there is a better way or if this is the correct way.

- type: custom:mod-card
  card_mod:
	style: |
	  :host {
		--grid-card-gap: 10px;
		}
  card:
	type: grid
	title: null
	square: true
	columns: 4
	cards:
	  - type: custom:button-card
            (etc. etc.)

2. Add styling that will increase the top and bottom margins of the grid to create more space between the grid and the top/bottom of the cards within it. The problem I’m having is the top of the box-shadow style gets cut off on the cards in the top row of the grid. I think this is because the cards in the top row of the grid sit flush or almost flush with the edge of the grid card itself. I used the browser element inspector to increase the top-margin and that solves the problem but I’m lost as to how to correctly add the styling to the grid card. Shadow roots and all of that still confuse me.

[Abeksis]

hi
Is it possible to change color as soon as the situation changes from Home to Not_HOME

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: Device Tracker
    size: fullscreen
    content:
      type: grid
      columns: 2
      square: false
      cards:

        #01
        - type: custom:bar-card
          width: 45%
          height: 1.5em
          positions:
            icon: outside
            indicator: 'off'
            name: outside
          entity_row: false
          entities:
            - entity: device_tracker.amazon_echo_dot
            - entity: device_tracker.amazon_echo_show
            - entity: device_tracker.khdr_mkhshbym_deco
            - entity: device_tracker.living_room_deco
            - entity: device_tracker.qvmh_shnyh_deco
            - entity: device_tracker.oven
          columns: 2
          square: true

[seanmccabe (Seán McCabe)]

I’ve searched and searched and cannot find an answer.
Is it possible with card_mod to remove the background and shadow from an entities card within an auto-entities card?

     - type: conditional
       conditions:
          - entity: sensor.upcoming_anniversaries
            state_not: '0'
        card:
          type: custom:auto-entities
          card:
            type: entities
          filter:

[Mikypan81 (Michele)]

Thank you so much! It works!!!

I would like to know, I was trying to change the background also for the media control cards, but they don’t do it with the same code, why ???

type: media-control
entity: media_player.fire_tv_192_168_1_16
card_mod:
  style: |
    ha-card {
      background: {{iif (is_state('media_player.fire_tv_192_168_1_16', 'off'), 'rgb(255, 134, 0)', '')}};
      border-radius: 5px;
      overflow: hidden;
      border: solid 0px rgb(0,0,0,255);
      width: 100%;
      height: 100% }

[arboeh (Arend Böhmer)]

I’m not able to set the height of a state-switches’ div to 100% to have the same height like the other containers without a state switch. I tried a lot of things, but it still doesn’t work.
The div#root has to be set to 100%, but I’m struggling with the solution.

type: custom:state-switch
entity: sensor.power_mode
card_mod:
  style: |
    div#root {
      height: 100% !important;
    }
states:
  import:
    type: custom:mini-graph-card
    name: netzimport
    update_interval: 10
    cache: true
    hour24: true
    hours_to_show: 2
    points_per_hour: 30
    decimals: 0
    lower_bound: 0
    icon: mdi:arrow-down-bold
    show:
      labels: true
      points: false
    entities:
      - entity: sensor.shelly_3em_channel_a_power
        show_legend: false
        show_state: false
      - entity: sensor.shelly_3em_channel_b_power
        show_legend: false
        show_state: false
      - entity: sensor.shelly_3em_channel_c_power
        show_legend: false
        show_state: false
      - entity: sensor.shelly_power_import
        show_legend: false
        show_state: true
        show_graph: false
    card_mod:
      style: |
        :host {
          height: 100%;
        }
        ha-card {
          height: 100%;
          align-items: center;
        }
        header, .states {
          font-weight: inherit !important;
        }
        .icon {
          position: absolute;
          right: 16px;
          color: orange !important;
        }
        .name > span {
          color: var(--ha-card-header-color, --primary-text-color) !important;
          font-size: var(--ha-card-header-font-size, 24px) !important;
          opacity: inherit !important;
          font-weight: inherit !important;
        }
        .false:first-child {
          display: none;
        }
        .states--secondary {
          margin-left: 0 !important;
        }
        .ellipsis {
          margin: 0 2px !important;
          opacity: unset !important;
          font-size: 2.4em !important;
          line-height: 1.2em !important;
        }
  export:
    type: custom:mini-graph-card
    name: netzexport
    update_interval: 10
    cache: true
    hour24: true
    hours_to_show: 2
    points_per_hour: 30
    decimals: 0
    lower_bound: 0
    icon: mdi:arrow-up-bold
    show:
      labels: true
      points: false
    entities:
      - entity: sensor.shelly_3em_channel_a_power
        show_legend: false
        show_state: false
      - entity: sensor.shelly_3em_channel_b_power
        show_legend: false
        show_state: false
      - entity: sensor.shelly_3em_channel_c_power
        show_legend: false
        show_state: false
      - entity: sensor.shelly_power_export
        show_legend: false
        show_state: true
        show_graph: false
    card_mod:
      style: |
        :host {
          height: 100%;
        }
        ha-card {
          height: 100%;
          align-items: center;
        }
        header, .states {
          font-weight: inherit !important;
        }
        .icon {
          position: absolute;
          right: 16px;
          color: green !important;
        }
        .name > span {
          color: var(--ha-card-header-color, --primary-text-color) !important;
          font-size: var(--ha-card-header-font-size, 24px) !important;
          opacity: inherit !important;
          font-weight: inherit !important;
        }
        .false:first-child {
          display: none;
        }
        .states--secondary {
          margin-left: 0 !important;
        }
        .ellipsis {
          margin: 0 2px !important;
          opacity: unset !important;
          font-size: 2.4em !important;
          line-height: 1.2em !important;
        }
view_layout:
  grid-area: graph_one

Tried this also:

card_mod:
  style:
    state-switch:
      $: |
        #root {
          height: 100% important;
        }

[CDRX2]

Does it work when you replace the iif statement with a simple color?

[Mikypan81 (Michele)]

No, nothing

[arboeh (Arend Böhmer)]

You wrote “iif”… Typo?

[Ildar_Gabdullin]

@Mikypan81

change the background also for the media control cards

1st post → link at the bottom → styles for media-player

And next time please post your failed attempts w/o any excessive code which is not related to the issue.
Same is about using jinjia templates. First achieve a desired result w/o templates → then add templates.

[arganto]

Why should it?

Beside, that this is idea is wrong at all, because there is of course a iif, instead of guessing, Michele should always have a first look at the examples from Ildar and then have a look in the html dom, and try there changes in the browser. And you will directly see, that the background CSS attribute in ha-card is not related to the background to change.

[Mikypan81 (Michele)]

@Ildar_Gabdullin

And next time please post your failed attempts w/o any excessive code which is not related to the issue.
Same is about using jinjia templates. First achieve a desired result w/o templates → then add templates.

Good morning Ildar and thanks for the suggestions. I had completely missed all those examples you posted on the discussion, now I will certainly have less problems to configure my lovelace. Thanks again, and thanks for the tips on how to post, I’ll treasure it.

Edit: I’ve seen your posts, and used for my case this code

type: media-control
entity: media_player.kodi_iiyama
card_mod:
  style: |
    .background.no-image > * {
      background-color: cyan;
    }   

my question is simple: it’s possible to add an IF for choose background color according to the state of the media? E.g. I’ve a PS4, it’s in IDLE status, but I see only cyan, and when it’s turned off I can’t choose the color. @Ildar_Gabdullin please can you help me?

[Mariusthvdb (Marius)]

@arboeh

You wrote “iif”… Typo?

No, Jinja: Templating - Home Assistant

[arboeh (Arend Böhmer)]

Fixed it myself with

type: custom:mod-card
card_mod:
  style:
    $: |
      :host {
        height: 100%;
      }
    state-switch $: |
      #root {
        height: 100%;
      }
      #root > .visible > mini-graph-card {
        transform: none;
      }

[Ildar_Gabdullin]

@arboeh

Fixed it myself with

Here could be a confusion for a person who finds this post.

There are two parts in your code:
– fixing a height (your issue);
– fixing a glitch with state-switch (your issue on Github).

These are unrelated things. The “transform: none” part is not related to the “height issue”.

Solution for “state-switch issue” was provided here.

[Ildar_Gabdullin]

@Mikypan81

it’s possible to add an IF for choose background color according to the state of the media?

Example of “if … else if … else …”

@Mikypan81

E.g. I’ve a PS4, it’s in IDLE status, but I see only cyan, and when it’s turned off I can’t choose the color.

What is “OFF”? Means - the “media_player” is “unavailable”?
If yes - then the color is greyish (in a default light theme), then a different selector (not “background.no-image”) must be used.