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

klogg · September 24, 2021, 1:36pm

I’m using a mod-card like this (bear with me here!)

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      {% raw %}
      {% set zone = {% endraw %} {{ zone }} {% raw %} %}
      {% set zone_count = states('input_number.irrigation_number_of_zones') %}
      {% if (zone_count | int) < (zone | int) %}
        display: none;
      {% else %}
        border: 1px solid var(--primary-background-color);
      {% endif %}
      {% endraw %}
    }
card:

...

Is it possible to have no space taken up by mod-card when the if, else results in display: none?

This is what it looks like now:

Getslow · September 25, 2021, 10:36am

Hi everyone,

I’ve read through this topic and the card-mod repo, but somehow I can’t get it to work for me. If someone could point me in the right direction, that would be awesome!

I have a grid layout with inside several custom buttons cards:

cards:
  - type: custom:button-card
    name: title
    styles:
      card:
        - width: 115px
        - height: 115px
        
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: repeat(4, min-content)
    cards:
      - type: custom:button-card
        styles:
          card:
            - width: 115px
            - height: 115px
        name: 1
      - type: custom:button-card
        styles:
          card:
            - width: 115px
            - height: 115px
        name: 2
      - type: custom:button-card
        styles:
          card:
            - width: 115px
            - height: 115px
        name: 3
      - type: custom:button-card
        styles:
          card:
            - width: 115px
            - height: 115px
        name: 4
      - type: custom:button-card
        styles:
          card:
            - width: 115px
            - height: 115px
        name: 5
      - type: custom:button-card
        styles:
          card:
            - width: 115px
            - height: 115px
        name: 6
      - type: custom:button-card
        styles:
          card:
            - width: 115px
            - height: 115px
        name: 7
      - type: custom:button-card
        styles:
          card:
            - width: 115px
            - height: 115px
        name: 8
      - type: custom:button-card
        styles:
          card:
            - width: 115px
            - height: 115px
        name: 9
      - type: custom:button-card
        styles:
          card:
            - width: 115px
            - height: 115px
        name: 10

This leads to the following

I would really like to adjust these margins (from both the grid-layout card and the custom button card). I do have the card mod installed. Does anyone know how to adjust these properties using CSS?

MrThiemann · September 26, 2021, 5:40am

Good Morning =)
I would like to remove the frame (box-shadow) around this card. But I’ve already tried a lot of variations …
I don’t know exactly whether it has something to do with the fact that the frame (box-shadow) is in “: host”?

would be great if annyone can help me.

type: custom:mod-card
style: |
  :host {
      box-shadow: none;
    }
  ha-card {
      box-shadow: none;
    }
card:
  type: custom:canvas-gauge-card
  entity: sensor.cpu_temperature
  card_height: 125
  gauge:
    type: radial-gauge
    title: Processor (%)
    width: 220
    height: 220
    borderShadowWidth: 0
    borderOuterWidth: 0
    borderMiddleWidth: 0
    borderInnerWidth: 0
    minValue: 0
    maxValue: 100
    startAngle: 30
    ticksAngle: 180
    valueBox: false
    majorTicks:
      - '0'
      - '10'
      - '20'
      - '30'
      - '40'
      - '50'
      - '60'
      - '70'
      - '80'
      - '90'
      - '100'
    minorTicks: 2
    strokeTicks: true
    highlights:
      - from: 80
        to: 100
        color: rgba(200, 50, 50, .75)
    borders: false

Ildar_Gabdullin · September 26, 2021, 12:19pm

Unfortunately, none of these variants works.
OK, it does not matter. Using config.entity is preferable for a particular entity (using :host etc), using these config.card.entities[0].entity etc does not worth efforts, IMHO…
One more time I need to admit that card-mod gives us huge possibilities to make a HA setup JUST PERFECT ))

Ildar_Gabdullin · September 26, 2021, 12:26pm

How is that related to the pics below?

Ildar_Gabdullin · September 26, 2021, 12:45pm

Styling of custom:button-card is off-topic here.
Better to discuss in a corresponding thread.
Here is your style:

