đŸ”č Card-mod - Add css styles to any lovelace card

Hi,
I’d like to modify the padding of the highlighted element (div#root) for consistency with my other cards. I read through the documentation, but I still don’t understand how the styling works when the element is inside a “shadow-root”.

Could anyone help me ?
Thanks!

Does anyone have an idea on how to replicate the Schneider Connected Home “look”
Would this be best to attempt from a theme? Could both the color scheme and the card-mod/styles be implemented in a theme?

  • Simple gradient bacground
  • Big and tablet-friendly gradient “Buttons”
1 Like

Sorry if this has already been answered.

Very new to this modding tool and a little overwelmed

Came here looking to change the width of a card.

type: shopping-list
title: Shopping list

This is my shopping list card and just want to change the width. Can someone offer an example to achieve this.

All Lovelace cards are supposed to be of the same width.
If the shopping list card’s width is not enough for you, consider “panel mode” for the view (the view must contain only one card which occupies whole window’s width).

My issue is the opposite problem.

I am trying to create a dashboard for a wall mounted table and wanted the shopping list card down one edge. However Items only ever fill 1/3 of the width.

I wanted to reduce the width to allow more space for other cards / buttons.

Hi everyone.

How can I change the font size?
Thank you.

It is a whole new can of worms but have you looked at the custom button card?

It is so flexible/versatile that it is virtually an entire UI in itself.

How can I reduce the word, CPU, here?

image

Not really sure what to put. I have tried “font-size” but unsuccessful.

      - type: custom:stack-in-card
        mode: vertical
        cards:
          - type: horizontal-stack
            cards:
              - type: button
                entity: input_boolean.star
                show_name: false
                card_mod:
                  style: |
                    :host {
                      transform: scale(1.5,1.5);
                    }                       
              - type: gauge
                them: default
                name: CPU
                min: 0
                max: 100
                unit: '%'
                entity: sensor.risingstar_intel_core_i7_8565u_load_cpu_total
                card_mod:
                  style: |
                    :host {
                      transform: scale(1.5,1.5);
                    }                 
              - type: gauge
                them: default
                name: RAM
                min: 0
                max: 100
                unit: '%'
                entity: sensor.risingstar_generic_memory_load_memory
              - type: gauge
                them: default
                name: Temp
                min: 30
                max: 70
                entity: sensor.risingstar_intel_core_i7_8565u_temperatures_cpu_package
              - type: gauge
                them: default
                name: Wts
                min: 5
                max: 50
                unit: 'W'
                entity: sensor.risingstar_wattage
1 Like

Cool mod!
I’ve already got 99% of the styles the way I want.

However, how do I disable the ripple effect when pressing a button card? My wall tablet is kinda slow and it really struggles to play that


Hi there,
I need some help (if possible), I would like to have an icon to spin only when the device it’s on, inside an entities-card

image

So basically anytime the state is not “off” or “unavailable” it should spin


Unfortunately my knowledge of CSS is below 0 :smiley:
I did try to follow this thread but without success, right now I am at:

        title: Ventilatori
        show_header_toggle: false
        entities:
          - type: custom:fan-control-entity-row
            entity: fan.ventilatore_salone
            name: Salone
            customTheme: false
            style: |
              @keyframes spin {
              }
              ha-card {
              }

Any feedback welcome :slight_smile:
Thanks!

There is an example for the Entities card.
Then you can edit this example for your custom card.

1 Like

Thanks!
Ok, that example made the icon orange and spinny
 now
 how would I do in order to have it colored (with the theme color) and spinning only when on?

Thanks again :slight_smile:

Just upgraded from 21.06.2 to 21.09.6

Now notice than whenever I click a glance card to turn on / off a switch, the name/icon drop down ~5px or so for a few seconds, and then pop-back. Unsure if it’s card-mod issue or something else?

image

Ie. I just click ‘Fam Cans’ above

Try kind of this:

                  ha-svg-icon {
                    {% if is_state('sun.sun','above_horizon') %}
                    animation: rotation 0.5s linear infinite;
                    {% endif %}
                  }

Thanks, will give it a try today!

That seems to generate an error on line:

animation: rotation 0.5s linear infinite;

Error: mapping values are not allowed here in


Post the whole code here

sure, here it is
 I mean
 it’s exactly what you gave me except for the entity name :slight_smile:

      - type: entities
        title: Ventilatori
        show_header_toggle: false
        entities:
          - type: custom:fan-control-entity-row
            entity: fan.ventilatore_salone
            name: Salone
            customTheme: false
            style:
              ha-svg-icon {
                {% if is_state('fan.ventilatore_salone','on') %}
                  animation: rotation 0.5s linear infinite;
                {% endif %}
              }
  1. Since card-mod 3.0 it is required to use the "card_mod" keyword (see docs on Github).
  2. The “|” pipe symbol is missing.
  3. Regarding "ha-svg-icon {..." - cannot confirm since I am not using fan-control-entity-row card. Just for testing purpose - create a usual row and apply the style. Then using Code Inspector find out a proper path to the element which is supposed to be rotating.

I see, I thought what you linked me before was still valid :slight_smile:

I’ve updated using your suggestions, that error disappear but it still doesn’t work.
I’ve created a normal entity and the behaviour is the same, the ha-svg-icon I think is correct (but not completely sure)

This is nwo the code for the simple card with the style:

      - type: entities
        title: Ventilatori
        show_header_toggle: false
        entities:
          - entity: fan.ventilatore_salone
            card_mod:
              style: |
                ha-svg-icon {
                  {% if is_state('fan.ventilatore_salone','on') %}
                    animation: rotation 0.5s linear infinite;
                  {% endif %}
                }

Unfortunately it doesn’t spin yet
image