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

Untested:

            tabbed-card $: |
              mwc-tab:
                $:
                  mwc-tab-indicator $: |
                    .mdc-tab-indicator__content--underline {
                       …
                    }
                .: l
                  mwc-tab-bar {
                    …
                  }         
            .: |
              tabbed-card {
                …
              }

With that code only this part works:

            .: |
              tabbed-card {
                display: flex;
                flex-direction: column-reverse;
              }

I changed the code to this, which makes it sticky again (and at bottom):

            tabbed-card $: |
              mwc-tab:
                $:
                  mwc-tab-indicator $: |
                    .mdc-tab-indicator__content--underline {
                       align-self: flex-start !important;
                    }

                  mwc-tab-bar {
                    position: sticky;
                    position: -webkit-sticky;
                    top: var(--header-height); 
                    display: block;
                    z-index: 999;
                    bottom: 0;
                    background: var(--primary-color);
                  }         
            .: |
              tabbed-card {
                display: flex;
                flex-direction: column-reverse;
              }

However I’m now right back where I started: I still don’t know where to insert this part:

        $: |
          .mdc-tab {
            min-width: var(--mdc-icon-size) !important;
          }

I tried this:

            tabbed-card $: |
              mwc-tab:
                $:
                  mwc-tab-indicator $: |
                    .mdc-tab-indicator__content--underline {
                       align-self: flex-start !important;
                    }
                  .mdc-tab {
                    min-width: var(--mdc-icon-size) !important;
                  }
                  mwc-tab-bar {
                    position: sticky;
                    position: -webkit-sticky;
                    top: var(--header-height); 
                    display: block;
                    z-index: 999;
                    bottom: 0;
                    background: var(--primary-color);
                  }         
            .: |
              tabbed-card {
                display: flex;
                flex-direction: column-reverse;
                --mdc-tab-horizontal-padding: 0px;
              }

Unfortunately, still the part of min-width doesn’t work. Any suggestions?

Dear all,

I wanted to modify this test card in that way, that I can use it as an input interface for my timer.
In the end of the day, it should look like this, only with:
smaller digits for direct input (as in the testcard below) and with the word “Uhr” as unitt behind the time. The switch on the left, will activate the automation.

image

The test card works, fine and I can adapt the solution into my cards, but how can I add the unit behind the times? I did not find any solution for this. Can someone please help?

If there is a much better solution, how I can realize a input interfce for my timers, please let me know! I am a littel bit lost

image

Thanks for support!
Spartacus

seems that would be a very valid FR to the card itself. Why not ask the developer? He’s very responsive.

trying to card_mod my way out of this…

challenge: have a mini-graph card use the full width if an entities card it is used in, just like we can do when adding the exact same mini-graph to the footer of the entities card. No matter what we do, set margin or padding, the mini-graph card wont go beyond the card content section if the entities card.

ive checked the resource on the footer, and all that does is this:

      .footer {
        border-bottom-left-radius: var(--ha-card-border-radius, 12px);
        border-bottom-right-radius: var(--ha-card-border-radius, 12px);
        margin-top: -16px;
        overflow: hidden;
      }

which does not help t all when adding that to the card mod… you can see the card_mod push the margins out, but the contents get clipped, and even when setting overflow: visible, CSS Overflow, that makes no difference.

please have a look? thanks!

I was able to hack myself into a vertical-stack:

type: custom:mod-card
card_mod:
  style: |
    :host {
      --stack-card-margin: 0px;
    }
card:
  type: vertical-stack
  card_mod:
    class: class-header-margin

  cards:
    - type: custom:button-card
      name: Uv Index
      template: button_default_title

    - type: custom:mini-graph-card
      entities:
        - entity: sensor.openweathermap_uv_index
          state_adaptive_color: true
        - entity: sensor.current_uv_index
          state_adaptive_color: true
      height: 100
      line_width: 3
      font_size: 75
      show:
        fill: fade
        legend: true
        extrema: true
        icon: false
        name: false

    - type: entities
      entities:
        - entity: sensor.openweathermap_uv_index
          options:
            secondary_info: last-updated

etcetc

to have it like:

Can someone help me remove the background please

                                type: custom:clock-weather-card
                                entity: weather.forecast_home
                                title: null
                                sun_entity: sun.sun
                                weather_icon_type: line
                                animated_icon: true
                                forecast_days: 5
                                locale: en-GB
                                time_format: 24
                                date_pattern: P
                                hide_today_section: true
                                hide_forecast_section: false
                                hide_clock: false
                                hide_date: false
                                card_mod:
                                  style: |
                                    ha-card {
                                      --ha-card-background: transparent !important;
                                      border: none; 
                                      }

                                    forecast-temperature-bar:
                                      $: |
                                        forecast-temperature-bar-background {
                                          background: transparent !important;
                                      }

