Thank you after many deleting en installed the card-mod everthing works now.
Anyone know how to resolve that ?
e.g.
type: custom:more-info-card
entity: media_player.sonos_kinderzimmer
card_mod:
style:
.: |
state-card-content { display: none; }
more-info-content:
$:
more-info-media_player:
$: |
.basic-controls { display: none !important; }
.volume { display: none !important; }
But you should start to poste code as well, so that volounteers and copy&paste and work on it.
1 Like
Thank you so much
But you should start to poste code as well, so that volounteers and copy&paste and work on it.
Yes sure you are right sorry for that
In this example you adjust the height. It works fine for me but one problem that Iāve always had and could never figure out is why the height: variable doesnāt accept a percentage value but width does? This is the same when using other cards like the custom:button-card. Is there a way for percentage to work with height?
Iāve searched the topic before and from what I understand the container the card is in needs to have a height or width set for the percentage to be based on. So Iām assuming since screens scroll up and down there usually isnāt a height set to base the percentage on opposed to the width which is usually constrained by the screen size. If this is true, do I have any other options?
What Iām trying to do, is make my dashboard responsive to resizing of the browser window. I mostly use the custom:grid-layout and either the custom-stack-in-card or custom:vertical-stack-in-card so everything appears as part of one card. Iām trying to do the same with the custom:picture-element card. However, the problem I had before with the stack-in cards is the same problem Iām having now with the picture element card. I canāt adjust the height to make everything fit better and still have it remain responsive because percentage doesnāt work. The only thing that does work to adjust the height is using px (which I had to do in the past) but this sets a fixed height which makes it unresponsive.
Is there another way or better way to go about doing this?
Just a heads up, the custom:button-card uses itās own internal styling and card_mod use really isnāt necessary for most applications. Have you experimented with the custom:layout-card in grid mode?
Providing an example with card code may expedite a solution.
@LiQuid_cOOled yes but that only affects whatās in the card.
Yes, I do understand that. I was only pointing out that height: canāt be styled using a percentage value with that card either.
What Iām trying to figure out is if this is a limitation of all the HA cards or just some? And depending on that answer, is there a way to adjust the height of the picture-element card with a percentage value (height: 10%) opposed to pixels (height: 50px)?
I can show you the difference in response using the width. In the below gif, the top card is using a fixed pixel value for width and the bottom card is using a percentage. You can see the difference in they way the respond to resizing the browser window.
The issue Iām having is when I need to adjust the height of a card that (which is normally responsive) I have to use a fixed pixel value which makes in unresponsive. Depending on the spacing, when the browser window is made smaller the fixed value cards remain the same size and overlap instead of shrink so everything fits.
To avoid this, when setting the width of a card I use a percentage value but for whatever reason I canāt do the same with the height. For whatever reason, the percentage value has no affect on the height of the card. I could use the flexbox option of max-height which would work however if I make the browser window larger the max-height value would stop it from expanding. Using a percentage value allows both but it only works with width, not height.
1 Like
I guess that a height measured in percentage works only inside some container. A cardās height does not seem to be controlled by an outer container. Ofc I could be wrong since not an expert in Css and merely share my experience. Sorry, cannot reply with with more details since rather far from civilized world.
1 Like
some crossposting 
card_mod:
style: |
ha-card {
height: 60px !important;
}
hui-generic-entity-row $: |
state-badge {
display: none;
}
ha-textfield $: |
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
.: |
:host {
--mdc-text-field-fill-color: disable;
}
how can I remove the brighter grey and the white line ?
1st post - link at the bottom - styling input select, combining $ and .
1 Like
solution:
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
ha-card {
height: 60px !important;
}
@Faecon There may be other ways to consolidate, but you should definitely be able to combining the code below under .mdc-text-field {
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: transparent;
}
Like this
card_mod:
style:
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
--mdc-text-field-fill-color: transparent;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-card {
height: 60px !important;
}
1 Like
Hello volks!
I am having trouble centering the green and red buttons (Mushroom cards). I would like the text āLED-Beleuchtungā, the red button, the green button, and the icon to be aligned on a horizontal line.
Another thing is the grid. I used a1, b1, c1, d1 for the colums, so the red button should be left, the green one should be right. But itās the oppositeā¦ Why?
So hereās what I have now:
And here is my code.
I tried several things to align the cards, but didnā succeed.
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: auto 15% 15% 10%
grid-template-rows: auto
grid-template-areas: |
"a1 b1 c1 d1"
cards:
- type: custom:mushroom-entity-card
entity: sensor.sensor1
name: Einstellungen
view_layout:
grid-area: d1
icon: mdi:cog
icon_color: grey
icon_type: icon
fill_container: false
primary_info: none
secondary_info: none
layout: horizontal
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: none;
border: none
}
- type: custom:mushroom-entity-card
entity: sensor.sensor2
name: LED-Beleuchtung
view-layout:
grid_area: a1
fill_container: false
secondary_info: false
primary_info: name
icon_type: icon
icon: mdi:led-strip-variant
icon_color: yellow
layout: horizontal
card_mod:
style: |
ha-card {
font-variant: small-caps;
background-color: transparent;
border: none
}
- type: custom:mushroom-entity-card
entity: sensor.sensor3
name: Auto
view_layout:
grid_area: c1
icon_type: none
fill_container: false
secondary_info: none
layout: horizontal
card_mod:
style: |
ha-card {
height: 40px !important;
background-color: green;
font-variant: small-caps;
--card-primary-color: white;
}
- type: custom:mushroom-entity-card
entity: sensor.sensor4
name: Hand
view_layout:
grid_area: b1
fill_container: false
secondary_info: none
icon_type: none
card_mod:
style: |
ha-card {
background-color: red;
height: 40px !important;
font-variant: small-caps;
--card-primary-color: black;
}
I hope you can help me, Iāve been trying to do this for several days now 
You need to set the same height across all cards to center them.
The grid settings worked for me with this code as well.
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 20% 20% 15%
grid-template-rows: auto
grid-template-areas: |
"a1 b1 c1 d1"
cards:
- type: custom:mushroom-entity-card
entity: sensor.sensor1
name: LED-Beleuchtung
view_layout:
grid-area: a1
fill_container: false
secondary_info: false
primary_info: name
icon_type: icon
icon: mdi:led-strip-variant
icon_color: yellow
card_mod:
style: |
ha-card {
height: 40px !important;
font-variant: small-caps;
background-color: transparent;
border: none
}
- type: custom:mushroom-entity-card
entity: sensor.sensor2
name: Hand
view_layout:
grid-area: b1
fill_container: false
secondary_info: none
icon_type: none
card_mod:
style: |
ha-card {
background-color: red;
height: 40px !important;
font-variant: small-caps;
--card-primary-color: black;
}
- type: custom:mushroom-entity-card
entity: sensor.sensor3
name: Auto
view_layout:
grid-area: c1
icon_type: none
fill_container: false
secondary_info: none
layout: horizontal
card_mod:
style: |
ha-card {
height: 40px !important;
background-color: green;
font-variant: small-caps;
--card-primary-color: white;
}
- type: custom:mushroom-entity-card
entity: sensor.sensor4
name: Einstellungen
view_layout:
grid-area: d1
icon: mdi:cog
icon_color: grey
icon_type: icon
fill_container: false
primary_info: none
secondary_info: none
layout: horizontal
card_mod:
style: |
ha-card {
height: 40px !important;
background-color: transparent;
box-shadow: none;
border: none
}
1 Like
Thanks! That worked! 
I have a little question, and I think I will probably need to use card mod for this. Iām using the below fold-entity-row for this list of alarms, and what I would like to have is the āparentā alarm icon be highlighted (like the state_color option on an entities card) if any of the alarms below are enabled. Any suggestions how this might be done? Thanks.
I would not do it via card_mod directly and try it in another way first:
- create a group with any-on-option (see documentation)
- use this entity in the fold-card header
Advantage:
- no card-mod
- you can use the group for other purposes as well, have a history, ā¦
Exspektation/to be check
- is state of this group taken to color the header entity icon as well. If no: you can still use card_mod and second best option.
Thanks! The group suggestion worked perfectly 
Hello
Hoping someone can help me with this as I canāt find a solution.
Iāve made a picture-elements card for my car with and use a state-icon to show charging status, currently I have the icon green when charging and white when charging is complete, however I would like to have the icon blinking green when charging and solid green when complete.
Problem is I canāt work out how to make the icon blink based on state, my current code is below.
Thanks
# Charger
- type: state-icon
entity: lock.[[car]]_charge_cable_lock
icon: iq:tesla-plug
card_mod:
style: |
:host {
--card-mod-icon-color:
{% if is_state('sensor.[[car]]_charging', 'disconnected') %}
var(--grey);
{% elif is_state('sensor.[[car]]_charging', 'starting') %}
var(--cyan);
{% elif is_state('sensor.[[car]]_charging', 'charging') %}
var(--green);
{% elif is_state('sensor.[[car]]_charging', 'complete') %}
var(--white);
{% elif is_state('sensor.[[car]]_charging', 'stopped') %}
var(--orange);
{% elif is_state('sensor.[[car]]_charging', 'no_power') %}
var(--red);
{% endif %}
}
state_color: no
tap_action:
action: toggle
style:
top: 88%
left: 90%