type: custom:button-card
name: ssssssssss
styles:
  card:
    - width: 115px
    - height: 115px
    - margin-left: 30px
    - margin-right: 30px
    - margin-top: 30px
    - margin-bottom: 30px

Styling button in the grid:

type: custom:mod-card
card_mod:
  style:
    layout-card:
      $:
        grid-layout:
          $: |
            button-card {
              margin: 10px 10px 10px 10px !important;
            }
card:
  type: custom:layout-card
  layout_type: custom:grid-layout
  layout:
    grid-template-columns: repeat(4, min-content)
  cards:
    - type: custom:button-card
      styles:
        card:
          - width: 115px
          - height: 115px
      name: 1
    - type: custom:button-card
      styles:
        card:
          - width: 115px
          - height: 115px
      name: 2
    - type: custom:button-card
      styles:
        card:
          - width: 115px
          - height: 115px
      name: 3
    - type: custom:button-card
      styles:
        card:
          - width: 115px
          - height: 115px
      name: 4
    - type: custom:button-card
      styles:
        card:
          - width: 115px
          - height: 115px
      name: 5
    - type: custom:button-card
      styles:
        card:
          - width: 115px
          - height: 115px
      name: 6
    - type: custom:button-card
      styles:
        card:
          - width: 115px
          - height: 115px
      name: 7
    - type: custom:button-card
      styles:
        card:
          - width: 115px
          - height: 115px
      name: 8
    - type: custom:button-card
      styles:
        card:
          - width: 115px
          - height: 115px
      name: 9
    - type: custom:button-card
      styles:
        card:
          - width: 115px
          - height: 115px
      name: 10

Note that there is a difference between using card-mod styling (2nd example) and native styling feature of custom:button-card (1st example).
Look at the 3rd example - same as 2nd but without card-mod:

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: repeat(4, min-content)
cards:
  - type: custom:button-card
    styles: &ref_styles
      card:
        - width: 115px
        - height: 115px
        - margin-left: 10px
        - margin-right: 10px
        - margin-top: 10px
        - margin-bottom: 10px
    name: 1
  - type: custom:button-card
    styles: *ref_styles
    name: 2
  - type: custom:button-card
    styles: *ref_styles
    name: 3
  - type: custom:button-card
    styles: *ref_styles
    name: 4
  - type: custom:button-card
    styles: *ref_styles
    name: 5
  - type: custom:button-card
    styles: *ref_styles
    name: 6
  - type: custom:button-card
    styles: *ref_styles
    name: 7
  - type: custom:button-card
    styles: *ref_styles
    name: 8
  - type: custom:button-card
    styles: *ref_styles
    name: 9
  - type: custom:button-card
    styles: *ref_styles
    name: 10

It gives a different result:

TheDarthFather · September 26, 2021, 5:07pm

Hello,
I am Lvl1 Empiric in css/card-mod/buton-card user.
I am trying to use card-mod in conjuncture with card mod.
My first attempt based on an example is decent, but I dont understand how those paddings work … sometimes I need 85 sometimes 50 to achieve the same height (see st and sts in the 1st example), top is working only if you put some padding … etc
The second attempt is … so bad :). I am trying to replace the text with 3 vertical bars, but is not even … a good for a mvp0.
Can someone give me some hints ?

Example 1 Code

