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

Hi Dimitri,

Thank you so much for helping me out.
I saw the code in on this website:
https://mysmarthome.blog/blog/sticky-navigation-bar.html

So i was thinking that is correct and off course card_mod instead of card-mod (my mistake) :face_with_raised_eyebrow:

Hello. I’m struggling with adding css to one particular card on my dashboard, and wondered if anyone could help guide me in the right direction, with what I thought would be a fairly simple bit of styling.

The top 2 cards on the sidebar area of my dash are custom button cards, within a vertical stack - the first one for displaying the time, and the second one for displaying the date. Both cards display correctly when viewed on a tablet, however when viewed on mobile, I want them to act differently. The ‘Time’ button card I am successfully hiding on mobile view, with the following code:

- type: grid
        view_layout:
          grid-area: sidebar
        columns: 1
        cards:
          - type: vertical-stack
            cards:
              - type: custom:button-card
                entity: sensor.time
                show_name: false
                show_icon: false
                show_state: true
                tap_action:
                  action: none
                styles:
                  card:
                    - padding-top: 20px
                    - text-align: center
                    - border-width: 0
                    - font-family: SF Pro Display, Roboto, system-ui
                  state:
                    - font-size: var(--sidebar-time-font-size)
                    - font-weight: 300
                    - line-height: var(--sidebar-time-line-height)
                    - letter-spacing: 0.11vw
                    - color: rgba(255, 255, 255, 0.8)
                card_mod:
                  style: |
                    /* phone */
                    @media screen and (max-width: 800px) {
                      ha-card {
                        display: none !important;
                      }
                    }

I am hoping to change the font-size of the Date (second button card in my vertical stack) when viewed on mobile, however my media query isn’t making any difference to the font-size on mobile, so I think I may not be addressing the element/using the correct selector. This is the code for my Date button card:

- type: custom:button-card
entity: sensor.date_formatted
show_name: false
show_icon: false
show_state: true
tap_action:
  action: none
styles:
  card:
    - padding-top: 10px
    - text-align: center
    - border-width: 0
    - font-family: SF Pro Display, Roboto, system-ui
  state:
    - font-size: var(--sidebar-date-font-size)
    - font-weight: 300
    - line-height: var(--sidebar-time-line-height)
    - color: rgba(255, 255, 255, 0.8)
card_mod:
  style: |
    /* phone */
    @media screen and (max-width: 800px) {
      ha-card .state.ellipsis {
        font-size: calc(var(--sidebar-date-font-size) * 1.2)
      }
    }

Using Developer tools in my browser, and on mobile view (less than 800px wide) I can see that the state is just picking up the regular font-size from my theme, which is set under the styles>state options of the card in the code above it

<div id="state" class="ellipsis" style="font-size:var(--sidebar-date-font-size);font-weight:300;line-height:var(--sidebar-time-line-height);color:rgba(255, 255, 255, 0.8);">

  <!--?lit$560216021$-->Tuesday October 10

</div>

Can anyone help with where I am going wrong please? Still very new to css and only just started working with my new dashboard in yaml mode.

Why dont you just set the size of the variable directly like this:

card_mod:
  style: |
    @media screen and (max-width: 800px) {
      ha-card {
        --sidebar-date-font-size: 40px !important;
      }
    }

can also just set the card font size globally like this:

card_mod:
  style: |
    @media screen and (max-width: 800px) {
      ha-card {
        font-size: 40px !important;
      }
    }
1 Like

Thank you - it’s so obvious now, and yes that works perfectly. I was staring at it for far too long, and ended up overcomplicating it!

mostly got the HA light card working but sized to fit my grid style display using card-mod. i am kind of familiar with CSS but as good as the rest of you on the trial and error method. that is to say don’t ask me to explain any of this but it works :slight_smile:

the code and displayed card is below, but the request. Please help reuse the name area on the card as the more-info click area and completely disable the current more-info icon display/area.

