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

[mkanet]

I’m trying to add simple drop-shadow effect globally to all my Home Assistant cards via my custom theme file. For some reason, when I append ha-card { box-shadow: 0px 5px 15px rgba(255,255,255,0.3) !important; } to my card-mode code below, it has no visible effect. However, the other card-mod modifications work just fine.

  card-mod-root: |
    .edit-mode, app-header, app-toolbar {
      background: var(--app-header-background-color) !important;
      color: var(--primary-text-color) !important;
    }
    ha-tabs {
      --paper-tabs-selection-bar-color: var(--primary-color) !important;
    }
    paper-tab[aria-selected=true] {
      color: var(--primary-color) !important;
    }
    ha-card {
      box-shadow: 0px 5px 15px rgba(255,255,255,0.3) !important;
    }

[arganto]

Without testing: This element is not in a shadow root inside ha-card of your card. So you should directly use:

card_mod:
  style: |
    clock-weather-card-today-right-wrap-top {
      display: none !important;
    }

[arganto]

@mkanet

custom theme file

You should address it in the theme-thread.

[alto]

You’re right, your example worked. But how is it that you can ignore the shadow root that’s under the clock-weather-card element? I’m new to using the card mod and this part is rather confusing.

[LiQuid_cOOled]

@arganto

This element is not in a shadow root inside ha-card of your card

He answered that question…

[mkanet]

Is the below link the theme-thread you suggested? I’m not sure. If not, could you please point me to the right thread? Thanks.

Share your Themes

We’re currently working on a number of pull request changes to add more flexibility with colours for theming. Please see here: https://github.com/home-assistant/home-assistant-polymer/pull/361 Here’s two screenshots of where we currently stand – night and day themes: [image] [image]

[arganto]

Card-mod - Super-charge your themes!

A while ago, I created card-mod, a custom card* that lets you change various css options for other lovelace cards. Much more skilled people than I have used that to create beautiful and awesome things. Today, I’ve added theme support to card-mod. Your ordinary theme file can now be used to Give cards a flashing border Make that border only flash when a certain entity is in a certain state Make fan icons spin when they are on Change the border color of the badges at the top of the screen dep…

[alto]

I have a grid card that contains two bus time table entities cards, which are misbehaving a bit.
I’m trying to set the entities cards to a fixed height so that they don’t dynamically change height based on the number of times shown. Essentially I want the card to stay the same size, but the times should wrap onto a second column if they overflow. How can I achieve this?

Currently it looks like this if there are only a few times available. Note that the grid card is only holding the bus times, the temperature card is only shown for context.

Below is the css that targets the card. The height doesn’t fix the height of the card properly, how can I do that?

div#states.card-content {
  width: 85%;
  height: 185px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

[LiQuid_cOOled]

@alto It’s not clear what you are trying to achieve as the final styling, but this is how you can target the area you just posted.

    .card-content {
      width: 85%;
      height: 185px;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      padding-bottom: 0px;
      margin-bottom: -30px;
         }

[arganto]

Can you double-check your quotings? Either have no quoting or the quote you are referring to. I doubt that your answer was for me and the text you have quoted. Same in your answer/post before.

[LiQuid_cOOled]

It shows it was a reply to @alto

[arganto]

But you quoted me instead of

@alto

The height doesn’t fix the height of the card properly, how can I do that?

to what was your answer.

[LiQuid_cOOled]

It auto populated and I didn’t realize it quoted you. It’s not that big of a deal, I’ll edit it.

[alto]

So what I’m trying to achieve is twofold:

• the bus timetable cards should always remain the same height as the weather card next to them
• if the number of departures increase beyond the height of the card they wrap into a second column inside the same card.

Right now the bus cards are dynamically resizing depending on the times shown, so they get both too small and too large, this is what it looks like right now with many time entries expanding the cards too much:

[LiQuid_cOOled]

I believe each section of the Weather Card will need to be altered if you are looking to shrink it’s real estate. You may be able to scroll the bus cards with overflow-y: scroll

Can you post the code for one of the Bus cards?

[dhruvb14 (Dhruv Bhavsar)]

With the latest Home Assistant update this no longer works. I wonder if the new drag and drop capabilities broke this.

[Mariusthvdb (Marius)]

this works just nicely:

  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.sticky_menu
        state: 'on'
    card:
      type: custom:mod-card
      card_mod:
        style: |
          ha-card {
            position: fixed;
            background: var(--primary-color);
            width: 494px;
            /*top: 68px;*/
            bottom: 10px;
            z-index: 1;
          }
      card: !include /config/dashboard/buttons/buttons_dashboards.yaml

  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.sticky_menu
        state_not: 'on'
    card: !include /config/dashboard/buttons/buttons_dashboards.yaml

on ha 2024.4.2
(too lazy to find another way for the boolean toggle to work using card_mod and core cards only, the double conditional works fine…)
do note that you might need to add some extra spacing in the view, to compensate for the menu (in this case) being sticky, and thus covering anything else you might have there

[alto]

Below is the code for one of the bus cards.
I think you might be misunderstanding a bit, I don’t want to do anything to the weather card at all.
For the bus cards I just want the cards to have a static size, and for the times to wrap into a second column if necessary. I don’t want scroll bars as this dashboard will be on an e-ink display.

          - type: grid
            square: false
            columns: 2
            cards:
              - type: custom:auto-entities
                show_empty: false
                unique: true
                card:
                  type: entities
                  title: line 2
                  icon: mdi:bus
                  card_mod:
                    style:
                      hui-grid-card:
                        $: |
                          #root {
                            height: 100px;
                          }
                      hui-sensor-entity-row:
                        $: |
                          .text-content {
                            width: 60px;
                          }
                        .: |
                          ha-icon.icon {
                            padding-right: 0px;
                          }
                          h1.card-header {
                            padding-bottom: 15px;
                          }
                          #states > * {
                            height: 20px;
                            width: 50px;
                          }
                          div#states.card-content {
                            width: 85%;
                            height: 185px;
                            display: flex;
                            flex-wrap: wrap;
                            flex-direction: column;
                            flex: 0 0 100%;
                          }
                          ha-card.type-entities div#states.card-content div {
                            margin: 3px 0px;
                          }
                filter:
                  include:
                    - entity_id: /^sensor.llt_line_2_.*$/
                      attributes:
                        time: /.*/
                      options:
                        card_mod:
                          style:
                            hui-generic-entity-row:
                              $: |
                                div.info.pointer.text-content {
                                  display: none !important;
                                }
                                state-badge {
                                  display: none !important;
                                }

[LiQuid_cOOled]

I direct messaged you for testing and a few questions.

[alto]

How do I target ha-card in the weather-forecast card?

I tried several things, including the below, but I’m not able to get at it.

  - type: weather-forecast
    show_current: false
    show_forecast: true
    entity: weather.forecast_home
    forecast_type: daily
    card_mod:
      style:
        hui-weather-forecast-card:
          $: |
            ha-card {
              padding-top: 0px;
              padding-bottom: 0px;
            }