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

Nice looking))

yes, happy with it, next challenge is luring: widen the markdown (see the mod-card that works, but card-mod says I am doing it wrong…

#  - type: custom:mod-card
#    card_mod:
#      style: |
#        ha-card {
#          margin: -8px -16px -16px -16px;
#        }
#    card:
  - type: custom:hui-element
    card_type: markdown
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
        }
        .card-content {
          margin: -8px -16px -16px -16px;
        }
    content: >

this should be the easiest:

  - type: custom:hui-element
    card_type: markdown
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: 0px -16px -16px -16px;
        }

but often makes the card go beyond its borders…

Marius, what do you have & what do you want?
In pics.

OK,
1 . Take the code with your attempts to change an icon’s color (there is a ready example in the post I told you about earlier).
2 . Find a code for rotating an icon inside Entities card.
3 . Put these codes together.

5 . PROFIT!

entities with an include:

type: entities
title: Raspberry Pi4
card_mod:
  style: |
    .card-header {
      background-color: var(--background-color-off);
      color: var(--text-color-off);
      padding-top: 0px;
      padding-bottom: 0px;
      margin: 0px 0px 16px 0px;
    }
entities:
  - binary_sensor.ha_rpi4

  - lots of other things
  - !include /config/lovelace/includes/include_rpi4_graph.yaml # <----- this is the include 

which starts with

#type: custom:mod-card
#card_mod:
#  style:
#    .: |
#     ha-card {
#       box-shadow: none;
#       margin: 0px -16px -16px -16px;
#     }
#card:
type: custom:hui-element
card_type: picture-elements
image: /local/homeassistant/homeassistant.png
card_mod:
  style:
    .: |
     ha-card {
       box-shadow: none;
     }
    '#root>bar-card':
      $: |

adding the default margin: 0px -16px -16px -16px;

renders ok on first refresh but after a reload it makes the card overflow :

using the mod-card:

type: custom:mod-card
card_mod:
  style:
    .: |
     ha-card {
       box-shadow: none;
       margin: 0px -16px -16px -16px;
     }
card:
  type: picture-elements
  image: /local/homeassistant/homeassistant.png
  card_mod:
    style:
      '#root>bar-card':

fixes it permanently like I want it and within the regular card borders:

(but throws the warning ‘mod-card should NEVER be used with a card that already has a ha-card element, such as picture-elements’ …

ive also tried it as stack-in-card, and it makes the bottom picture use the full width, but the fold-entity-row’s are horrible (way too wide):

Meanwhile - how to scale an iframe content (results may depend on the page):

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_number.test_level_1
        name: scale
  - type: iframe
    url: >-
      https://fahrplan.oebb.at/bin/stboard.exe/dn?L=vs_sq&mMode=run&monitorCMSFrames=true&cfgfile=FLORIDSDOR_1192101_534633483&start=yes
    aspect_ratio: 100%
    card_mod:
      style: |
        div#root iframe  {
          transform: scale({{states("input_number.test_level_1")|float / 100|float}});
          transform-origin: 0 0;
          width: 100000px;
          height: 100000px;
        }

nht


More examples are described here.

2 Likes

Probably because you are using fold-entity-row inside stack-in-card - which is WRONG since you must use it inside Entities card.
My proposals are:

  1. Always use stack-in-card as a root element with specified keep options (make a decluttering template).
  2. Place inside this stack any of these elements:
  • entities card (remove top and/or bottom padding if needed - make a decluttering template);
  • bar-card, glance-card etc;
  • any graph-card card;
  • internal stack-in-card with specified keep options (for example, the outer stack has outer-padding: false and the internal stack has outer-padding: true) + any inserted cards mentioned above;
  • entities card with ONE entity row - fold-entity-row (make a decluttering template) - with expanded .card-content (padding: 0px 0px 0px 0px) and shifted head (margin-left/right: 16px) - and then insert one more stack-in-card (with appropriate keep options) as one of entities.

Play with it - It will worth it.

1 Like

YES! these are the magic words, how could I have missed that… and its way easier than you suggest above :wink:

moving the folds under the top entities card did the trick… (well, and a tiny extra box-shadow mod on the bottom include itself:

type: custom:stack-in-card
title: Raspberry Pi4
keep:
  background: true
card_mod:
  style: |
    .card-header {
      background-color: var(--background-color-off);
      color: var(--text-color-off);
      padding-top: 0px;
      padding-bottom: 0px;
      margin: 0px 0px 16px 0px;
    }
cards:
  - type: entities
    entities:
      - binary_sensor.ha_rpi4
      - sensor.cpu_temp_read
      - type: custom:multiple-entity-row
        entity: sensor.argon_one_addon_fan_speed
        name: Argon fan
        secondary_info: last-changed
        card_mod:
          style:
            hui-generic-entity-row:
              $:
                state-badge:
                  $:
                    ha-icon:
                      $: |
                        ha-svg-icon {
                          {% set speed = states(config.entity)|int(default=0) %}
                          {% set mapper = {0:'green',1:'darkgreen',3:'orange',33:'orangered',66:'maroon'} %}
                          color: {{ mapper[speed] if speed in mapper else 'red'}};
                          animation:
                          {% if speed != 0 -%}
                          {% set mapper = {1:'4',3:'3',33:'2',66:'1'} %}
                          {% set rotation = mapper[speed] if speed in mapper else '0.3' %}
                          {{'rotation ' + rotation +'s linear infinite'}}
                          {% else %} null
                          {% endif %}
                        }
                        @keyframes rotation {
                          0% {
                            transform: rotate(0deg);
                          }
                          100% {
                            transform: rotate(360deg);
                          }
                        }

        entities:
          - attribute: Temperature C
            name: Temp
            unit: '°C'
          - attribute: mode
            name: Mode
          - attribute: fan level
            name: Level
      - type: custom:fold-entity-row
        head:
          type: section
          label: Last boot
        padding: 0
        entities:
          - entity: sensor.last_boot_phrase
            name: Last boot
          - entity: sensor.last_boot_date_time
            name: Last boot date
          - sensor.last_boot
      - type: custom:fold-entity-row
        head:
          type: section
          label: System monitor
        padding: 0
        entities:
          - sensor.processor_temperature
          - sensor.processor_use
          - sensor.disk_free_home
          - sensor.disk_use_home
          - sensor.disk_use_percent_home
          - sensor.memory_free
          - sensor.memory_use
          - sensor.memory_use_percent
          - sensor.swap_use
          - sensor.swap_use_percent
          - sensor.swap_free
          - sensor.ipv4_address_eth0
          - sensor.external_ip

  - !include /config/lovelace/includes/include_rpi4_graph.yaml

though as you can see there is still a returning space above the blue card. When I refresh that is gone, do another reload in the browser and its back again… how can I prevent that?

believed I cheered to soon, al sorts of margin issues arise when using the stack-in-card out of the box. Guess Ill live with the blue card as a stand alone card, and have an entities card back…

Try to apply the rotation style directly to the state-badge element.

image
Remove box-shadow from the Entities card.
Also specify keep::margin=false for the stack.

Do not specify margins for the embedded picture-elements-card.
Do this :

When you make margins negative , you may overlap another card…

yes, that works and shifted it a bit:

  - type: entities
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: -16px 0px 0px 0px;
        }

not sure what you suggest here:

replace:

        card_mod:
          style:
            hui-generic-entity-row:
              $:
                state-badge:
                  $:
                    ha-icon:
                      $: |
                        ha-svg-icon {

with

        card_mod:
          style:
            state-badge:
              $:
                ha-icon:
                  $: |
                    ha-svg-icon {

?

I have none set now.

No,

hui-generic-entity-row:
              $: |
                state-badge {
...

thanks! (set it to 66% for testing purposes :wink: )

Dec-02-2021 21-40-53

2 Likes

Good. As I wrote before, it is a good idea to create decluttering cards for a stack, entities inside stack, folded stack. Then building a card becomes like a building a house from ready bricks.

Hello.
Is it possible to intergrade 5 buttons inline tougher with slider to get the result as shown on right side of the image?

PROFIT - I’ll never profit aside from a greater deal of acceptance from the domestic minister for home affairs :rofl:

Thanks for the pointers, but I know I’m still doing something wrong here - I get how to make the icon go green, but I have no idea where I’m going wrong with the rotation. It’s definitely a lack of skill issue on my part :frowning:

it works well with an entities card using the below code block,

type: entities
entities:
  - entity: switch.night_light
    icon: mdi:fan
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
              
              {% if is_state('switch.night_light', 'on') %}
              color: green;
              animation: rotation 1.5s linear infinite;
              {% endif %}
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }

but when I move it to a glance card, it just shows a yellow state icon - I know you said to put the two code blocks together, but I know I’ve done something wrong…

type: glance
entities:
  - entity: switch.night_light
    icon: mdi:fan
    tap_action:
      action: toggle
show_name: false
card_mod:
  style: |
    ha-card {
      --paper-item-icon-active-color: green;
    }
    card-mod-glance:
    $: |
    state-badge {
      {% if is_state('switch.night_light', 'on' %}
      color: green;
      animation: rotation 1.5s linear infinite;
      {% endif %}
    }
    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
1 Like

had this footer mod:

        .header-footer.footer {
          --mdc-icon-size: 30px;
          padding-bottom: 10px;
          font-weight: bold;
          font-size: 20px;
          color: orange;
        }

but on latest dev that no longer works, showing:

latest frontend update has a ‘chip’ change I suppose has to do with this, but I cant find the correct setting to again center these chip icons, and colorize and resize the middle ‘My’…

Wrong. Your code is to make ALL icons to be green by changing a variable --paper-item-icon-active-color.
You should use a code to change a color by using DOM navigation for all entities or some entity (YOUR case since you want to rotate it next) - see again this topic:

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
    card_mod:
      style: |
        state-badge {
          color: red;
        }
  - entity: sensor.cleargrass_1_co2

image

Then regarding rotation:

What is that? Where did you take it?
Use same method as for entities - but apply it as the style for a changing color.

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
    card_mod:
      style: |
        state-badge {
          color: red;
          animation: rotation 0.5s linear infinite;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
  - entity: sensor.cleargrass_1_co2

Seriously - you have got ready “bricks” of card-mod examples - and your task is just to combine them properly. This is not a matter of “knowing CSS” - basically this is a matter of “learning”, if talking about simple cases.

The code for the footer plz…
On my setup all these footer/header examples still work.

I see, you are talking about dev HA version… Haven’t seen it yet.

Can someone give me a hint how I can add margin to the following card to increase the spacing between the value and the unit:

          - entity: input_number.bedroom_bedappliances_maximumruntime
            icon: mdi:alarm
            type: custom:numberbox-card
            border: false
            name: false  

image

I’ve just spent an hour if not two trying different options.
My dom tree looks like this:

I essentially need to add

margin-left: 10px

to

span.cur-unit

It’s 2.30am, I’ll :arrow_right::sleeping:, my brain is dead :unamused:

some oddity. using a mod on an embedded markdown card

      - type: custom:hui-element
        card_type: markdown
        card_mod:
          style: |
            ha-card {
              margin: 8px 0px -16px -0px;
              font-size: 20px;
              box-shadow: none;
            }

regularly changes the full card to use the size setting on the full entities card it is used in (except for the header). But including even the text in the fold-entity-row header, and fold itself:

  - type: entities
    title: Weather quick view
    card_mod: &header
      style: |
        .card-header {
          background-color: var(--background-color-off);
          color: var(--text-color-off);
          padding-top: 0px;
          padding-bottom: 0px;
          margin: 0px 0px 16px 0px;
        }
    entities:
        badges:
          - sensor.weather_animated_icon
          - sensor.badge_wind_compass
          - sensor.wind_compass
          - sensor.wind_bft
      - type: custom:hui-element
        card_type: markdown
        card_mod:
          style: |
            ha-card {
              margin: 8px 0px -16px -0px;
              font-size: 20px;
              box-shadow: none;
            }
        content: >
          **Weersverwachting:**

          Voor vandaag, {{states('sensor.vandaag')}}:

          {{states('sensor.weather_animated_icon')}}, {{states('sensor.dark_sky_temperature')}}°


          <font color= {{states('sensor.temperature_color_name')}}>{{states('sensor.dark_sky_daily_summary')}}</font>
      - type: custom:fold-entity-row
        head:
          type: section
          label: Details
        padding: 0
        entities:
          - sensor.temp_current
          - sensor.mean_outdoor_temp
          - sensor.buienradar_feel_temperature
          - sensor.dark_sky_apparent_temperature
          - sensor.real_feel_temp

as it should be

but:


a mere reload of the page then fixes it, but still seems odd this keeps happening on first loads for Safari, Chrome still shows the enlarged card. Someone spots anything incorrect?

edit

adding ‘.type-markdown’:

      - type: custom:hui-element
        card_type: markdown
        card_mod:
          style: |
            ha-card.type-markdown {
              margin: 8px 0px -16px -0px;
              font-size: 20px;
              box-shadow: none;
            }

seems to fix it. Will check if that is permanent. Still want to understand why this is happening though…