šŸ”¹ Card-mod - Add css styles to any lovelace card

Status is located below the icon by default. If not - probably you played with styles.

No easy solution found.
Try to set the "line-height" property = height of the "box":

type: picture-glance
title: title
image: /local/images/blue_low.jpg
entities:
  - entity: sun.sun
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
style: |
  .box .title {
    line-height: 52px;
  }

image

Nobody is after birth, people have to study it - even if it is required for HA onlyā€¦

P.S. I am not a ā€œCSS expertā€. I think that our possibilities to customize elements on cards are limited - not only by our skills, by internal structure also.

Re the status (i.e. item 2 in my last post) the issue seems to be that the icons and the state (e.g. temp icon and state at 17.2) donā€™t seem to be connected. Increasing the size of the icon doesnā€™t move the state downwards but instead it starts to overlap the state. So Iā€™m restricted in the size of the icon and size of text.

Anyway thanks for the input, @Ildar_Gabdullin. Was able to get it closer to what I wanted

Hello together,
after my problem with the Entities Card i tried different changes with Card-mod.

But all of them have the problem, that for a few moment (1-2 sec) we see the design without the card-mod change and then it applies.

I tried it with Firefox, Opera, Edge all 3 Browsers have the same problem.
Is there a solution, to get the change instantly?

Kind of this:

type: picture-glance
title: title
image: /local/images/blue.jpg
entities:
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
    show_state: true
  - entity: sun.sun
style: |
  ha-card .box .row .wrapper ha-icon-button {
    --mdc-icon-button-size: 80px !important;
  }
  ha-card {
    --mdc-icon-size: 80px;
  }
  ha-card .box {
    height: 100px;
  }
  ha-card .box .title {
    line-height: 100px;
  }
  ha-card .box .row .wrapper {
    align-items: center !important;
  }
  ha-card .box .row div {
    width: 100px !important;
  }

P.S. Updated this post with new cases:

  • title - vertically aligned;
  • states for resized icons.

Ok so I added a conditional card yesterday but when it draws it it has padding and also a different background like here:
image

here is my code:

          - type: entities
            title: BOM Forecast
            show_header_toggle: false
            entities:
              - sensor.bom_forecast_0
              - sensor.bom_forecast_1
              - sensor.bom_forecast_2
              - sensor.bom_forecast_3
              - sensor.bom_forecast_4
              - sensor.bom_forecast_5
              - type: 'custom:hui-element'
                card_type: conditional
                conditions:
                  - entity: sensor.bom_forecast_6
                    state_not: "unknownĀ°/unknownĀ°/unknown%"
                card:
                  type: entities
                  entities:
                  - entity: sensor.bom_forecast_6
                    card_mod:
                      style: |
                        :host {
                        padding: 0;
                        background: none;
                        }

How to fix?

What theme are you using? Have you tested in the browser developer tools whether the styling is there at all?

The Google dark one from HACS. The element doesnā€™t have any styling show in chrome dev-tools.
This seems to work:

              - type: 'custom:hui-element'
                card_type: conditional
                conditions:
                  - entity: sensor.bom_forecast_6
                    state_not: "unknownĀ°/unknownĀ°/unknown%"
                card:
                  type: entities
                  card_mod:
                    style: |
                      ha-card {
                        box-shadow: none;
                        --ha-card-background: rgba(0, 0, 0, 0);
                        margin: -16px -16px -16px -16px;
                      }
                  entities:
                  - entity: sensor.bom_forecast_6

So do you no longer need an answer?

No I think Iā€™m good unless there is an issue with the marginsā€¦ I see some people post code with some of those as 0 and some -16 but it seems to look ok nowā€¦

image

Thanks for your ongoing support here. Iā€™m done with the exception of coloring the buttons on the right based on state but I have seen some examples from you on this and Iā€™m sure I can get that going :slight_smile:

Looks awesome!

1 Like