type: custom:button-card
entity: sensor.docker_homeassistant_state
icon: mdi:home-assistant
aspect_ratio: 1/1
name: Home Assistant
styles:
  card:
    - border-radius: 10%
    - padding: 5%
    - font-size: 10px
  grid:
    - grid-template-areas: '"i n " "st sts"  "cpu cpu" "ramp ramp" "ram  ram"'
    - grid-template-columns: 1fr 2fr
    - grid-template-rows: min-content min-content min-content  min-content  min-content
  name:
    - font-weight: bold
    - font-size: 10px
    - color: dodgerblue
    - align-self: top
    - justify-self: right
    - padding-bottom: 15%
  img_cell:
    - justify-content: left
    - align-items: top
    - padding-bottom: 20%
  icon:
    - width: 50%
    - color: |
        [[[
          if (entity.state = "Running") return 'lime'; 
          if (entity.state = "Restarting") return 'yellow'; 
          else return 'red';
        ]]]
  custom_fields:
    st:
      - align-self: top
      - justify-self: left
      - padding-bottom: 95%
      - font-size: 8px
      - '--text-color-sensor': >-
          [[[  if (entity.state = "Running") return 'lime';  if (entity.state =
          "Restarting") return 'yellow';  else return 'red'; ]]]
    sts:
      - align-self: top
      - justify-self: right
      - font-size: 8px
      - padding-bottom: 50%
      - '--text-color-sensor': >-
          [[[  if (entity.state = "Running") return 'lime';  if (entity.state =
          "Restarting") return 'yellow';  else return 'red';
    cpu:
      - padding-bottom: 5%
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.docker_homeassistant_1cpu"].state > 85) return
          "red"; ]]]
    ram:
      - padding-bottom: 1%
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.docker_homeassistant_memory_percent"].state >
          85) return "red"; ]]]
    ramp:
      - padding-bottom: 5%
      - align-self: middle
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.proxmox_satapool_used_percent_2"].state > 85)
          return "red"; ]]]
custom_fields:
  st: |
    [[[
      return `<ha-icon
        icon="mdi:flash"
        style="width: 12px; height: 12px; color: var(--text-color-sensor);">
        </ha-icon><span><span style="color: var(--text-color-sensor);">${states['sensor.docker_homeassistant_state'].state}</span></span>`
    ]]]
  sts: |
    [[[
      return `<span><span style="color: var(--text-color-sensor);">${states['sensor.docker_homeassistant_status'].state}</span></span>`
    ]]]
  cpu: |
    [[[
      return `<ha-icon
        icon="mdi:server"
        style="width: 14px; height: 14px; color: deepskyblue;">
        </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.docker_homeassistant_1cpu'].state}%</span></span>`
    ]]]
  ram: |
    [[[
      return `<ha-icon
        icon="mdi:memory"
        style="width: 14px; height: 14px; color: deepskyblue;">
        </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${ Math.floor(states['sensor.docker_homeassistant_memory'].state)}Mb</span></span>`
    ]]]
  ramp: |
    [[[
      return `<ha-icon
        icon="mdi:memory"
        style="width: 14px; height: 14px; color: deepskyblue;">
        </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);" >${states['sensor.docker_homeassistant_memory_percent'].state}%</span></span>`
    ]]]

Example 2 Code:

