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

Share your Projects! Dashboards & Frontend
341

I have created (inspired by @BrianHanifin) what I think is quite a nice UI of for my new garden irrigation system. Except for some empty space I’d like to remove between each ‘line’.

In the following pictures I have left a border around each horizontal-stack just to aid seeing what is going on. Each horizontal-stack is made up of one entity and one custom-button but I’d like them to not have so much space around them. The config is at the end of this post.

Is this possible? Is there anyone who can help? Thanks in advance…

image
image522×538 17.1 KB

image

image image

image

Lovelace View - Each Zone line is an include

      #=== Zone 1
      - !include
        - includes/irrigation/zone_duration_line.yaml
        - cycle: 1
          zone: 1

zone_duration_line.yaml (which has another include for the button)

# lovelace_gen
type: custom:mod-card
style: |
  ha-card {
    border: 1px solid green;
  }

card:
  type: custom:hui-horizontal-stack-card
  cards:

    - type: custom:hui-entities-card
      show_header_toggle: false
      entities:
        - entity: input_number.irrigation_cycle{{ cycle }}_zone{{ zone }}_duration
          name: Zone {{ zone }}

    #=== Skip Zone
    - !include
      - ../button_boolean_check_box.yaml
      - entity: input_boolean.irrigation_cycle{{ cycle }}_skip_zone{{ zone }}
        layout: name_over_icon
        name: Skip
        on_icon: mdi:close-box-outline
        card_width: 50px
        card_margin_top: 1.4em
        card_height: 40px
        card_font_size: 12px
        grid_template_areas: >
          "l" "n" "i" "s"
        grid_template_columns: 1fr
        grid_template_rows: min-content min-content 1fr min-content
        name_justify_self: auto

button_boolean_check_box.yaml

# lovelace_gen
#======================
#=== Boolean Check Box
#======================
type: custom:button-card
entity: {{ entity }}
show_name: {{ show_name | default('true') }}
name: {{ name }}
icon: {{ on_icon | default('mdi:check-box-outline') }}
size: {{ size | default('80%') }}
lock:
  enabled: {{ lock_enabled | default('false') }}
styles:
  lock:
    - color: {{ lock_color | default('red') }}
  grid:
    - grid-template-areas: >
        {{ grid_template_areas | default('"n i"') }}
    - grid-template-columns: {{ grid_template_columns | default('1fr 15%') }}
    - grid-template-rows: {{ grid_template_rows | default('1fr') }}
  card:
    - width: {{ card_width | default('') }}
    - height: {{ card_height | default('40px') }}
    - margin-top: {{ card_margin_top | default('-0.3em') }}
    - font-size: {{ card_font_size | default('14px') }}
    - border-radius: {{ card_border_radius | default('10px') }}
  name:
    - justify-self: {{ name_justify_self | default('right') }}
state:
  - value: 'off'
    icon: {{ off_icon | default('mdi:checkbox-blank-outline') }}
    styles:
      card:
        - color: {{ card_off_color | default('var(--secondary-text-color)') }}
      icon:
        - color: {{ icon_off_color | default('var(--secondary-text-color)') }}
2 Likes