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

Ildar_Gabdullin · February 7, 2022, 9:09pm

Not clear, make a picture in MS Paint

Ildar_Gabdullin · February 7, 2022, 9:11pm

I do remember the question, will try to reproduce these cases and come back a bit later.

e-raser · February 7, 2022, 9:11pm

  - type: entities
    title: ''
    state_color: true
    show_header_toggle: false
    entities:
      - type: weblink
        name: Betriebsstatus
        url: /smart-home-gewerke/betriebsstatus
        icon: mdi:checkbox-marked-circle
        card_mod:
          style: |
            a {
              #padding-left: 65px;
              letter-spacing: 4px;
              text-decoration: none;
              font-weight: 500;
              font-size: 15px;
              #text-align: center;
            }

Ildar_Gabdullin · February 7, 2022, 9:14pm

Meanwhile - using “#” here may not give you the same effect as in another places of yaml code…

e-raser · February 7, 2022, 9:15pm

Thx but it’s working fine (lines with # are ignored and the style is not applied).
Note: I added the card (entities) which contains the row I try to center.

Ildar_Gabdullin · February 7, 2022, 9:56pm

How to center rows in Entities card:

May be applied for weblink & command.

type: entities
entities:
  - sun.sun
  - type: weblink
    name: Some link
    url: http://google.com
    icon: mdi:checkbox-marked-circle
    card_mod:
      style: |
        a {
          justify-self: center;
        }
        a div {
          margin-left: 0px !important;
        }
        :host {
          display: grid;
        }
  - type: button
    action_name: Execute
    entity: sun.sun
    icon: mdi:blank
    name: ' '
    tap_action:
      action: more-info
    card_mod:
      style: |
        div {
          justify-content: center !important;
          margin-left: 0px !important;
        }
        ha-state-icon {
          display: none;
        }

cbstryker · February 8, 2022, 3:42pm

I’m losing my mind trying to get this done. I’m trying to remove the margin from the text element of a card. I want the space between the icon and text to be minimal.

     - type: vertical-stack
         cards:
         - type: entities
             style:
             .: |
                 #states > * {
                 font-size: 14px;
                 margin: -15px -10px -10px -20px !important;
                 padding: -10px -10px -10px -10px !important;
                 }
             show_header_toggle: false
             entities:
             - sensor.next_dawn
             - sensor.nextsunrise

2022-02-08_10:38:08

Any ideas?

arganto · February 8, 2022, 4:55pm

cbstryker:

     - type: vertical-stack
         cards:
         - type: entities
             style:
             .: |
                 #states > * {
                 font-size: 14px;
                 margin: -15px -10px -10px -20px !important;
                 padding: -10px -10px -10px -10px !important;
                 }
             show_header_toggle: false
             entities:
             - sensor.next_dawn
             - sensor.nextsunrise

I’m pretty sure that nothing what you have posted is working. There are so many indentations problems in you example, any help will not help.

Start with a working card.

bluk · February 10, 2022, 6:26pm

Hi! Need help with some overflow text with the Alarm Panel card. Using styling found in a different thread but cannot seam to adjust the Clear button overflow. I can adjust in in the Inspect window (blue arrow) but cannot translate that to the card. Any help or direction is appreciated!

Current YAML

type: alarm-panel
entity: alarm_control_panel.home_alarm
states:
  - arm_home
  - arm_away
card_mod:
  style: |
    ha-card { 
      --paper-input-container-shared-input-style_-_font-size: 2.5rem;
      --keypad-font-size: 2.5rem;
      --mdc-typography-button-font-size: 1.5rem;
      --mdc-button-outline-color: rgba(0, 0, 0, 0);
      --paper-font-subhead_-_font-size: 1.5rem;
      --mdc-shape-small: 10%;
    }
    #keypad {
      width: 30%;
      max-width: 500px !important;
    }
    #keypad mwc-button {
      border-radius: 5px;
    }
    mwc-button.numberkey {
      border-color: rgba(100,100,100,.1);
      border-width: 2px;
      border-style: solid;
    }
    #keypad mwc-button:hover {
      background: rgba(100,100,100,.2);
    }
    #keypad mwc-button {
      padding: 30px !important;
      margin: 4px;
      width: 30%;
      box-sizing: border-box;
      height: 100px;
    }
    paper-input {
        max-width: 300px !important;
    }

Kayinwonderland · February 10, 2022, 7:59pm

