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

Nope didn’t work.

I put it in a custom:mod-card

  - type: custom:mod-card
      card:
        type: horizontal-stack
        cards:
          - type: "custom:button-card" #navigatie terug naar hoofdscherm
            template: chip_navigate
            variables:
              ulm_chip_navigate_path: home
              ulm_chip_navigate_icon: mdi:home-outline
            card_mod:
              style: |
                ha-card {
                  width: fit-content;
                  padding: 0px !important;
                  margin-left: auto;
                  transition: all 0s;
                }        
          - type: custom:button-card
            template: chip_navigate
            variables:
              ulm_chip_navigate_path: grafiekenslaapkamermattheo
              ulm_chip_navigate_icon: mdi:chart-bar
              ulm_chip_navigate_icon_color: rgb(241, 136, 5)
      card_mod:
        style: |
          :host {
            bottom: 10;
          }
          ha-card {
            display: flex;
            background: none;
            --ha-card-border-width: 0px;
            --ha-card-box-shadow: none;
            justify-content: center;
          }

I want it on a fixed position (bottom:10) but that does not work. the justify center does

None of this works, I’m just tryna center the controls on this card nothing else.

Did you put them in a mod card ?

Ok that kind of worked thanks, not entirely centered but still progress.

type: custom:mod-card
card_mod:
  style: |
    :host {
      display: flex;
      justify-content: center;
    }                  
card:
  type: custom:climate-mode-entity-row
  entity: climate.3family_room
  name: ' '
  icon: none
  secondary_info: none
  modes:
    - hvac_mode: heat
    - hvac_mode: cool
    - hvac_mode: heat_cool
    - hvac_mode: 'off'

I dont know but maybe it is the space reserved for the icon making it is not centered ?

I think its cuz thats where the name would go normally when on.

This whole time I could’ve just used mushroom climate card wow nevermind, thanks for helping though.

Errr… Forget it.
Lack of ’ ’ before and after sensor.

Mea maxima culpa:flushed:

I don’t find a way to apply any css mod on the ha-quick-bar (the pop-up menu that comes out when you click on search icon).

I tried to use:

  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog .mdc-dialog__content {
        display: none !IMPORTANT;
      }

but it seem to apply only to “ha-more-info-dialog” and not to “ha-quick-bar”.

Is there any solution or card-mod is not capable to modify the css in the “ha-quick-bar” at the moment? Thank for the help

- type: "custom:button-card"
    template: card_cover
    entity: cover.raamrechts
    variables:
      ulm_card_cover_name: Raam rechts
      ulm_card_cover_enable_slider: true
      ulm_card_cover_enable_horizontal: true

How can I prevent opening the cover for 100% ? It may open max for 78% otherwise my fly screen will get broken.

is it possible to Set the end value of the cover to 78 ? So 100% is in real time 78 ?

tabbed-card: adding images instead of icons

image

code
type: custom:mod-card
card_mod:
  style:
    tabbed-card:
      $:
        mwc-tab:nth-child(1) ha-icon $: |
          ha-svg-icon {
            background-image: url("/local/images/devices/iphone_5s.png") !important;
          }
        mwc-tab:nth-child(2) ha-icon $: |
          ha-svg-icon {
            background-image: url("/local/images/devices/iphone_6.png") !important;
          }
        mwc-tab:nth-child(3) ha-icon $: |
          ha-svg-icon {
            background-image: url("/local/images/devices/iphone_12.png") !important;
          }
        mwc-tab:
          ha-icon $: |
            ha-svg-icon {
              background-size: 100% 100% !important;
              display: block;
            }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:blank
  tabs:
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        label: tab 1
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        label: tab 2
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        label: tab 3
3 Likes

I need some help changing the font size in a Horizontal stack card. Here is what I have

type: horizontal-stack
cards:
  - type: entity
    entity: sensor.openweathermap_condition
    name: Conditions
  - type: entity
    entity: sensor.openweathermap_forecast_wind_speed
    name: Wind Speed

Any help very much appreciated

Do it in the entity-cards in your stack and not in the stack (as it is not possible without extra mod_cad). See first post. Link at the bottom from Ildar. Entity card.

Dear all,
I managed to get this result:
image

