šŸ”¹ Card-mod - Add css styles to any lovelace card

Have you deactivated card-mod to make sure thatā€™s the problem?

Yes. After deactivating card-mod the problem disappears. Tested for about 6 hours without card-mod.

this sounds very promising indeed! thank you for keeping up in developing this great tool.

would this also allow us to set eg state_color: true and use it as a global ā€˜customizingā€™ tool, a bit like custom-ui allowed us to do in states-ui?

If not, would be willing to consider thinking about that please? We really could use a global customizing tool for Lovelace.

Since updating to 0.105.x (currently 0.105.2), some entity types in glance cards no longer accept my styles for the ā€œactiveā€ color. Examples are input_boolean & automation, and both worked fine under 0.104.x. Hereā€™s a snippet from a glance card:

              - entity: input_boolean.heat_water
                name: Heat
                tap_action:
                  action: toggle
                hold_action:
                  action: more-info
                icon: 'mdi:fire'
                style: |
                  :host {
                    --paper-item-icon-color:
                      {% if states(config.entity) == 'on' %} red;
                      {% else %} green;
                      {% endif %}
                  }
            type: glance

When the input_boolean is off, the icon is green as expected. When itā€™s on, I get the default color (yellow) instead of red. If I open the inspector, I still see the card-mod element in what looks like the correct place with the correct color based on the state, but the icon itself gets the default active color (yellow).

Adding state_color: true to the glance card doesnā€™t help, but I donā€™t think itā€™s supposed to be used there anyway. Same happens for automation entities in a glance card.

Please help me disable the sticky button. My Hass.io ver:0.105.2 (yaml configuration method). In the previous version (card-modder.js) everything worked great! Now - button staying selected after a click. How to apply a style to a pressed button (when pressed and removed the pointer)? Or how to turn off sticking?

  • type: entity-button
    icon: hide
    name: Receiver
    entity: input_select.remote
    hold_action: none
    tap_action:
    action: call-service
    service: input_select.set_options
    service_data:
    entity_id: input_select.remote
    options: ā€œVSXā€
    style: |
    :host {
    ā€“ha-card-background: linear-gradient(rgba(235,145,70,1), rgba(70,35,0,1) 65%);
    }

or this:

style: |
ha-card {
background: linear-gradient(rgba(235,145,70,1), rgba(70,35,0,1) 65%);
}

1

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

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

Dear community,
I am using a custom:vertical-stack-in-card to compile data from different sensors.
Part of the cards of this main card are conditional cards combined with entity card. How can I remove space between each card when they appear?

  - card:
      entities:
        - sensor.paris_rain_chance
      type: entities
    conditions:
      - entity: sensor.paris_rain_chance
        state_not: '0'
    type: conditional

image

I will take a look at this. I havenā€™t used lovelace_gen before (Iā€™ve been using decluttering-card) so I have to get it setup. I have been meaning to explore it anyway.

Damn, I love your UI BTW! I love your super compact checkbox with label.

UPDATE: @klogg in zone_duration_line.yaml add the 4 style lines to shrink the top and bottom padding from 16 pixels to 0 pixels.

    - type: custom:hui-entities-card
      show_header_toggle: false
      style: |-
        #states {
          padding: 0px 16px;
        }
      entities:
        - entity: input_number.irrigation_zone{{ zone }}_duration
          name: Zone {{ zone }}

I had trouble tracking down why the checkbox stayed lower than the entity on the left, but I found an inelegant, but workingā€¦ work-around. In button_boolean_check_box.yaml add the style lines.

type: custom:button-card
style: |-
  ha-card#card.button-card-main {
    position: relative;
    top: -8px;
  }
1 Like

Thanks, Like I said, entirely inspired by your post elsewhere!

And even bigger thanks for the white space removal!
I must admit that I play around blindly with those style entries as I donā€™t entirely understand how to identify the elements. But I never would have stumbled upon this solution. Thanks againā€¦

1 Like

Just for completeness I included a default so that the Weather Adjust check box stays in the right place :slight_smile:

style: |
  ha-card#card.button-card-main {
    position: relative;
    top: {{ vertical_shift | default('auto') }};
  }
2 Likes

Use an entities card instead, and the new conditional row.

2 Likes

Indeed, that is great! I didnā€™t see this coming. Thank you!

Hi Thomas, I am trying to integrate card-mod with my custom card but not having much success. In my render method, I output an ha-card tag. I looked at the new build chain for your ha-card.js which inserts a shadowdom at that element when entity_ids is populated. How/where does entity_ids get set in the ha-card lifecycle?

Card-mod looks for a property named config or _config in the parent nodes of the ha-card element (keeps looking up the tree if necessary).
Pretty much every card Iā€™ve seen sets this property in the setConfig function, and itā€™s the only requirement for card-mod to work.

entity_ids is a property in the card configuration, but is entirely optional. It can be used to tweak the update behavior of templates, but should generally not be necessary.
Anyway, itā€™s nothing you should need to bother with.

I installed the card-mod using HACS. After a moment wondering the missing style changes, I noticed the error in web-console:

TypeError: Error resolving module specifier: card-tools/src/templates.js

Iā€™m running HA 0.105.2, card-mod 12. Any hint how to resolve this error, a resource missing from the installation, maybe? Thanks!

Update hacs to 0.21.2 and then try again.

Update HACS to 0.21.3 and then try again.

Thank you! Update to the latest HACS + reinstall did it. :slightly_smiling_face:

Yep. Uptade to HACS 0.21.4 + reinstall solves the problem. Thank you @thomasloven nad @ludeeus.

Iā€™m trying to adjust the font-weight as it quite bold on default, everything else seems to work fine, but any syntax for font-weight doesnā€™t change anything, Iā€™ve tried the following:

 font-weight: normal;
 font-weight: bold;
 font-weight: lighter;
 font-weight: 300;

Any ideas? thanks