type: custom:button-card
entity: sensor.docker_homeassistant_state
icon: mdi:home-assistant
aspect_ratio: 1/1
name: Home Assistant
styles:
  card:
    - border-radius: 10%
    - padding: 5%
    - font-size: 10px
  grid:
    - grid-template-areas: '"i n n " "st st sts"  "cpu ramp ram"'
    - grid-template-columns: 1fr 1fr 1fr
    - grid-template-rows: 1fr 1fr 1fr
  name:
    - font-weight: bold
    - font-size: 10px
    - color: dodgerblue
    - align-self: top
    - justify-self: right
    - padding-bottom: 25%
  img_cell:
    - justify-content: left
    - align-items: top
    - padding-top: 5%
    - padding-bottom: 50%
  icon:
    - width: 50%
    - color: |
        [[[
          if (entity.state = "Running") return 'lime'; 
          if (entity.state = "Restarting") return 'yellow'; 
          else return 'red';
        ]]]
  custom_fields:
    st:
      - align-self: top
      - justify-self: left
      - padding-bottom: 80%
      - font-size: 8px
      - '--text-color-sensor': >-
          [[[  if (entity.state = "Running") return 'lime';  if (entity.state =
          "Restarting") return 'yellow';  else return 'red'; ]]]
    sts:
      - align-self: top
      - justify-self: right
      - font-size: 8px
      - padding-bottom: 90%
      - '--text-color-sensor': >-
          [[[  if (entity.state = "Running") return 'lime';  if (entity.state =
          "Restarting") return 'yellow';  else return 'red';
    cpu:
      - align-self: left
      - justify-self: left
      - padding-bottom: 20%
        height: 50px
        width: 10px
        direction: up
        positions:
          icon: 'off'
          indicator: 'off'
          minmax: 'off'
          title: outside
          value: outside
          name: outside
        decimal: 0
        animation:
          state: 'on'
    ram:
      - align-self: top
      - justify-self: right
        height: 50px
        width: 10px
        direction: up
        positions:
          icon: 'off'
          indicator: 'off'
          minmax: 'off'
          title: outside
          value: outside
          name: outside
        decimal: 0
        animation:
          state: 'on'
    ramp:
      - align-self: top
      - justify-self: middle
        height: 50px
        width: 10px
        direction: up
        positions:
          icon: 'off'
          indicator: 'off'
          minmax: 'off'
          title: outside
          value: outside
          name: outside
        decimal: 0
        animation:
          state: 'on'
custom_fields:
  st: |
    [[[
      return `<ha-icon
        icon="mdi:flash"
        style="width: 12px; height: 12px; color: var(--text-color-sensor);">
        </ha-icon><span><span style="color: var(--text-color-sensor);">${states['sensor.docker_homeassistant_state'].state}</span></span>`
    ]]]
  sts: |
    [[[
      return `<span><span style="color: var(--text-color-sensor);">${states['sensor.docker_homeassistant_status'].state}</span></span>`
    ]]]
  cpu:
    card:
      type: custom:bar-card
      entity: sensor.proxmox_ram_used_percent_2
  ram:
    card:
      type: custom:bar-card
      entity: sensor.proxmox_ram_used_percent_2
  ramp:
    card:
      type: custom:bar-card
      entity: sensor.proxmox_ram_used_percent_2

Example 1 Result (inside a 3 colum grid):

Example 2 Result (inside a 3 colum grid):

I tried to add this but it does not seem to have any effect … probably in the wrong position:

  '#root > bar-card':
    $: |
      ha-card {
        background: none;
        box-shadow: none;
      }
      bar-card-name {
        color: white;
        font-size: 100%;
        font-weight: normal;
        margin: 4px;     
      } 
      bar-card-backgroundbar {
        border-shadow: 2pt;
        margin-top: -2pt;
        margin-left: -2pt;
        border-radius: 5pt;
        border-style: solid;
        #background: rgba(255, 0, 0, 0.8);
        background: black;
      }
      bar-card-value {
        font-size: 125%;
        color: white;
        font-weight: bold;
        margin: 4px;
      }
      bar-card-currentbar {
        border-radius: 5pt;
      }

KTibow · September 26, 2021, 5:45pm

We can’t understand you through your translator.

TheDarthFather · September 26, 2021, 5:51pm

Excuse me ?? What is hard to understand ?
I meant … card-mode in conjuncture with button-card … but I hope this is not a stopper understanding the problem below

Ildar_Gabdullin · September 26, 2021, 5:54pm

Actually, styling may be done by using native features of custom:button-card.
Is it smth special you want to achieve?

TheDarthFather · September 26, 2021, 5:58pm

Thanks for the quick reply.
In the second picture, the bars are barely/badly visible (only the top part is visible, not aligned, distance between is not equal, ignored my icon = off etc).
I dont know how to “raise” them, so they can fit/look nicely on the bottom part of the card.

Ildar_Gabdullin · September 26, 2021, 7:03pm

Try to simplify your task - divide it to small subtasks and then try to solve them one by one.
Nobody gonna read a huge amount of someone’s code.
Small tasks are easier to share with people, easier to understand.

Ildar_Gabdullin · September 26, 2021, 7:09pm

Looked again at your case.
I think that spaces are displayed because they are NOT initially removed from the card (spaces between rows).
It seems to be Entities card; remove these spaces and then you will not see them for hidden rows.
Alternatively, you can keep these spaces for “visible rows”, add one more style for “hidden rows”, kind of:

display: none;
.... remove margin after the row ....

TheDarthFather · September 26, 2021, 7:24pm

I am afraid there is not much to simply:( … I just added 3 bars for cpu, ram, ram_% (copy paste code)
but I understand that digging up in someone’s else code can be a nighmare

    cpu:
      - align-self: top
      - justify-self: left
      - padding-bottom: 10px
      - height: 50px
      - width: 10px
      - direction: up
      - positions: null
      - icon: 'off'
      - indicator: 'off'
      - minmax: 'off'
      - title: outside
      - value: outside
      - name: outside
      - decimal: 0
      - animation:
          state: 'on'

type: custom:button-card
entity: sensor.docker_homeassistant_state
icon: mdi:home-assistant
aspect_ratio: 1/1
name: Home Assistant
styles:
  card:
    - border-radius: 10%
    - padding: 5%
    - font-size: 10px
  grid:
    - grid-template-areas: '"i n n " "st st sts"  "cpu ramp ram" 
    - grid-template-columns: 1fr 1fr 1fr
    - grid-template-rows: 1fr 1fr 1fr
  name:
    - font-weight: bold
    - font-size: 10px
    - color: dodgerblue
    - align-self: top
    - justify-self: right
    - padding-bottom: 25%
  img_cell:
    - justify-content: left
    - align-items: top
    - padding-top: 5%
    - padding-bottom: 50%
  icon:
    - width: 50%
    - color: |
        [[[
          if (entity.state = "Running") return 'lime'; 
          if (entity.state = "Restarting") return 'yellow'; 
          else return 'red';
        ]]]
  custom_fields:
    st:
      - align-self: top
      - justify-self: left
      - padding-bottom: 80%
      - font-size: 8px
      - '--text-color-sensor': >-
          [[[  if (entity.state = "Running") return 'lime';  if (entity.state =
          "Restarting") return 'yellow';  else return 'red'; ]]]
    sts:
      - align-self: top
      - justify-self: right
      - font-size: 8px
      - padding-bottom: 90%
      - '--text-color-sensor': >-
          [[[  if (entity.state = "Running") return 'lime';  if (entity.state =
          "Restarting") return 'yellow';  else return 'red';
    cpu:
      - align-self: top
      - justify-self: left
      - padding-bottom: 10px
      - height: 50px
      - width: 10px
      - direction: up
      - positions: null
      - icon: 'off'
      - indicator: 'off'
      - minmax: 'off'
      - title: outside
      - value: outside
      - name: outside
      - decimal: 0
      - animation:
          state: 'on'
    ram:
      - align-self: top
      - justify-self: right
        height: 50px
        width: 10px
        direction: up
        positions:
          icon: 'off'
          indicator: 'off'
          minmax: 'off'
          title: outside
          value: outside
          name: outside
        decimal: 0
        animation:
          state: 'on'
    ramp:
      - align-self: top
      - justify-self: middle
        height: 50px
        width: 10px
        direction: up
        positions:
          icon: 'off'
          indicator: 'off'
          minmax: 'off'
          title: outside
          value: outside
          name: outside
        decimal: 0
        animation:
          state: 'on'
custom_fields:
  st: |
    [[[
      return `<ha-icon
        icon="mdi:flash"
        style="width: 12px; height: 12px; color: var(--text-color-sensor);">
        </ha-icon><span><span style="color: var(--text-color-sensor);">${states['sensor.docker_homeassistant_state'].state}</span></span>`
    ]]]
  sts: |
    [[[
      return `<span><span style="color: var(--text-color-sensor);">${states['sensor.docker_homeassistant_status'].state}</span></span>`
    ]]]
  cpu:
    card:
      type: custom:bar-card
      entity: sensor.docker_homeassistant_1cpu
  ram:
    card:
      type: custom:bar-card
      entity: sensor.docker_homeassistant_memory
  ramp:
    card:
      type: custom:bar-card
      entity: sensor.docker_homeassistant_memory_percent

Later edit: It seems some styles need to be set at the bar-card level and not at the style level … I am getting closer

klogg · September 26, 2021, 9:45pm

This is quite a complex config.
The mod-card actually ‘contains’ a vertical-stack which is made up of a custom:config-template-card which in turns displays the entities.

I am not sure where you mean me to try removing the margin?

Thanks and I understand if this is all a bit esoteric.

Here is the whole config which I have simplified by removing the entire tap action section.
Also to try and make the code more readable here is another image which shows how each row can be expanded with extra detail.

# lovelace_gen

#===============================================================
#=== ZONE DURATION LINE
#===
#=== A line for each zone showing duration, every day check box
#=== and buttons for each day.
#===
#=== cycle: Cycle number 1, 2 or 3
#=== zone:  Zone number 1 to 16
#===============================================================

#=== mod-card to allow conditional displaying of zones (based
#=== on the number of zones configured) and to put a border
type: custom:mod-card
card_mod:
  style: |
    ha-card {
      {% raw %}
      {% set zone = {% endraw %} {{ zone }} {% raw %} %}
      {% set zone_count = states('input_number.irrigation_number_of_zones') %}
      {% if (zone_count | int) < (zone | int) %}
        display: none;
      {% else %}
        border: 1px solid var(--primary-background-color);
      {% endif %}
      {% endraw %}
    }
card:

  #==============================
  #=== DURATION AND DAY BUTTONS
  #==============================
  type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        #=== ZONE DURATION
        - type: custom:config-template-card
          variables:
            - states['input_text.irrigation_zone{{ zone }}_name'].state
            - states['input_text.irrigation_cycle{{ cycle }}_name'].state
            - states['timer.irrigation_zone{{ zone }}_timer'].state
          entities:
            - input_text.irrigation_zone{{ zone }}_name
            - input_number.irrigation_cycle{{ cycle }}_zone{{ zone }}_duration
            - timer.irrigation_zone{{ zone }}_timer
          card:
            type: entities
            entities:
              - entity: input_number.irrigation_cycle{{ cycle }}_zone{{ zone }}_duration
                name: "${ vars[0] }"
                icon: "${ vars[2] === 'active' ? 'mdi:sprinkler-variant' : '' }"
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                  background: none;
                  overflow: visible !important;
                }
                #states {
                  font-family: {% raw %}{{ states('input_text.irrigation_ui_font_family') }}{% endraw %};
                  font-size: 16px;
                  padding: 0.25em 0.75em 0.25em 0.25em;
                }
                :host {
                  {% raw %}
                  {% if is_state('input_select.irrigation_cycle', 'cycle1') %}
                    {% set cycle_ui = 1 %}
                  {% elif is_state('input_boolean.irrigation_cycle', 'cycle2') %}
                    {% set cycle_ui = 2 %}
                  {% else %}
                    {% set cycle_ui = 3 %}
                  {% endif %}
                  {% set zone = {% endraw %} {{ zone }} {% raw %} %}
                  {% set cycle = {% endraw %} {{ cycle }} {% raw %} %}
                  {% if is_state('timer.irrigation_zone' ~ zone ~ '_timer', 'active') and 
                        cycle_ui == 3 %}
                    --paper-item-icon-color: var(--paper-item-icon-active-color);
                  {% endif %}
                  {% endraw %}
                  ;
                }

        #=== EVERY DAY CHECK BOX
        - !include
          - item_cycle_zone_every_day_check_box.yaml
          - entity: input_boolean.irrigation_cycle{{ cycle }}_zone{{ zone }}_every_day


    #======================
    #=== ZONE DAY BUTTONS
    #======================
    - type: conditional
      conditions:
        - entity: input_boolean.irrigation_cycle{{ cycle }}_zone{{ zone }}_every_day
          state: "off"
      card:
        type: custom:mod-card
        card_mod:
          style: |
            ha-card {
              margin: 0em 0.5em 0.5em 0em
            }
        card:
          type: horizontal-stack
          cards:

            - type: custom:button-card
              color_type: blank-card

            - !include
              - item_cycle_day_select_button.yaml
              - entity: input_boolean.irrigation_cycle{{ cycle }}_zone{{ zone }}_mon
                name: Mon

            - !include
              - item_cycle_day_select_button.yaml
              - entity: input_boolean.irrigation_cycle{{ cycle }}_zone{{ zone }}_tue
                name: Tue

            - !include
              - item_cycle_day_select_button.yaml
              - entity: input_boolean.irrigation_cycle{{ cycle }}_zone{{ zone }}_wed
                name: Wed

            - !include
              - item_cycle_day_select_button.yaml
              - entity: input_boolean.irrigation_cycle{{ cycle }}_zone{{ zone }}_thu
                name: Thu

            - !include
              - item_cycle_day_select_button.yaml
              - entity: input_boolean.irrigation_cycle{{ cycle }}_zone{{ zone }}_fri
                name: Fri

            - !include
              - item_cycle_day_select_button.yaml
              - entity: input_boolean.irrigation_cycle{{ cycle }}_zone{{ zone }}_sat
                name: Sat

            - !include
              - item_cycle_day_select_button.yaml
              - entity: input_boolean.irrigation_cycle{{ cycle }}_zone{{ zone }}_sun
                name: Sun

Ildar_Gabdullin · September 27, 2021, 7:43pm

Look at your card:

There are vertical spaces (margins, probably) between cards.
As far as I understood your logic is:

if TRUE (whatever) then DO_NOT_SHOW
else BORDER

If some card (i.e. some row) is hidden, the margin-bottom is still displayed.
That is why I proposed you to remove the margin-bottom too.

LeidenSpain · September 27, 2021, 8:22pm

Hi,

I have a multi-part card with horizontal-stack and vertical-stack.
I want the whole set to show a border, so that I can create groups at a visual level

type: conditional
conditions:
  - entity: switch.docker_mariadb
    state: 'on'
card:
  type: vertical-stack
  cards:
    - type: entity
      entity: switch.docker_mariadb
    - type: horizontal-stack
      cards:
        - entities:
            - entity: sensor.docker_mariadb_memory
              index: 0
              show_points: true
          hours_to_show: 12
          points_per_hour: 6
          color_thresholds:
            - value: 180
              color: '#5F9BEA'
            - value: 200
              color: '#d35400'
            - value: 240
              color: '#c0392b'
          color_thresholds_transition: smooth
          hour24: true
          line_color: '#5F9BEA'
          show:
            average: true
            extrema: true
            icon: false
            legend: false
            name: true
          type: custom:mini-graph-card
        - entities:
            - entity: sensor.docker_mariadb_cpu
              index: 0
              show_points: true
          hours_to_show: 12
          points_per_hour: 6
          color_thresholds:
            - value: 180
              color: '#5F9BEA'
            - value: 200
              color: '#d35400'
            - value: 240
              color: '#c0392b'
          color_thresholds_transition: smooth
          hour24: true
          line_color: '#5F9BEA'
          show:
            average: true
            extrema: true
            icon: false
            legend: false
            name: true
          type: custom:mini-graph-card
    - type: gauge
      entity: sensor.docker_mariadb_memory_percent
      min: 0
      max: 100

How can I add card-mod to make that modification to me?
I have tried many possibilities but none have worked.

Regards

Cuacco · September 28, 2021, 5:13pm

Thanks, for show me, I am learning about the restrictions

Mariusthvdb · September 30, 2021, 10:19am

just noticed there’s no pointer to template-entity-row on the more examples link which ofc was just what I was looking for.

got this entity-row:

  - type: custom:template-entity-row
    entity: binary_sensor.vijverpompen
    name: >
      Vijverpompen {{'moeten:' if is_state(config.entity,'on') else 'mogen:'}}
    secondary: >
      {% set temp = states('sensor.pond_buiten_sensor_calibrated_temperature')|float %}
      {% set dark = 'Licht' if is_state('binary_sensor.dark_outside','off') else 'Donker'%}
      {{relative_time(states[config.entity].last_changed)}} ago, {{dark}} en {{temp}}°C
    state: >
      {{'Aan' if is_state(config.entity,'on') else 'Uit'}}
    icon: >
      {{'mdi:engine' if is_state(config.entity,'on') else 'mdi:engine-off-outline'}}

which I need the icon to change colors depending on states(config.entity)…

Have this in a template sensor(top entity below) that is customized via custom-ui’s template option. the T-e-r makes it somewhat more complex.

now how do I go forward changing color, and, preferably, make the icon rotate

tried all options above, and then some… made them up myself using template-entity-row, but nothing happens ;-((

or copied from inspector:

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 > hui-masonry-view").shadowRoot.querySelector("#columns > div > hui-entities-card:nth-child(8)").shadowRoot.querySelector("#states > div:nth-child(5) > template-entity-row").shadowRoot.querySelector("#wrapper > state-badge").shadowRoot.querySelector("ha-icon").shadowRoot.querySelector("ha-svg-icon")

hope this can be done and would immensely appreciate any suggestions…

Ildar_Gabdullin · September 30, 2021, 3:18pm

Styling custom:template-entity-row:

Code

type: entities
entities:
  - type: custom:template-entity-row
    entity: binary_sensor.test_value_from_input_boolean
    name: name
    secondary: some value
    state: state
    icon: mdi:engine
    card_mod:
      style:
        div#wrapper:
          state-badge $: |
            ha-state-icon {
              color: red !important;
            }
          .: |
            .state {
              color: magenta;
            }
            .info {
              color: cyan;
            }
            .info .secondary {
              color: orange;
            }

Animation - rotating & coloring:
2 variants for resizing are provided:
– changing “–mdc-icon-size”;
– changing “height” & “width”.

ttt

Resizing in the 1st variant currently does not work in iOS & MacOS.
It was was promised to be fixed in Safari 16.

Code

type: entities
entities:
  - type: custom:template-entity-row
    entity: sun.sun
    name: '--mdc-icon-size'
    secondary: some value
    state: state
    icon: mdi:fan
    card_mod:
      style:
        div#wrapper: |
          state-badge {
            animation: rotation 0.5s linear infinite, resizing 1s linear infinite alternate, coloring 8s linear infinite alternate;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(359deg);
            }
          }
          @keyframes resizing {
            0% {
              --mdc-icon-size: 10px;
            }
            25% {
              --mdc-icon-size: 15px;
            }
            50% {
              --mdc-icon-size: 20px;
            }
            75% {
              --mdc-icon-size: 26px;
            }
            100% {
              --mdc-icon-size: 32px;
            }
          }
          @keyframes coloring {
            0% {
              color: red;
            }
            17% {
              color: orange;
            }
            34% {
              color: yellow;
            }
            51% {
              color: green;
            }
            68% {
              color: lightblue;
            }
            85% {
              color: blue;
            }
            100% {
              color: violet;
            }
          }
  - type: custom:template-entity-row
    entity: sun.sun
    name: height & width
    secondary: some value
    state: state
    icon: mdi:fan
    card_mod:
      style:
        div#wrapper state-badge $ ha-state-icon $ ha-icon $: |
          ha-svg-icon {
            animation: rotation 0.5s linear infinite, resizing 1s linear infinite alternate, coloring 8s linear infinite alternate;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(359deg);
            }
          }
          @keyframes resizing {
            0% {
              height: 10px;
              width: 10px;
            }
            25% {
              height: 15px;
              width: 15px;
            }
            50% {
              height: 20px;
              width: 20px;
            }
            75% {
              height: 26px;
              width: 26px;
            }
            100% {
              height: 32px;
              width: 32px;
            }
          }
          @keyframes coloring {
            0% {
              color: red;
            }
            17% {
              color: orange;
            }
            34% {
              color: yellow;
            }
            51% {
              color: green;
            }
            68% {
              color: lightblue;
            }
            85% {
              color: blue;
            }
            100% {
              color: violet;
            }
          }