🔹 Card-mod - Super-charge your themes!

[Mariusthvdb (Marius)]

Hey Arganto!

did you already check the new quickbar entity in the menu of the latest frontend:

Though maybe nice in functionality, it is not my preference to always show that, and to anyone… so. Id like to hide it, but can not find the correct item.

Also, on Mobile this takes away costly screen estate. I really feel it should be optional

this is the PR: Quickly search for entities from the Overview Dashboard by bdraco · Pull Request #12324 · home-assistant/frontend · GitHub
inspector shows:

is this enough info to add a line in the card-mod-theme and hide it?

now what do I set display: none; to

using:

        ha-icon-button {
          display: {{'none' if not is_state('input_select.mode','Developer')}};
        }

is a bit too active and changes the bar to:

probably because there’s also the 3-dots icon:

we can see setting the color to red

if I set the color to be transparent:

        ha-icon-button {
          color: {{'transparent' if not is_state('input_select.mode','Developer')}};
        }

that hides the icon but still hovers the handle, and doesnt free the space

    ha-icon-button {
      visibility: {{'hidden' if not is_state('input_select.mode','Developer')}};
    }

kills all functionality in the menu.
all in all I need it to only address the Magnifier icon

would appreciate if you could have a look…

[arganto]

@Mariusthvdb

did you already check the new quickbar entity in the menu of the latest frontend:

Not yet. But will do so as soon as I have it in an update.

[Mariusthvdb (Marius)]

thx. as far as I can see now, its a bit of an issue because the ha-icon-button hasn’t got an identifier, like the next button. Maybe we can set it to the first-child or something like that, but thats beyond my current insights…
I did have a go with one if my other regular cards:

card_mod:
  style:
    '.box div:nth-child(3)':
      'div:nth-child(1)':
        ha-icon-button:
          $:
            mwc-icon-button:
              $: |
                .mdc-icon-button {

and that didnt help ;-0

so, Ill await your findings with some healthy impatience

[Mariusthvdb (Marius)]

something else: I made nice progress on modding the tab icons, with things like:

    card-mod-root-yaml: |

      paper-tab[aria-label='Presence'] ha-icon$: |
        ha-svg-icon {
          --card-mod-icon: {{states('sensor.presence_icon')}};
          color: {{states('sensor.presence_color')}};
        }

however, if the view title contains spaces, this throes an error, eg on

      paper-tab[aria-label='Settings motion'] ha-icon$: |
        ha-svg-icon {
          --card-mod-icon: {{'mdi:motion-sensor' if is_state('binary_sensor.motion_sensors_all','on') else 'mdi:motion-sensor-off'}};
          color: {{'red' if is_state('binary_sensor.motion_sensors_all','on')}};
        }

is this a bug? or can we somehow mitigate that in the syntax?

issue in the card-mod repo: SyntaxError: The string did not match the expected pattern · Issue #199 · thomasloven/lovelace-card-mod · GitHub
please have a look, thanks!

btw, for now, I fixed by taking out the spaces and replacing them with a - to make Settings-motion. Although I dint particularly like it to show like that in the hover

or when as active tab (and sized up):

I do like the icon changing
find my adapted card-mod-themes in my Gist

[Mariusthvdb (Marius)]

just as a small followup, add animation to your tab/view icons:

      paper-tab[aria-label='Summary-groups'] ha-icon$: |
        ha-svg-icon {
          --card-mod-icon: {{'mdi:alert' if states('sensor.hubs_badge') > '0' or states('sensor.critical_badge') > '0'}};
          color: {{'red' if states('sensor.hubs_badge') > '0' or states('sensor.critical_badge') > '0'}};
          animation: {{'pulse 2s ease 0s infinite normal none' if states('sensor.hubs_badge') > '0' or
                                                        states('sensor.critical_badge') > '0' else 'none'}};
        }
        @keyframes pulse {
          0% {
            opacity: 0.8;
            transform: scale(0.2);
          }

          80% {
            opacity: 0;
            transform: scale(1.2);
          }

          100% {
            opacity: 0;
            transform: scale(2.2);
          }
        };

or, shorter:

      paper-tab[aria-label='Summary-groups'] ha-icon$: |
        ha-svg-icon {
          {% if states('sensor.hubs_badge') > '0' or states('sensor.critical_badge') > '0' %}
            --card-mod-icon: mdi:alert;
             color: red;
             animation: pulse 2s ease 0s infinite normal none;
          {% endif %}
        }

and find a nice animation and build it here: https://webcode.tools/generators/css/keyframe-animation

quick result:

alert:

no alert:

[Ildar_Gabdullin]

The easiest way to create a separator between tabs in the header:

1. Add a style:

  card-mod-root-yaml: |

    .: |

      paper-tab[aria-label='separator'] {
        /* separator */
        padding-left: 0px;
        padding-right: 0px;
        pointer-events: none;
      }

2. Create a file for a dummy tab - “separator.yaml”:

title: separator
path: separator
panel: false
badges: []
icon: mdi:blank
cards: []

3. Add this tab where you want to have a separator:

views:
  - !include ....
  ##############################################################
  - !include views/separator.yaml
  ##############################################################
  - !include ....

4. Play with padding-left & padding-right values if you want to have the separator shorter or wider:
   
   

Also you may use different sets for different widths:

      paper-tab[aria-label='separator_short'] {
        /* separator */
        padding-left: 0px;
        padding-right: 0px;
        pointer-events: none;
      }

      paper-tab[aria-label='separator_wide'] {
        /* separator */
        padding-left: 32px;
        padding-right: 32px;
        pointer-events: none;
      }

and create two files - “separator_short.yaml” & “separator_wide.yaml”.

[skynet01 (Alex)]

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.

[Mariusthvdb (Marius)]

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

  - 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);
              }
            }

[Turbo4door (Justin)]

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.

[arganto]

@Mariusthvdb

ha-icon-button {
          display: {{'none' if not is_state('input_select.mode','Developer')}};
        }

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;
      }

[Mariusthvdb (Marius)]

@arganto

.: |

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!

[Mariusthvdb (Marius)]

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…

[rysm83]

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?

[Ildar_Gabdullin]

How do you blur it?

[Mariusthvdb (Marius)]

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?

[arganto]

@Mariusthvdb

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

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

[Mariusthvdb (Marius)]

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 ?

[arganto]

@Mariusthvdb

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…

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

[Mariusthvdb (Marius)]

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

[arganto]

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