Help Needed with styling custom card

Configuration Frontend
1

Hi all, while searching for anything interesting that can apply to my dashboard I stumbled upon this post and the sixth post by @Thekholm

I loved the way he nested light cards under one card and decided to copy his code. I fiddled around with his code and managed to modify his design according to my needs…BUT, I have 2 things that I can’t find out how to change.

First thing is that when the group entity is on it states how many lights are on. What I would like is to have is the percentage of the overall lighting group.

The second one is that while the first card follows the dashboard theme, the cards nested under are not following the same theme. Is there a way to change the theme for the nested cards?

I want to mention here that I am a total noob considering coding and css styling but I don’t give up!!!

HA Screenshot

HA Screenshot2

And here is my code

type: custom:vertical-stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: auto 33px
      margin: '-4px -4px -8px -4px;'
    cards:
      - type: custom:mushroom-template-card
        entity: light.studio
        layout: horizontal
        primary: Studio
        secondary: >
          {% set room = expand(area_entities('studio')) |selectattr('domain',
          'eq',

          'light')|rejectattr('attributes.is_hue_group', 'true') |list %}{% set
          on =

          room |selectattr('state', 'eq', 'on')|list |count %}{% set all = room

          |count %}{% if on |int(0) > 0 %}{{ on }}/{{ all }}{% else %} Off {%

          endif %} {% if is_state('light.studio', 'on') %} Lampor är på

          {%else%} 

          {% endif %}
        icon: mdi:lightbulb-group
        icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''grey'' }}'
        fill_container: false
        multiline_secondary: false
        use_light_color: true
        show_brightness_control: true
        card_mod:
          style: |
            ha-card {
              background: none;
              --ha-card-border-width: 0;
            }
      - type: custom:mushroom-template-card
        entity: input_boolean.mushroom_matrum_card
        icon: >-
          {{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
          }}
        icon_color: white
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              align-items: flex-end;
              background: none;
              --ha-card-border-width: 0;
            }
            mushroom-shape-icon {
              --shape-color: none !important;
            }  
  - type: conditional
    conditions:
      - entity: input_boolean.mushroom_matrum_card
        state: 'on'
    card:
      type: custom:vertical-stack-in-card
      cards:
        - type: custom:mushroom-light-card
          entity: light.pendant_2
          layout: horizontal
          use_light_color: true
          show_brightness_control: true
          card_mod:
            style:
              mushroom-state-info$: |
                .container {
                  display: table !important;
                }
                .secondary {
                  display: table-cell;
                  text-align: right;
                  width: 100%;
                }
              .: |
                ha-card:after {
                  content: '';
                  border-bottom: solid px rgba(var(--rgb-grey), 0.2);
                  margin: 12px 0px -12px;
                }
        - type: custom:mushroom-light-card
          entity: light.desk
          layout: horizontal
          use_light_color: true
          show_brightness_control: true
          card_mod:
            style:
              mushroom-state-info$: |
                .container {
                  display: table !important;
                }
                .secondary {
                  display: table-cell;
                  text-align: right;
                  width: 100%;
                }
              .: |
                ha-card:after {
                  content: '';
                  border-bottom: solid px rgba(var(--rgb-grey), 0.2);
                  margin: 12px 0px -12px;
                }
        - type: custom:mushroom-light-card
          entity: light.studio_strip
          layout: horizontal
          use_light_color: true
          show_brightness_control: true
          card_mod:
            style:
              mushroom-state-info$: |
                .container {
                  display: table !important;
                }
                .secondary {
                  display: table-cell;
                  text-align: right;
                  width: 100%;
                }
              .: |
                ha-card:after {
                  content: '';
                  border-bottom: solid px rgba(var(--rgb-grey), 0.2);
                  margin: 12px 0px -12px;
                }
      card_mod: null
      style: |
        ha-card {
          --ha-card-border-width: 0;
        }
1 Like
2

Anyone with “styling” skills?

3

With this post, I have seen 5 different ways to supposedly change a mushroom entity icon color , none of which work for me. Is there a simple way to specify both the ON and OFF color for a switch entity?

4

For your percentage, use this template

          {% set room = expand(area_entities('studio')) | selectattr('domain', 'eq', 'light') | rejectattr('attributes.is_hue_group', 'true') | list %}
          {% set on = room |selectattr('state', 'eq', 'on') | list %}
          {% if on %}
            {{ ((on | count / room | count) * 100.0) | round(0) }}%
          {% else %}
            Off
          {% endif %}

As for using themes, you’ll have to clarify what areas are not matching your theme.

5

On both screenshots, the studio light card is semi transparent as it should be according to the theme (ios-dark-mode-blue-red) but the three light cards below it are following the mushroom theme. I would like them to be transparent like the first one.

6

add

              background: none;

to the ha-card:after style sections of the other 3 cards

7

I copied the code you gave me (for which I thank you for time and effort) but when the lights are off the second line shows 100.0% and when the lights are on I get something like 13 or 14 decimal numbers

8

fixed

9

I think I did something wrong with your code, I added a single light card above and the readings I get from your code are really odd…also can’t figure out where to add the background: none; I tried several lines but nothing worked…sorry for being so noob!!! :frowning:

HA Screenshot3

HA Screenshot4

10

I added the following code but I didn’t get the same kind of transparency

              ha-card {
              background: none;
              }

HA Screenshot5

I added the background: none; at the last 2 cards the second one is plain without transparency

11

I can’t tell what you’re saying. Is it not correct? Just add it to all 3.

12

Sorry if I’m not making sense, the first card is transparent as it should by the theme, the other cards are less transparent" than the theme (I added it to all three)

HA Screenshot6

13

also add it to that last style box, which is the vertical-in-stack-card

1 Like
14

You’re a legend!!! It worked!!!

Is there a way to fix the readings for the group percentage? If not I’ll just stick with the code I had in the beginning

15

I updated the code in the previous post… what’s wrong with it now? Your last image was showing it correctly

16

I didn’t include the single light card for comparison in the last picture here it is with it to compare it

HA Screenshot7

17

I still don’t follow, do you expect it to show 52%? It’s showing the percentage of the lights that are on in the room. It’s not showing the brightness of the lights that are on…

18

Yes thought that both cards will show the same… I didn’t get that the second card is showing percentage not brightness…Sorry!!!

19

if you know the entity_id, it’s a pretty simple fix

20

You mean the light group entity? like light.studio