styling inner elements of mushroom cards? | Home Assistant | Page 1

river vessel Dec 25, 2024, 8:47 PM

#

I have this so far for a mushroom light card and need to figure out how to target the inner elements in the card like the title/name of the entity. Anyone have any advice?

entity: light.office_desk_lamps
name: Lamps
hold_action:
  action: more-info
grid_options:
  columns: 12
  rows: 1
card_mod:
  style: |
    {% if is_state('light.office_desk_lamps','on') %}
      ha-card {
        background: #ffffff !important;
      }
    {% else %}
      ha-card {
        background: rgba(0,0,0,.3) !important;
      }
    {% endif %}

cedar topaz Dec 25, 2024, 9:25 PM

#

There are some variables within the card that makes things easier to access. Most of it can be done in :host instead of ha-card. Also, I restructured your IF statement a little bit. Note that there are some settings that will apply regardless of the light being on or off (outside of the IF statement.) Lastly, I kept your ha-card section for reference (or if you want to add more stuff there, but, in my example, it is redundant.

#

card_mod:
  style: |
    :host {
      --card-primary-font-size: 22px !important;
      --card-secondary-font-size: 12px !important;
      font-family: 'Comfortaa';
      {% if is_state(config.entity,'on') %}
        --primary-text-color: black;
        --ha-card-background: #ffffff;
      {% else %}
        --primary-text-color: gray;
        --ha-card-background: rgba(0,0,0,.3);
      {% endif %}
    }
    ha-card {
      {% if is_state(config.entity,'on') %}
        background: #ffffff !important;
      }
      {% else %}
        background: rgba(0,0,0,.3) !important;
      {% endif %}
    }

river vessel Dec 25, 2024, 9:39 PM

#

cedar topaz ```yaml card_mod: style: | :host { --card-primary-font-size: 22px !i...

This is terrific. Thank you so much for taking the time to explain all this.

#

Inside of :host, can I just use variables or can I target specific ids or classes of elements ?

#

for instance, what if I wanted to change the background and foreground colors of the icons?

#

and for bonus points, is there anyway I can use my own SVG icons instead of the standard icons?

#

You just saved me a ton of time, do you have a Paypal? I'd love to send you some $$ for your help

cedar topaz Dec 26, 2024, 1:33 AM

#

Inside of :host, can I just use variables or can I target specific ids or classes of elements ?
I tend to try to use variables whenever possible just because it is easier. You can target specific elements (and each card may be a bit different) but it can sometimes add a layer of difficulty. The syntax may change a bit too.
Card_mod has some of its own variables that can sometimes be used; sometimes the card has its own variables. Generally, elements in the card reference variables found in the theme. I tried using card-mod variables but I couldn't get one to work with the icon shape color.
In this next example, I took a different approach targeting ha-card on some of the variables found in there. Again, I couldn't get the icon shape color to change in the ha-card so I just targeted the mushroom-shape-icon. There, I also used a different type of IF statement. (I also changed the primary line height because the larger font size cut off the bottom of the p in Lamps.)

#

card_mod:
  style: |
    ha-card {
      --card-primary-font-size: 22px !important;
      --card-secondary-font-size: 12px !important;
      --card-primary-line-height: 1.2 !important;
      font-family: 'Comfortaa';
      {% if is_state(config.entity, 'on') %}
        --card-primary-color: black !important;
        --card-secondary-color: black !important;
        --ha-card-background: #ffffff;
      {% else %}
        --card-primary-color: gray;
        --card-secondary-color: gray !important;
        --ha-card-background: rgba(0,0,0,.3);
      {% endif %}
    }
    mushroom-shape-icon {
      --icon-color: {{ is_state(config.entity, 'on') | iif('white', 'silver')}} !important;
      --shape-color: {{ is_state(config.entity, 'on') | iif('gray', 'transparent')}} !important;
    }

#

and for bonus points, is there anyway I can use my own SVG icons instead of the standard icons?
I'm not 100% certain but I don't think the card will let you point to a SVG directly. You might be able to integrate it with font-awesome ( <-- ? ). There's a topic in here somewhere that talked about it that might work. With that said, the Mushroom Template Card can use a SVG. With this card, you can integrate most of the stuff that you're using card-mod to do. But here's an example that I have for the Mushroom Template Card and using an SVG.

#

Note: This example hard-codes the state variable to cloudy on the second line of each template which allowed for testing. Remove these lines for the template to work properly.

type: custom:mushroom-template-card
picture: |
  {% set state = states('weather.home') %}
  {% set state = 'cloudy' %}
  {% set path = '/local/icon/amcharts_weather_icons_1.0.0/static/' %}
  {% set name = path + state + '.svg' %}
  {{ name }}
primary: |
  {% set state = states('weather.home') %}
  {% set state = 'cloudy' %}
  {% set path = '/local/icon/amcharts_weather_icons_1.0.0/static/' %}
  {% set name = path + state + '.svg' %}
  {{ name }}

#

do you have a Paypal? I'd love to send you some $$ for your help
That's certainly not necessary but I do have a BuyMeACoffee on my profile.

river vessel Dec 26, 2024, 1:47 AM

#

cool, will use that 🙂

#

I got the icon changing color with your code

#

but only on the "on" state

#

hrmm

river vessel Dec 26, 2024, 1:49 AM

#

cedar topaz > Inside of :host, can I just use variables or can I target specific ids or clas...

I'm assuming the second value 'silver' would be the off state?

cedar topaz Dec 26, 2024, 1:50 AM

#

but only on the "on" state
I thought I noticed it acting up with the states but I thought I got it working. I'll double-check.
I'm assuming the second value 'silver' would be the off state?
Correct. The first value returns if true, second if false. (Or at least it is supposed to. I suspect it might be an issue with how the iif works and evaluating the config.state.)

river vessel Dec 26, 2024, 1:52 AM

#

hrmm

#

so i could write out the more verbose if else

cedar topaz Dec 26, 2024, 1:54 AM

#

Yeah. I'm thinking that's what it need. I tried something different that I thought would work but it looks like it doesn't. If you change on to off in the code, it works but I think it is because the card is being "redrawn" when the code is changed but that part doesn't get re-evaluated when the editor is saved. (Or something like that.)

river vessel Dec 26, 2024, 2:00 AM

#

cedar topaz Yeah. I'm thinking that's what it need. I tried something different that I thoug...

odd, even broken out, the off color isn't being changed

#

unless I'm doing something wrong:

      {% if is_state(config.entity,'on') %}
        --icon-color: purple !important;
      {% else %}
        --icon-color: green !important;
      {% endif %}
    }```