with this code (it is only the first card for brevity, all the others in the grid are the same with different entities):

square: false
type: grid
cards:
  - type: custom:stack-in-card
    mode: vertical
    cards:
      - type: grid
        columns: 1
        square: false
        cards:
          - type: custom:mod-card
            card_mod:
              style:
                hui-grid-card$: |
                  div#root {
                    grid-template-columns: 78% 20%;
                  }
            card:
              square: false
              columns: 2
              type: grid
              cards:
                - type: custom:mushroom-template-card
                  primary: Soggiorno
                  secondary: >-
                    {{ states('sensor.soggiorno_temperature')
                    }}°C                 {{ states('sensor.soggiorno_humidity')
                    }}%
                  icon: mdi:silverware-variant
                  tap_action: null
                  icon_color: blue
                  multiline_secondary: true
                - type: custom:mushroom-chips-card
                  chips:
                    - type: entity
                      entity: binary_sensor.finestra_soggiorno_contact
                      icon_color: blue
                      content_info: none
                    - type: entity
                      entity: binary_sensor.porta_soggiorno_contact
                      icon_color: red
                      content_info: none
      - type: custom:mushroom-chips-card
        alignment: center
        chips:
          - type: entity
            entity: switch.presa_ikea_salotto
            content_info: none
            icon_color: blue
            tap_action:
              action: toggle
            double_tap_action:
              action: none
            hold_action:
              action: none
          - type: entity
            entity: input_boolean.posta
            content_info: none
            icon_color: purple
            tap_action:
              action: none
            double_tap_action:
              action: none
            hold_action:
              action: toggle

Can anyone tell me if it is possible to reduce the distance between the two chip cards that are on the right side of the room card?
image
Ideally, I would like the red space to go away so that the two chips are adjacent but still in the center compared to the card on the left.

Any suggestions or help is appreciated, I tried some styles in other posts but with no luch. Thank you in advance!

I don’t know if bottom: will work. Or it might need to be 10px. I have a card pinned to the top and the z-index ensures it shows on top of everything else. I would suggest setting a distance from the top and see if that does what you want.

    type: markdown
    content: '{{ now().strftime("%m/%d/%Y, %H:%M") }}'
    card_mod:
      style: |
        ha-card {
          background: transparent;
        }
        :host {
          position: fixed;
          top: 0px;
          left: 75%;
          z-index: 99;
        }
1 Like

While card-mod can be installed as a lovelace resource, some functionality will benefit greatly from it being installed as a frontend module instead.

To do that, add the following to your configuration.yaml file and restart Home Assistant:

Since this seems to be outdated information (or different configuration?) am I right in adding the full path like how I have it here?

Does anyone use node_anchors in their card_mod code?

I just discovered this feature this morning, but I can’t replace if/else entities with an anchor.

As an example:

    card_mod:
      style:
        mushroom-template-chip:nth-child(2)$: |
          ha-icon {
            {{ 'animation: open 6s ease-in-out infinite;' if is_state(*door_sensor, 'on') }}
            transform-origin: 30%;
          }
          @keyframes open {
            0%, 66% { transform: rotateY(0deg); }
            33% { transform: rotateY(-120deg); }
          }
          .shape {
            perspective: 45px;
          }

Any suggestions would be fab.

    - type: custom:mod-card
      card:
        type: horizontal-stack
        cards:
          - type: "custom:button-card" #navigatie terug naar hoofdscherm
            template: chip_navigate
            variables:
              ulm_chip_navigate_path: home
              ulm_chip_navigate_icon: mdi:home-outline
          - type: custom:button-card
            template: chip_navigate
            variables:
              ulm_chip_navigate_path: grafiekenslaapkamerminne
              ulm_chip_navigate_icon: mdi:chart-bar
              ulm_chip_navigate_icon_color: rgb(241, 136, 5)
        card_mod:
          style: |
            :host {
              top: 300;
              z-index: 99;
            }
            ha-card {
              display: flex;
              background: none;
              --ha-card-border-width: 0px;
              --ha-card-box-shadow: none;
              justify-content: center;
            } 

This doesn’t do a thing :frowning:

ofc. Because the indentation if wrong. The card_mod has to be on type level from mod-card. If this is your goal.