🔹 Card-mod - Super-charge your themes!

May I ask why did you create an issue for this in Github?
Already suggested to close.

Try

test:
  card-mod-theme: test
  card-mod-view-yaml: |
    .: |
      hui-masonry-view, hui-sidebar-view, hui-panel-view,
      masonry-layout, horizontal-layout, vertical-layout {
        background-image: url({{state_attr('person.xxxx','entity_picture')}});
      }

You may also use one non-repeated image with this:

background-size: 100% 100%;

I’m sorry. I didn’t know card mod had its own community forum.

1 Like

Surely it has))))
Almost each popular card/plugin has a dedicated thread.
And when posting an issue on Github you get a warning like “use Community”.

Can someone help me please? I’m trying to do something that should be simple.

Here is a Mushroom Entity Card displaying my temperature sensors. Looks nice, but I’d like to have the Name text on top, the Icon in the middle and the Temperature on the bottom.

Temp

The Glance Card is just what I want, but I can’t figure out how to make customize the text size like I can do on the Mushroom Entity Card. Here is the Glance Card. I have searched and searched and can’t figure it out.

Glance

I have inspected the dashboard html code to try and add the text-size option, but nothing I do seems to work. I really prefer the separated look of the Mushroom Entity Card, so I’d prefer to fix that one if it’s possible.

Thanks in advance! It’s probably something simple.

Wrong thread, this one for themes. Go to the main card-mod thread. Check a link at the end of 1st post.

Given the following:

type: custom:auto-entities
card:
  type: entities
  title: Docker
filter:
  template: >-
    {%- for item in states.sensor |
    selectattr('entity_id','in',integration_entities('portainer')) -%}
      {%- if "portainer_server" in item.entity_id -%}
          {{
            {
              'type': 'custom:template-entity-row',
              'entity': item.entity_id,
              'name': state_attr(item.entity_id,'friendly_name'),
              'state': item.state,
              'icon': 'mdi:docker'
            }
          }},
      {%- endif -%}
    {%- endfor -%}
sort:
  method: friendly_name

I would like the state color to be green if running and red if not running. I’ve had a bit of a challenge trying to find a way to turn the actual item state a color in template entity row. And then what’s the correct syntax to implement that card mod in this auto entities template?

  1. This thread is for themes. You should have asked in the main card-mod thread.
  2. Examples for using card-mod for auto-entities are provided here: main card-mod thread → 1st post → link at the bottom titled “fantastic” → auto-entities.
  3. Particularly for template-entity-row: you may use a native “color” option which supports jinja. Using card-mod not required (unless you need smth specific like mediaquery etc). There is a dedicated thread for template-entity-row.

Scrollable badges:

  card-mod-view-yaml: |
    :first-child $:
      hui-view-badges $: |
        .badges {
          overflow-x: auto;
          flex-wrap: unset !important;
          justify-content: unset !important;
        }
        .badges > * {
          min-width: fit-content;
        }
4 Likes

I’ve put this in my theme yaml, reloaded themes, cleared cache, and refreshed, but I still have no effect. Is there something simple I could be missing?

Check if you added card-mod-theme code properly into you theme file.
Could be useful: card-mod thread → 1st post → link at the bottom → themes → one of 1st links

Perfect, thank you. I realized I didn’t have “card-mod-theme” defined. Appreciate the help!

1 Like

Oh goody! I was just thinking about this earlier and thought I’d play with this tonight, but I ran out of time. Definitely going to try this.

(post deleted by author)

@Ildar_Gabdullin

At the moment, all I want to do is to have a transparent or semi-transparent background on every card. It seems on your example that you have put a image as background on every cards (so it is similar to what I want), however - if I try your code it puts the image as background behind all the cards, not on the cards themselves.

Not sure why we get different results. I have also tried this, but it didn’t do anything at all even though I can see in the generated html that the elements are called ha-card:

bg-theme:
  card-mod-theme: bg-theme
  card-mod-card-yaml: |
    ha-card {
      background: none !important;
    }