Can someone help me? I feel too dumb for this. I try to set the font size to anything smaller (probably 8px) but I have no idea where to add it. Whatever I put in there: it does not change (the only changes that worked after trying was the font color and the background color, but never the font size)

type: vertical-stack
cards:
  - type: custom:button-card
    entity: input_boolean.mail
    size: 20%
    color: white
    show_state: false
    tap_action:
      action: toggle
    state:
      - value: 'off'
        icon: mdi:mailbox-outline
        icon_height: 50px
        name: No Mail
        color: rgba(0,0,0,0.3)
      - value: 'on'
        icon: mdi:mailbox-open-up
        icon_height: 50px
        name: |
          [[[
            var time_delivered = states["input_datetime.mail_time"].state;
            return 'Mail delivered ' + time_delivered 
          ]]]
  - type: custom:button-card
    tap_action:
      action: toggle
    entity: cover.garage_msg100_main_channel
    name: Garage
    show_state: true
    size: 20%
    state:
      - color: null
        icon: mdi:garage
        value: closed
      - color: red
        icon: mdi:garage-open
        value: open

arganto · February 11, 2022, 8:39am

I wonder if you really want to use card_mod for this and propose to ask this in a custom:button-card topic instead.

Kayinwonderland · February 11, 2022, 9:09am

Thanks that really helped me. No idea I could use font size in custom button card. Sorry I’m an absolout Beginner learning my way through this with forum discussions and YouTube tutorials

ASNNetworks · February 11, 2022, 9:48am

The most important step is not forum or YouTube but the README of the card. Always check the github source for full documentation FIRST. That way you know what all options might be, so you’ll understand the usage better/faster. Usually they also provide code examples.

Kayinwonderland · February 11, 2022, 10:32am

I try to always do that. My issue is 99% of the time that the Readme is made for people who Absolutely know about HA and/or coding and I’m new to both and at times simply don’t know where to f. E. Put the font size in the code eventually (I’m a quick learner tho but still not easy at all). Thanks anyways for the hint

msymms · February 11, 2022, 3:51pm

Hi All,
I am having a bit of an issue with the mod-card. I want to place a grid (grid card or custom:grid layout) inside the mod-card so I can style the background. I can get that part working, but if I try to place any cards in the grid they do not show up. Here is a snapshot of the code.

 - type: custom:mod-card
        card:
          type: custom:grid-layout
          layout:
            grid-template-areas: |
              ". sky sky city currtemp currtemp ."
              ...
            grid-template-columns: 0 repeat(5, 1fr) 0
            grid-template-rows: 1.75fr .25fr 1fr 1fr repeat (5,.5fr) 2.5fr 1fr
            grid-gap: .5vw
          cards:
          - type: custom:button-card
              view_layout:
                grid-area: sky
              show_state: false
              show_entity_picture: true;
              tap_action:
                action: none
              entity: sensor.rndrck_current_sky
            - type: markdown
              view_layout:
                grid-area: city
              content: "Round Rock"
        card_mod:
          style: |
            ha-card {
              background: linear-gradient(0deg, rgba(158,196,233,1) 0%, rgba(43,105,144,1) 100%) !important;
            }

It shows up like this:

Capture

Any ideas about what I am missing?

msymms · February 11, 2022, 4:33pm

Make no apologies. Everyone starts somewhere. We have all been new at this. I would still consider myself new. The most important thing is to keep learning and trying.

dowermyr · February 12, 2022, 2:31pm

There is something strage here. Look at the first picture:

The mailbox looks fine, but after refreshing the page, I get this:

e-raser · February 13, 2022, 2:38pm

Awesome, thank you so much!

Ildar_Gabdullin · February 13, 2022, 3:05pm

I only noted the problem in Entities card, did not check other cards.

github.com/thomasloven/lovelace-card-mod

--card-mod-icon stopped working in Entities card

opened 11:58PM - 02 Feb 22 UTC

ildar170975