Hi Thomas, or anyone else able to help. Thanks for the great mod. Howeverm, pulling my hair out here hehe. All cards on the table, still a noob :wink: Iā€™m trying to style the markdown card itself and trying to style the elements in the card. Canā€™t seem to get this working. Any tips on what Iā€™m doing wrong?

      - type: markdown
        content: >
          <table width="100%">
            <tbody>
              <tr>
              <td>  <img src="/local/header.jpg"></td>
              </tr>
              <tr>
                <td>
                  <table width="100%">
                    <tr>
                      <td width="40%">
                      <h2>Huize Beeld</h2>
                      <hr>
                      {{states('sensor.dashboard_greeting') }}, {{ user }}</br>
                      {{states('sensor.dashboard_weervoorspelling') }}</br>
                      Het is buiten op dit moment {{ state_attr('weather.beeldhouwersdijkje', 'temperature') }}Ā°C <br></td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td><h3>Wie is thuis?</h3></td>
              </tr>
              <tr>
                <td align="center">
                <img src="{{states('sensor.dashboard_occupancy')}}" width="280px">
                </td>
              </tr>
            </tbody>
          </table>
        style:
          .: |
            ha-card {
              color: black;
              background-color: white;
            }
            ha-markdown:
              $: |
                h1 {
                  text-align: center;
                  font-size: 6em;
                  margin-bottom:12px;
                  margin-top: 12px;
                }
                hr {
                  border: 10px solid red;
                }

Try this:

  ha-markdown:
    $: |
      h1 {
        text-align: center;
        font-size: 6em;
        margin-bottom:12px;
        margin-top: 12px;
      }
      hr {
        border: 10px solid red;
      }
  .: |
    ha-card {
      color: black;
      background-color: white;
    }

Yes! That works. Thank you very much!

Hi,

Is there a way to apply styles on a input select? For now it isnā€™t working, here my code:

cards:
  - entity: media_player.spotify_phil_ou
    type: media-control
    card_mod:
      style: |
        ha-card {
          color: white;
          font-family: "Comfortaa";
        }
  - type: entities
    entities:
      - entity: input_select.chromecast_audio
      - entity: script.spotify_start
    card_mod:
      style: |
        :host {
          color: white;
          font-family: "Comfortaa";
        }
show_header_toggle: false
type: vertical-stack

And the current result:
image

All comes with the right font but not for the input select, any help please?

There is a special post here dedicated to input_select, try to find it.
If something is missing in this post, let me know.

Hello everyone,

Iā€™m trying to figure it out why my code doesnā€™t work. I just want to change the Title size

type: horizontal-stack
title: Motion sensor Occupancy
card_mod:
  style: |
    ha-card .card-header {
      font-size: 35px;
      color: red;
    }
cards:
  - type: entity
    entity: binary_sensor.motion_sensor_outside_ias_zone
    name: Outside
  - type: entity
    entity: binary_sensor.motion_sensor_kitchen_occupancy
    icon: 'hass:walk'
    name: Kitchen
  - type: entity
    entity: binary_sensor.motion_sensor_stairs_ias_zone
    name: Stairs
  - type: entity
    entity: binary_sensor.motion_sensor_office_ias_zone
    name: Office
  - type: entity
    entity: binary_sensor.motion_sensor_bedroom_occupancy
    icon: 'hass:walk'
    name: Bedroom
  - type: entity
    entity: binary_sensor.door_sensor_corridor_on_off
    icon: 'mdi:door'
    name: Corridor

Try using search in the topic.

You should set up a wiki page on the GitHub, a dedicated page with headers and a table of contents is better than a giant list of random text.

There is a link to the structured list of tutorials on the 1st post.
Some people do not look at the 1st post, some do not read docs on the Github, some do not use search - and probably some will not use Wiki.

Thank you very much for all your examples, for me they are very valuable
Could you add an example of an icon effect inside a picture-element card?
it would be very helpful and grateful