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

[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.

[Ildar_Gabdullin]

Styling images in Logbook:

Once I posted a way of styling Logbook card.
Basically I was interested in square images for “entity_picture”.
Also, there was an issue with a tight placement (which I had to fix by card-mod) but that was solved.

That way has limitations:
– card-mod could not be applied to a “big” Logbook page (even in card-mod-theme);
– also it does not work inside “config-template-card” (yes, I do have plenty of “logbook” cards inside “config-template-card” with adjustable “hours_to_show”).

There is a way of defining a style for all logbooks - at least for square images.
The initial idea was proposed by @kulmegil in this post related to Map card.
Place this js code into “www” folder (or better create a special folder) and then add as a frontend module:

customElements.whenDefined('ha-logbook-renderer').then(() => {
    const LogbookBadge = customElements.get('ha-logbook-renderer');
    const { html, css } = LogbookBadge.prototype;
    
    // defined added style
    const newStyle = css`
    .icon-message state-badge {border-radius: 10%;}`;
    
    const newStyles = [].concat(LogbookBadge.styles, newStyle);
    Object.defineProperty(LogbookBadge, 'styles',        {value: newStyles, configurable: true, enumerable: false});
    Object.defineProperty(LogbookBadge, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
  });

For the “big” Logbook page the style works too:

The solution seems to work fine in Win+Chrome, iOS Companion App.
Anyway, need some more time for testing (is the style stable, is CPU usage same, …).

---

More styles

[gabrielmiranda]

Could you guys help me? Or point me a way?

I’m using picture-elements and I would like the background to be 80% the size of the ha-card. I tested some ways that I found here but none worked.

This is what I have so far:

type: picture-elements
image: /local/img/tablet/home.png
style: |
 
   hui-image:
     $: |
       #image {width: 30%; margin: auto; }

    ha-card {...}

   }
elements:

I tested some variables like “img” or “image” but without success.

Thanks in advance.

[PaoloTK]

Does anyone know if it’s possible or have tips in styling slider-entity-row to look like mushroom-cards sliders?

Turn this:

Into this:

[Ildar_Gabdullin]

@gabrielmiranda

This is what I have so far:

W/o checking other things - this code is wrong in part of syntax.
Check other examples in the thread “accessing shadowRoot + ha-card”.
Also , you cannot use # for comments inside strings.