There are various FR’s pending, including these. I appreciate the developer of this card, but I also know he is very limited in his time. Also to me it makes no sense to wait till the developer has the time, when we can achieve it with a few lines of code with card_mod. Ildar has been of fantastic help with the codes and I now just want to mix the codes properly.

1 Like

card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
            .mdc-tab-indicator__content--underline {
               align-self: flex-start !important;
             }
          .: |
            .mdc-tab {
              min-width: var(--mdc-icon-size) !important;
            }             
        .: |
          mwc-tab-bar {
            position: sticky;
            position: -webkit-sticky;
            bottom: 4px;
            display: block;
            z-index: 999;
          }
          mwc-tab {
            background: var(--ha-card-background, var(--card-background-color, white) );
            border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
            border-width: 1px;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            border-style: solid;
            overflow: hidden;
          }
          section article > * {
            --ha-card-border-radius: 12px 12px 0px 0px;
          }          
    .: |
      tabbed-card {
        display: flex;
        flex-direction: column-reverse;
        --mdc-tab-horizontal-padding: 0px;
      }
2 Likes

Fantastic!! Thanks a lot for all your time and work, I really appreciate this!

1 Like

Hey,

I don’t know if anyone can help me. I’m want the mdi:icon to rotate when it’s ‘on’ on a tile card but i cant seem to find the right class

type: custom:mod-card
card:
  type: tile
  entity: switch.aquecedor_wcsuite
  icon: mdi:fan
  name: Aquecedor WCs
card-mod:
  style: |
    @keyframes rotation { 0% { transform: rotate(0deg); }
                      100% { transform: rotate(359deg); } }
                      
    ha-tile-icon {
      {% if is_state('switch.aquecedor_wcsuite','on') %}
      animation: rotation 1.5s linear infinite; 
      {% endif %}
    }

sure, appreciate all of these efforts.
but, trying to keep things as short and simple as possible always seems best. not only for the browser and memory usage, but also in keeping up with resource changes.

If the author would implement a simple option for tabs at the button, it would certainly simplify all, including the rest of the card_mods.
until then, we need that monstrosity of a mod like Ildar has made possible. Hope it will keep for some while indeed.
until the next card update breaks it I am afraid.

Most people are rather satisfied with a default implementation.
For others - a customization is available.
Surely you may try convincing the card’s developer to implement your wishes.
Same is for most cards, conditional & custom.

1 Like

having started playing with

          - entity: sun.sun

            card_mod:
              style: |
                state-badge {
                  display: none;
                }
                .name {
                  display: none;
                }
                :host div:not(.name) {
                  display: none;
                }

to create a complete and non-functional gap in a glance card, I was also looking for a way to have an empty slot in an entities card. Ofc, this does not work (although, it would have been nice…) and I have come as far as:

    entities:
      - entity: sun.sun
        name: ' '
        icon: ' '
        show_state: false
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none

this however still leaves the state to be displayed, so need some extra modding.

Why / for what. If you want have space, why not setting padding or margin to the one before or after? Or use type divider and hide the line of it.

1 Like

I have a similar “blank” row too. May be used as a ready decluttering-template.
Could be more flexible than “setting padding or margin to the one before or after”.

1 Like

Because I did not think of that :wink:

Also, it’s even more of a hack…

never knew about the mdi:blank ! cool. Is that card_mod? couldn’t find that at material design

btw, this works too:

      - entity: sun.sun
        card_mod:
          style:
            hui-generic-entity-row $: |
              .state {
                display: none;
              }
        name: ' '
        icon: mdi:blank #' '
        tap_action:
          action: none
        hold_action:
          action: none
        double_tap_action:
          action: none

and seems even more concise. (we need the action settings, to not have a mouse pointer happen)

just found this little gem:

      - type: custom:template-entity-row
        state: ''
        name: ''

a row without a state and name. perfect!
haha, thats as short as it gets I think :wink:

or… no it still shows the handle on the icon field

        card_mod:
          style: |
            :host {
              pointer-events: none;
            }

helps

so summarizing:

      - type: custom:template-entity-row
        state: ''
        name: ''
        card_mod:
          style: |
            :host {
              pointer-events: none;
            }

      - entity: sun.sun
        card_mod:
          style:
            hui-generic-entity-row $: |
              .state {
                display: none;
              }
            .: |
              :host {
                pointer-events: none;
              }

        name: ' '
        icon: mdi:blank #' '
#         tap_action:
#           action: none
#         hold_action:
#           action: none
#         double_tap_action:
#           action: none

It was there some time ago, present as an icon - but recently I realized that it’s gone.
The code still works.

Could be a bad solution since sometimes a state occupies 2 lines… So hiding it causes a 1px difference. No, it’s a rare case. So, your variant good.