#

the purple works, but not the green hrmm

cedar topaz Dec 26, 2024, 2:05 AM

#

That's definitely weird... 🤔

#

Got it: ```yaml
mushroom-shape-icon {
--icon-color: purple !important;
--shape-color: orchid !important;
--icon-color-disabled: green;
--shape-color-disabled: lime;
}

river vessel Dec 26, 2024, 2:08 AM

#

aha! i just noticed that disabled secondary class while inspecting

#

where do you look to find those variables?

cedar topaz Dec 26, 2024, 2:16 AM

#

It is done by Inspecting the card. In Firefox, I right-click next to the card and click Inspect. I use the Pick an Element tool to let me click on the card or an element to look at closer (like the icon). Then, I just browse through the "stuff" defined looking for anything that looks like what I'm trying to modify. (Not the most scientific approach but that's about as far as I understand all of this.)
EDIT: Re-read your message above and see that you're already inspecting.

#

Updated code above because it does not need to be in an IF statement.

river vessel Dec 26, 2024, 2:18 AM

#

ahh right

#

thats great

#

I have most everything I need to get this dashboard looking like I want

#

it's just based off the HA-Fusion project, but since that's kinda abandoned, I did a design last year and never got around to doing this kinda work \

#

cedar topaz Dec 26, 2024, 2:19 AM

#

You can also look through the code of the card. I don't understand most of what is in here but the useful stuff appears to be at the bottom where the card gets rendered. https://github.com/piitaya/lovelace-mushroom/blob/main/src/cards/light-card/light-card.ts

river vessel Dec 26, 2024, 2:19 AM

#

this is what i'm working towards, though I couldn't figure out how to get a sidebar like that, so I just did the right area as the entire screen

#

and these are the icons I made that i mentioned I'd love to swap in for the stock icons

#

but baby steps as they say 😛

cedar topaz Dec 26, 2024, 2:22 AM

#

I did notice a few minutes ago that the Light card has the following option:
icon_type icon entity-picture none icon Type of icon to display
So. maybe setting the icon_type to entity-picture will allow the card to use an SVG similar to what I posted above with the cloud icon.

river vessel Dec 26, 2024, 2:24 AM

#

nice

cedar topaz Dec 26, 2024, 2:32 AM

#

cedar topaz I did notice a few minutes ago that the Light card has the following option: `ic...

Nope. That did not work as intended. Only shows the picture if the entity has its own picture. Can't redirect it to another image. (This is my Person entity.)

river vessel Dec 26, 2024, 2:33 AM

#

gotcha

#styling inner elements of mushroom cards?