{% set hvac_action = state_attr('climate.loft', 'hvac_action')%}
You are mixing button-card and card-mod.
Offcourse I am, sorry
Could use a little help here. Not sure if I need to use card_mod, but I think I do. I have a bunch of button-cards that are within a layout-card. Despite my best efforts with the button-card and layout-card the buttons seem to be inheriting their margins from a #root > * set to āvar(āmasonry-view-card-margin, 4px 4px 8px)ā. I cannot for the life of me figure out how to get card_mod to overwrite this property with a 0.
I was able to do it in a theme by setting the masonry variable to 0, but Iād like to just do it for the cards themselves. Any help appreciated.
- type: custom:layout-card
layout_type: custom:grid-layout
view_layout:
grid-area: main-right
layout:
grid-template-columns: 50% 50%
grid-template-rows: auto
height: 100%
margin: 0px 0px 0px 0px !important
card_margin: 0px 0px 0px 0px !important
padding: 0px 0px 0px 0px !important
cards:
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
- type: "custom:button-card"
template:
- emf_room_card
name: Family Room
icon: mdi:sofa-outline
entity: switch.zb_family_room_lamps
I did try
card_mod:
style: |
ha-card {
margin: 0px;
}
on the button card, but it doesnāt work. When I explore the elements in the dev tools and set margin: 0px on the object that works, but I canāt seem to translate that to card_mod
you can add extra_styles to button card template
extra_styles: |
:host {
--masonry-view-card-margin: 0 !important;
}
or with card_mod
card_mod:
style: |
:host {
--masonry-view-card-margin: 0 !important;
}
You can add margin:
edits directly under for button cards.
styles:
card:
- margin: 0px
type: custom:button-card
entity: light.bathroom_lights
show_name: true
name: Card Example
icon: mdi:lamp
aspect_ratio: 2/1
tap_action:
action: toggle
styles:
card:
- background-color: blue
- margin: 0px
icon:
- height: 100%
- color: orange
check out
Hi! Could anyone help me out? If you look at my picture the 2nd weather card is āgoodā but this is one using an other entity which doesnt work with tap_action. So i wanted to add a other weather card which supports tap_action but the scaling is bad ( the one above ) it should be like the 2ndā¦
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto auto
margin: 8px 4px 4px 4px;
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.laurens
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: entity
entity: person.adna
content_info: none
use_entity_picture: true
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: template
entity: input_boolean.jax_home_not_home
picture: local/images/jax.jpg
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
{% if is_state(config.entity, 'on') %}
--chip-background: rgb(var(--rgb-state-person-home));
{% else %}
--chip-background: red; /* Set to red when the status is 'off' */
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: template
entity: input_boolean.gasten_modus
icon: mdi:account-plus
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
{% if is_state(config.entity, 'on') %}
--chip-background: rgb(var(--rgb-state-person-home));
{% else %}
--chip-background: red; /* Set to red when the status is 'off' */
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
alignment: end
card_mod:
style: |
ha-card {
/* Overlap avatar Chips */
--chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));
/* Set size of border around Chips */
--chip-avatar-padding: 2px;
/* Reduce width to fit Chips & allow max space for weather */
width: fit-content;
transition: all 0s;
}
- type: weather-forecast
show_current: true
show_forecast: false
entity: weather.buienradar
forecast_type: daily
theme: Mushroom Shadow
name: ' '
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Weersverwachting
content:
type: entities
entities:
- type: custom:weather-card
entity: weather.forecast_home
forecast: true
details: false
card_mod:
style:
.: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
padding: 5px !important;
}
.current{
font-size: 6px;
}
How can I get the 1 and 2 lower ?
card_mod:
style: |
ha-card {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: center;
padding-bottom: 0px
}
Hi and thank you a lot for being so patient and willing to help! This is highly appreciated!
Iād be happy if anyone could have a look at my problem.
Goal: I like to have the font of a glance card bold as well as the margin between icon and text to a defined value.
Both things work separately (thanks to this forum):
card_mod:
style: |
ha-card {
font-weight: bold
}
leads to bold font::
and:
card_mod:
style:
.entities .entity:
$: |
state-badge {
margin-top: 50px;
margin-bottom: 0px;
}
leads to an adjustable margin:
I donāt understand anything of CSS coding style, but I really tried many many combinations - no chance.
So how do I combine both?
Thanks a lot in advance!
Is this what you are after?
card_mod:
style:
.entities .entity:
$: |
state-badge {
margin-top: 15px;
margin-bottom: 0px;
}
.: |
ha-card {
font-weight: bold;
}
Awesome, thank you!
I really should try to understand that
The code above has been applied to glance cards. Do you also know how to do it for button cards? And if yes: where can I find this information by myself?
Cheers
Here
Yes, I already came across that one. But I hoped that it would be possible without installing an additional custom card type.
But doesnāt it make the approach to use CSS styling on build-in cards obsolete if one installs dedicated card that fulfill the desired features?
From my point of view it is more āconsistentā to stick to one approach.
I misunderstoodā¦Iām not sure about the standard button card. Didnāt see much in the guide on this post when reading through it.
I had actually tried changing the margin in both the template and directly on the button and it didnāt do anything.
Iāll give that a shot. Thanks
Alright, no problem. Thank you anyway!
just found the header link icon in history-graph cards, and tbh, it was unthemed, and didnt look nice at all.
So, I wanted to hide it, which works with display: none
.
Add a boolean toggle, and control it from the UI.
next I needed it to be in style with my themes, so set primary-color on the icon. seems nice:
.card-header ha-icon-button {
--card-mod-icon-color: var(--primary-color);
{{'display: none' if is_state('input_boolean.hide_history_graph_link','on')}};
}
if would hope to find a theme variable for the icon, so we wont need to see it in a card_mod for each individual card.
Did anyone find that yet?
default icon:
no icon:
themed icon:
Hi Ildar, excelent work!
Ildar, Iām trying to remove/hide without success the component
for "custom:more-info-card"
Iāve also been trying for some time to reduce the height of the entire component by half.
Can you help me with this?
type: horizontal-stack
cards:
- type: custom:more-info-card
entity: light.spots_da_tv
title: Spots TV
card_mod:
style: |
ha-card {
width: 150px;
state-card-content {
display:none;
}
}
Can you post your code so folks can copy and paste it easily? It helps expedite solutions.
#11