thank you.

        - type: markdown
          content: to be able to see any overflow
        
        - square: false
          type: grid
          columns: 5
          cards:
    
      {% for i in range(5) %}
            - type: light
              entity: {{ thisRoomLights[0] }}
              name: {{ allRoomLightNames[room][0] }}
              color: auto
              show_name: true
              show_icon: true
              show_state: false
              styles:
                card:
                  - background-color: transparent
                icon:
                  - color: >
                      [[[
                          return (entity.state === 'on') ? variables.iconColorActive : variables.iconColorInactive;
                      ]]]
              card_mod:
                style: >
                  ha-card {
                    height: 100px !important;
                    width: auto !important;
                    overflow: visible !important;
                  }
                  ha-card > div {           ## if you change to lower percent the slider will overflow
                    height: 100% !important; 
                    width: 100% !important;
                  }
                  ha-card > ha-icon-button {
                    height: 20% !important;
                    width: 20% !important;
                    padding: none !important;
                  }
                  #slider > ha-icon-button {                ## sets the icon size
                    --mdc-icon-button-size: 80% !important;
                    --mdc-icon-size: 80% !important;
                    padding: none !important;
                  }
                  :host #slider > round-slider  {       ## without this the slider and text will overflow
                    height: 90% !important;
                    width: 90% !important;
                    padding-bottom: 0px !important;
                  }
                  :host #slider > ha-icon-button > ha-state-icon {          ## without this the icon will be off center
                    width: 100% !important;
                    justify-content: center !important;
                    justify-self: center !important;
                  }
                  #slider > ha-icon-button > ha-state-icon  {              ## without this the icon will be off center
                    width: 100% !important;
                    justify-content: center !important;
                    justify-self: center !important;
                  }
              {% endfor %}

Trying (unsuccessfully so far), to change the navigation buttons within a swiper container. Can anyone possibly point me in the right direction?


Any pointers would be greatly appreciated :+1:t2:
EDIT: I wrapped the whole swiper-container in a card_mod, does this put it closer to a ‘doable’ feat? Thanks again!

I don’t use the card but your screenshot shows, that this card /there is no ha-card element. Without that cad-mod will not be able to ingest the code (same as for the core stack cards, …). So a mod-card around your card might be needed.

1 Like

figured out how to hide the more-info buttons by adding this to the existing:

ha-icon-button.more-info {
        display: none;
}

only remaining now is how to add a second tap action to the name area without breaking the first tap action on the icon.

thanks.

Tried again :thinking: 🔹 Card-mod - Add css styles to any lovelace card - #5206 by Dino-Tech

But what is your card-mod code you have tried and which is not working?

Thank you.

I made the lamp orbiting a black hole:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_boolean.test_boolean
  - type: entities
    entities:
      - sun.sun
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        row:
          entity: sun.sun
          icon: mdi:desk-lamp
          name: Nählicht Lampe
        style:
          hui-simple-entity-row$: 
            hui-generic-entity-row $: |
              state-badge {
                {% if is_state('input_boolean.test_boolean', 'on') %}
                  text-indent: 45px;
                  color: red;
                  animation: rotation 4s linear infinite;
                {% endif %}
              }
              @keyframes rotation { 0% { transform: rotate(0deg); }
                                  100% { transform: rotate(359deg); } }
      - entity: sun.sun

image

(It’s spinning normally without the indentation.)

:warning: If the row contains a timer it has to be:

        style:
          hui-timer-entity-row$: 
            hui-generic-entity-row $: |

Nicely done! A light cannot leave a dark domain )

Styling bar-card: replacing a value:
here
изображение

1 Like

Hello!

I have just updated to the latest home assistant version. But now my navigation bar is up top instead of at the bottom. Can someone help me with what I should write in the theme file to move it back down?

dont cross post please. i already answered your question on the mushroom thread.

1 Like

Hi everyone, can anyone please help me to solve my problem? I would like to eliminate the 8px margin of each state-badge element of the card but I can’t figure how. Thanks in advance!

There is already posted style for Glance with changed margin.
1st post → link at the bottom
If you have some “entity-filter” inside - just try to adapt it, and post what you tried and where you failed, it will be a good start.

Hi, is there a way to remove or make transparent these input_datetime lines in entities card? Thanks

Hi, this should work. its pretty easy to figure out if you look through ildar’s posts.

type: entities
entities:
  - entity: input_datetime.test
    card_mod:
      style:
        ha-time-input $ ha-base-time-input $:
          ha-textfield:
            $: |
              .mdc-line-ripple::before {
                border-bottom-width: 0px !important;
              }
        ha-date-input $:
          ha-textfield:
            $: |
              .mdc-line-ripple::before {
                border-bottom-width: 0px !important;
              }
1 Like

1st post → link at the bottom → input_datetime

1 Like