My Home Assistant version: 2022.2.0 My lovelace configuration method (GUI or …yaml): yaml, storage What I am doing: Trying to change an icon using a `--card-mod-icon` variable. What I expected to happen: The icon is changed. What happened instead: The icon is NOT changed. **Minimal** steps to reproduce: ``` type: entities entities: - entity: sun.sun card_mod: style: | :host { --card-mod-icon: mdi:car; } ``` ![изображение](https://user-images.githubusercontent.com/71872483/152257847-95a860fc-6124-4457-82fd-095000f570e2.png) Error messages from the browser console: none --- **By putting an X in the boxes ([]) below, I indicate that I:** - [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/). - [x] Have made sure I am using the latest version of the plugin. - [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins. - [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

Ildar_Gabdullin · February 13, 2022, 10:02pm

Found some time to check the new card-mod version.
Default HA theme.
Here is a simple case:

Card 1:

type: entities
card_mod:
  style:
    .card-content hui-text-entity-row:
      $:
        hui-generic-entity-row:
          $: |
            .info {
              color: red;
            }
entities: &ref_entities
  - sun.sun
  - sun.sun
  - sun.sun

Code Inspector:

Where I expect to see “card-mod” sections:
in each div section:

on hui-text-entity-row level;
on hui-text-entity-row $ level;
on hui-generic-entity-row level;
on hui-generic-entity-row $ level.

Where “card-mod” sections are created:

on type-entities level (??? why ???);
for each div section:

on hui-text-entity-row level;
on hui-text-entity-row $ level - twice (??? why twice ???);
on hui-generic-entity-row level;
on hui-generic-entity-row $ level.

Card 2:

type: entities
card_mod:
  style:
    .card-content hui-text-entity-row $:
      hui-generic-entity-row:
        $: |
          .info {
            color: red;
          }
entities: *ref_entities

Code Inspector:

Where I expect to see “card-mod” sections:
in the 1st div section:

on hui-text-entity-row $ level;
on hui-generic-entity-row level;
on hui-generic-entity-row $ level.

Where “card-mod” sections are created:

on type-entities level (??? why ???);
for the 1st div section:

on hui-text-entity-row level - NOT PRESENT;
on hui-text-entity-row $ level - twice (??? why twice ???);
on hui-generic-entity-row level;
on hui-generic-entity-row $ level.

for the 2nd & 3rd div sections:

on hui-text-entity-row level - NOT PRESENT;
on hui-text-entity-row $ level (??? why ???);
on hui-generic-entity-row level - NOT PRESENT;
on hui-generic-entity-row $ level - NOT PRESENT.

Card 3:

type: entities
card_mod:
  style:
    .card-content hui-text-entity-row $ hui-generic-entity-row:
      $: |
        .info {
          color: red;
        }
entities: *ref_entities

Code Inspector:

Where I expect to see “card-mod” sections:
in the 1st div section:

on hui-generic-entity-row level;
on hui-generic-entity-row $ level.

Where “card-mod” sections are created:

on type-entities level (??? why ???);
for the 1st div section:

on hui-text-entity-row level - NOT PRESENT;
on hui-text-entity-row $ level (??? why ???);
on hui-generic-entity-row level;
on hui-generic-entity-row $ level.

for the 2nd & 3rd div sections:

on hui-text-entity-row level - NOT PRESENT;
on hui-text-entity-row $ level (??? why ???);
on hui-generic-entity-row level - NOT PRESENT;
on hui-generic-entity-row $ level - NOT PRESENT.

Card 4:

type: entities
card_mod:
  style:
    .card-content hui-text-entity-row $ hui-generic-entity-row $: |
      .info {
        color: red;
      }
entities: *ref_entities

Code Inspector:

Where I expect to see “card-mod” sections:
in the 1st div section:

on hui-generic-entity-row $ level.

Where “card-mod” sections are created:

on type-entities level (??? why ???);
for the 1st div section:

on hui-text-entity-row level - NOT PRESENT;
on hui-text-entity-row $ level (??? why ???);
on hui-generic-entity-row level - NOT PRESENT;
on hui-generic-entity-row $ level.

for the 2nd & 3rd div sections:

on hui-text-entity-row level - NOT PRESENT;
on hui-text-entity-row $ level (??? why ???);
on hui-generic-entity-row level - NOT PRESENT;
on hui-generic-entity-row $ level - NOT PRESENT.

Card 5:

type: entities
card_mod:
  style:
    .card-content hui-text-entity-row:
      $ hui-generic-entity-row $: |
        .info {
          color: red;
        }
entities: *ref_entities

Code Inspector:

Where I expect to see “card-mod” sections:
in each div section:

on hui-text-entity-row level.
on hui-generic-entity-row $ level.

Where “card-mod” sections are created:

on type-entities level (??? why ???);
for each div section:

on hui-text-entity-row level;
on hui-text-entity-row $ level (??? why ???);
on hui-generic-entity-row level - NOT PRESENT;
on hui-generic-entity-row $ level.

Yes, in practice I see some difference between Code Inspector and this.
Probably I misunderstood something.