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

Not clear, make a picture in MS Paint

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

1 Like

  - 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;
            }

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

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.

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;
        }

изображение

2 Likes

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?

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.

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;
    }

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

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

1 Like

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

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.

1 Like

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

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?

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.

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

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

Awesome, thank you so much! :ok_hand:

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

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

image

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:

  1. on type-entities level (??? why ???);
  2. 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

image

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:

  1. on type-entities level (??? why ???);
  2. 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.
  1. 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

image

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:

  1. on type-entities level (??? why ???);
  2. 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.
  1. 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

image

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:

  1. on type-entities level (??? why ???);
  2. 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.
  1. 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

image

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:

  1. on type-entities level (??? why ???);
  2. 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.

1 Like