🔹 Card-mod - Super-charge your themes!

Love the fan spinning CSS tweak, any way to make it so fan spinning depends on the actual speed of the fan? By looking here

 {% if config.entity == 'fan.kinderzimmer' and is_state(config.entity, 'on') %}
          animation: spin 4s infinite linear;
        {% endif %}

It looks like by just adding a few more if statements and lowering the spin 4s to lower they would spin faster but I am not sure how to target entities attribute.

this might be better suited in card-mod thread, but you could use it here too I guess :wink:

  - type: custom:multiple-entity-row
    entity: sensor.argon_one_addon_fan_speed
    name: Argon fan
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              {% set speed = states(config.entity)|int(default=0) %}
              {% set mapper = {0:'green',1:'darkgreen',3:'orange',33:'orangered',66:'maroon'} %}
              color: {{ mapper.get(speed),'red'}};
              animation:
              {% if speed != 0 -%}
              {% set mapper = {1:'4',3:'3',33:'2',66:'1'} %}
              {% set rotation = mapper.get(speed),'0.3' %}
              {{'rotation ' + rotation +'s linear infinite'}}
              {% else %} null
              {% endif %}
            }
            @keyframes rotation {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }

I apologize if it was asked/covered but a search did not locate anything…

Is it possible to change the color of the native thermostat card with card-mod? My thermostat is always in heat/cool which is green and I’d love to be able to make it blue to fit the rest of my dashboard design. I’m referring to both the mode color as well as the colored part of the card where the set points are.

I think the one, you want to hide is the only direct child from app-toolbar, so you can do it directly this way

  card-mod-root-yaml: |
    .: |
      app-toolbar > ha-icon-button {
        display: none;
      }
1 Like

perfect! thank you very much. The devs did move the search to the overflow on mobile, but it was still in desktop plain view.

with:

        /* Hide the quickbar launcher. */
        app-toolbar > ha-icon-button {
          display: {{'none' if not is_state('input_select.mode','Developer')}};
        }

I can now display it only when actually developing the frontend.
very nice.
thanks again!

what would be the correct syntax for hiding the more-info logbook section completely?

        ha-more-info-logbook {
          display: none;
        }

is not effective.
already using:

      ha-more-info-logbook:
        $: |
          .header > a {
            display: {{'none' if is_state('input_boolean.hide_more_info_logbook_show_more','on')}};
          } /* hide Show more on first/only tab, 2nd tab doesnt work */

but that is a bit more subtle. turning off the whole section for non admin users would be my end goal, but starting with hiding are generally would be a fine for now…

Not sure if I’m doing something wrong or it’s the hardware on my tablet. I able to blur the background on either my laptop or fire 10 tablet but when Irwin’s the same dashboard and same theme in my fire 8 tablet the background is not blurred. Is this a known thing or some type of limitation?

How do you blur it?

getting back to this for an interesting detail:

the mod works fine. in desktop size. the. when narrowing the window on desktop, the search icon suddenly shows up in the menu item list, because it was moved there for use on Mobile devices.

Ive been trying to hide that menu item based on aria-label like the other items

        mwc-list-item[aria-label="Edit Dashboard"] {
          {% if is_state('input_boolean.hide_edit_dashboard','on') %}
          display: none;
          {% endif %}
        }

but apparently is does not have an Aria-label

so we can not use that.

would you know how to take out that menu item too?

      app-toolbar > ha-button-menu mwc-list-item:nth-child(2) {
        display: none;
      }

a nice. though it is a bit of a gamble it will be the 2nd child in all circumstances ?
btw, if Search menu item on Mobile doesnt get an aria-label · Issue #12659 · home-assistant/frontend · GitHub would be fixed we can nail it to the exact menu-item.

thx Arganto, appreciated
btw, did you have a peek at 🔹 Card-mod - Super-charge your themes! - #1090 by Mariusthvdb ?

In cases, where log is in second tab and first tab is details? Can you post a pic, what you want to hide exactly?

sorry, I should have been more specific. Yes, take for example any switch entity:

The relevant part I asked for is missing. :wink: Is there a tab bar or not?

image

Anyway, just saw, that the simple

 card-mod-more-info-yaml: |
    .: |
      ha-more-info-logbook {
        display: none !important;
      }

is working. With or without tab bar.

Hmmm, I am sure I tried that…
will give it another shot exactly copied.

And yes, this is a more-info without tabs. Plain as is.

Thanks Arganto!

Wait, I didn’t use the !important. Must have been it then.

edit

fixed!

May-11-2022 19-25-34

conditional:

        ha-more-info-logbook {
          display: {{'none !important' if is_state('input_boolean.hide_more_info_logbook','on')}};
        }

That is just awesome. Thank you both!

To continue on the minimalistic look, do you think we can hide the “History” headline and maybe even the whole “header”? Since it works to hit Esc or click anywhere beside the popup, I see no reason for the name being there twice.

image

image

Are you sure you do not need that “cogs” button?

I don’t need them always visible, since I use @Mariusthvdb’s idea to hide with conditions (see above).
Then I can just turn them on when I need to edit something.

By this, probably:

  card-mod-more-info-yaml: |
    .: |
      .heading {
        display: none;
      }