The answer;
[...]
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
chips:
- type: entity
entity: sensor.temp
icon_color: blue
#mushroom #chips #shadow #card-mod
that actually workedā¦
type: custom:button-card
show_icon: false
show_state: false
show_name: true
show_label: false
name: Test1
view_layout:
grid-column: 3
grid-row: 4
grid:
- position: absolute
styles:
card:
- width: 200px
- height: 200px
- border-radius: 0px
- background-color: blue
grid:
- grid-template-areas: >-
"n n n n n n n n 9 10" "item2 item2 item2 item2 item2 6 7 8 9 10" "item2
item2 item2 item2 item2 6 7 8 9 10" "item2 item2 item2 item2 item2 6 7 8
9 10" "1 2 3 4 5 6 7 8 9 10" "1 2 3 4 5 6 7 8 9 10" "1 2 3 4 5 6 7 8 9
10" "1 2 3 4 5 6 7 8 9 10" "1 2 3 4 5 6 7 8 9 10" "1 2 3 4 5 6 7 8 9 10"
- grid-template-columns: repeat(10, 1fr)
- grid-template-rows: repeat(10, 1fr)
- position: absolute
name:
- font-size: 10px
- align-self: center
- justify-self: start
custom_fields:
item2:
- align-self: start
- justify-self: start
custom_fields:
item2:
card:
type: custom:button-card
entities:
- entity: light.standerlampe
icon: mdi:lightbulb-variant
show_name: false
styles:
card:
- background: white
- border-radius: 50%
- width: 40px
- height: 40px
img_cell:
- background: none
style: |
ha-card {
box-shadow: none;
}
thank you for your help 
I actually tried with the chips card during my ātrial-and-errorā runā¦ i had the same issueā¦ but now i could prop get it to work as intendedā¦
Another one to the same cardā¦
Someone that knows why this happensā¦
pre-change
after change
only thing that changesā¦
pre-change-code
code after changeā¦
i dont get how that changing one āblockā from ānā to ā1ā can affect āimg_cellā that wayā¦ in my logic it should at most move the ānameā tekst a bit to the rightā¦ but that should be allā¦
Any thoughtsā¦??
No problem! You can also play more with the style of the custom:button-card in the custom_field. For instance using state for on off and then the styles like icon under it. Which allows you to have stylings for different states, like turn the bulb to yellow when itās on and to grey when itās off etc. All is documented very well in the READ.ME on the Github of this card.
Iām not a CSS expert myself, but I did manage to create amazing looking button-cards with grid by using this tool: https://grid.layoutit.com
It allows you to create the grid visually and shows the code you can copy/paste to use with the button-card. Perhaps itās easier to create your grid layout there first and then copy the code to button-card.
That is a very cool toolā¦ thx
I also tried my hand on the absolute positioningā¦ it seems alot easier to work with when " freehand placing" elementsā¦
Hello Guys,
I spend the better part of the day working myself into button-card and I created this dude here:
As an experienced user you might already see, that the GUI already displays the button.card somehow strange in the edit view.
When I try to make a horizontal stack, the cards overlay.
Might someone please help me with what Iām doing wrong here?
type: custom:button-card
aspect_ratio: 1/1
name: Haus gesamt
icon: mdi:home-lightning-bolt-outline
entity: sensor.gesamtverbrauch_haus_taglich
show_state: true
show_units: false
custom_fields:
i_2: |
[[[
return `<ha-icon
icon="mdi:sigma"
style="width: 25px; height: 25px; color: white;">
</ha-icon>`
]]]
unit: kWh
styles:
grid:
- grid-template-areas: '"i i_2" "n n" "s unit"'
- grid-template-columns: 55% 1fr
- grid-template-rows: 55% 10% 1fr
- align-items: start
- gap: 4%
name:
- justify-self: start
- padding-left: 10px
- font-size: 16px
- color: grey
state:
- justify-self: start
- align-self: end
- padding-left: 10px
- font-size: 28px
- padding-bottom: 8px
card:
- width: 150px
- height: 150px
icon:
- color: |
[[[
if (entity.state < 7) return 'lime';
if (entity.state >= 7 && entity.state < 80) return 'orange';
else return 'red';
]]]
- width: 100%
- filter: opacity(60%)
img_cell:
- align-self: start
- text-align: end
custom_fields:
unit:
- color: grey
- justify-self: start
- align-self: end
- font-size: 16pt
- padding-bottom: 8px
i_2:
- justify-self: end
- padding-top: 8px
- padding-right: 8px
Thanks in advance!
I found the problem. Obviously the aspect_ratio in combination with a fix width/height caused the problem. After undoing this it works fine now.
Iāve seen a number of people using the variable
āābutton-card-light-color-no-temperatureā
When I use this in my config, this variable still changes when the light goes from warm-white to cool-white.
Is there anything specific that needs to be done to use this variable?
Make sure you use two dashes, in your example you only use one.
So: --button-card-light-color-no-temperature
Thanks @ASNNetworks
Make sure you use two dashes, in your example you only use one.
So: --button-card-light-color-no-temperature
The YAML does use 2 dashes. Not sure why they disappeared in my message above:
type: custom:button-card
entity: light.lamp_x_officedesk
name: Desk
styles:
card:
- width: 80px
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color-**no-temperature**)
box-shadow: 0px 0px 10px 3px var(ābutton-card-light-color-no-temperature)
or
box-shadow: 0px 0px 10px 3px var(ābutton-card-light-color)
have the same effect:
The GOAL:
Show a yellow āonā glow (and ideally icon) when itās on, regardless of the color temperature or brightness. Like this:
Well, the code is meant to show the color of the light with and without the temperature. If you have bulbs that only operate RGB, then both codes would return the exact same color since the light has no temperature attribute. And if the light isnāt RGB, there is no point in using the variable. Itās to reflect the color the light is currently in.
If a light entity is assigned to the button, then:
--button-card-light-color will contain the current light color--button-card-light-color-no-temperature will contain the current light without the temperatureYou can use them both in other parts of the button. When off, it will be set to var(--paper-item-icon-color)
If your goal is to show a YELLOW glow and icon when a light is on, why not just use a color code and state styles, so you have different styles depending on state?
type: custom:button-card
entity: light.lamp_x_officedesk
name: Desk
state:
- styles:
icon:
- color: rgb(255,255,0)
card:
- width: 80px
- box-shadow: 0px 0px 10px 3px rgb(255,255,0)
value: 'on'
styles:
card:
- width: 80px
When state is on it will apply the styles listed there. When the state is anything else, like off or unavailable it will revert to default. You can create multiple states. If the light doesnāt match any of the states you created, it will use the default style (the one at the bottom). If you want other colors for the default styles, then list them there (like greyed out icon color when off, or different color shadow or background etc).
What bothers me in this type of glow is that when glow is ON it goes into neighbouring card, if not set very small, since glow is ādrawnā outside of reuglar card. It should be drawn to the insideā¦
Yes! Thanks! Added to my favorites.
I managed to put it in my card without card-mod. Just replace above ābox-shadowā with
- box-shadow: inset 0 0 50px lime
and you get glow to inside. Perfect!
Well yes, thatās kinda the feature of this card and is also shown in the above code. You donāt need card-mod for styling this card, itās explained in great detail in the readme.
I found even better version by adding another parameter:
- box-shadow: inset 0 0 30px 10px lime
it gives nicer and clearer color at very edges.
If your goal is to show a YELLOW glow and icon when a light is on, why not just use a color code and state styles , so you have different styles depending on state?
Thatās what I like about this forum. I never thought off solving this in a completely different way: state styles
Works like a charm!
I loved the Laundry Card. Iām a new to HA but learning as fast as I can. I notice on the card you use a type: custom:hui-entities-card. Where I can find this custom:hui-entities-card?