And you used absolute value (like 150px)? That wonāt work on other devices/screen sizes. Absolute values are wrong here 
E. g.:
You now see what I mean?
Since you specified āsquare: trueā for the grid - all elements inside the grid are square, including the ārestriction-cardā. But the button inside he restriction-card is not square. To force it - apply āaspect-ratio: 1/1ā for the inserted button.
Btw, this whole part will not work:
style: |
:host {
--restriction-lock-icon-size: 18px;
since the card does not have ha-card element. As well as grid-card. Use mod-card then.
custom:button-card implements/offers it as native configuration option. Didnāt know itās a CSS thing 
Fabulous. This works, being applied to the button inside the restriction-card: card_mod:
style:
.: |
ha-card {
aspect-ratio: 1/1
}
- type: custom:restriction-card
row: false
card:
type: button
tap_action:
action: navigate
navigation_path: network
hold_action:
action: none
double_tap_action:
action: none
name: Netzwerk
icon: mdi:lan
show_name: true
show_state: false
show_icon: true
card_mod:
style:
.: |
ha-card {
aspect-ratio: 1/1
}
restrictions:
...
...
...
Last one regarding the restriction-card:
Initially I had this one without restriction-card:
type: custom:mod-card
style: |
ha-card {
height: 220px;
}
card:
type: button
name: Betriebsstatus
icon: mdi:checkbox-marked-circle
tap_action:
action: navigate
navigation_path: betriebsstatus
double_tap_action:
action: navigate
navigation_path: /lovelace/default_view
hold_action:
action: none
show_name: true
show_state: false
show_icon: true
This applied the CSS before the card was shown, which is really fast.
So while this one is working ā¦
type: custom:restriction-card
row: false
card:
type: button
name: Betriebsstatus
icon: mdi:checkbox-marked-circle
tap_action:
action: navigate
navigation_path: betriebsstatus
double_tap_action:
action: navigate
navigation_path: /lovelace/default_view
hold_action:
action: none
show_name: true
show_state: false
show_icon: true
card_mod:
style:
.: |
ha-card {
height: 220px !important;
}
restrictions:
confirm: null
pin:
code: 9999
text: 'Gesperrter Bereich. PIN nƶtig:'
retry_delay: 0
max_retries: unlimited
max_retries_delay: 0
block: null
exemptions: null
ā¦here the CSS (height setting) is applied after the card is shown, which gives an ugly card for a second or two (depending on browser/device speed) until the card is resized.
So hereās the question: how can I access the button card inside the restriction-card with the mod-card right from the beginning (to apply the height setting to the button card)? I was thinking of this, but it is not applied as it does not get down to the button-card. So a simple navigation thing is missing I guess :
type: custom:mod-card
style: |
ha-card {
height: 220px !important;
}
card:
type: custom:restriction-card
row: false
card:
type: button
name: Betriebsstatus
icon: mdi:checkbox-marked-circle
tap_action:
action: navigate
navigation_path: betriebsstatus
double_tap_action:
action: navigate
navigation_path: /lovelace/default_view
hold_action:
action: none
show_name: true
show_state: false
show_icon: true
restrictions:
confirm: null
pin:
code: 9999
text: 'Gesperrter Bereich. PIN nƶtig:'
retry_delay: 0
max_retries: unlimited
max_retries_delay: 0
block: null
exemptions: null
In other words: how to get from mod-card down to button-card?
Thank you very much Ildar. I learned a bit again, quite complicated to understand how to navigate down to embeeded elements/cards.
Unfortunately, the end result applying the height this way is the same (small lag when loading the view, takes one second to resize the button), probably because itās just another syntax/way (location) to apply the CSS, but the way it is applied is the same:
Load the view 
:
Wait a second until CSS is applied 
:
This was working very well without that glitch before using the restriction-card.
Not sure if that can be āfixedā or worked around somehow?
Can it applied ābeforeā the card is shown at all maybe?
Post your simplified code with the latest changes.
Check this:
type: grid
square: false
columns: 1
cards:
- type: markdown
content: xxxxxxxxxx
- type: grid
columns: 2
cards:
- type: custom:restriction-card
card:
<<: &ref_button
type: button
name: Betriebsstatus
icon: mdi:checkbox-marked-circle
show_name: true
show_state: false
show_icon: true
card_mod:
style: |
ha-card {
aspect-ratio: 1/1;
}
- *ref_button
Zero glitches.
Sorry for late response. My glitch example is based on another view. This issue is not based on the initial/former height setting itself but the way it is applied in combination with restriction card (which now gives a delay when card-mod styles are applied). Hereās the code:
views:
- theme: Backend-selected
title: ABC
path: overview-domains
icon: mdi:vector-triangle
visible:
- user: abc
- user: xyz
layout:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-rows: auto
mediaquery:
'(max-width: 650px)':
grid-template-columns: 1fr 1fr
'(max-width: 1200px)':
grid-template-columns: 1fr 1fr 1fr
'(max-width: 1600px)':
grid-template-columns: 1fr 1fr 1fr 1fr
type: custom:grid-layout
badges: []
cards:
- type: custom:mod-card
style:
restriction-card $ div#card hui-button-card $: |
.type-button {
height: 220px !important;
}
card:
type: custom:restriction-card
row: false
card:
type: button
name: Betriebsstatus
icon: mdi:checkbox-marked-circle
tap_action:
action: navigate
navigation_path: betriebsstatus
double_tap_action:
action: navigate
navigation_path: /lovelace/default_view
hold_action:
action: none
show_name: true
show_state: false
show_icon: true
restrictions:
confirm: null
pin:
code: 9999
text: 'Gesperrter Bereich. PIN nƶtig:'
retry_delay: 0
max_retries: unlimited
max_retries_delay: 0
block: null
exemptions:
- user: abc
- user: xyz
And with this exactly that happens:
Try to simplify the code - get rid of layout etc, see if the glitch happens with a single restriction card.
And why are you using āheight: xxxā style? Earlier you said that the only reason to test with a height is a difference in heights between 2 buttons.
- theme: Backend-selected
title: Test
path: test
visible:
- user: abc
badges: []
cards:
- type: custom:mod-card
style:
restriction-card $ div#card hui-button-card $: |
.type-button {
height: 220px !important;
}
card:
type: custom:restriction-card
row: false
card:
type: button
name: Betriebsstatus
icon: mdi:checkbox-marked-circle
tap_action:
action: navigate
navigation_path: betriebsstatus
double_tap_action:
action: navigate
navigation_path: /lovelace/default_view
hold_action:
action: none
show_name: true
show_state: false
show_icon: true
restrictions:
confirm: null
pin:
code: 9999
text: 'Gesperrter Bereich. PIN nƶtig:'
retry_delay: 0
max_retries: unlimited
max_retries_delay: 0
block: null
exemptions:
- user: abc
- user: xyz
Same result, first the card is shownā¦
Thatās simple: Itās another view, a slightly other use-case (still trying to merge the existing card-mod / mod-card base with restriction-card).
Is it possible to remove the header on a certain dashboard with the same theme or even change the theme for a specific dashboard?
Hi AhmadK
Have you found a way to use this (Icon-Hiding) for all entities in an entities-card without the need to write it for every entity?
type: entities
entities:
- entity: sensor.thermalcomfort_badgast_absolutehumidity
- entity: sensor.thermalcomfort_badgast_dewpoint
- entity: sensor.thermalcomfort_badgast_heatindex
- entity: sensor.thermalcomfort_badgast_simmerindex
- entity: sensor.thermalcomfort_badgast_simmerzone
- entity: sensor.thermalcomfort_badgast_perception
- entity: sensor.thermalcomfort_badbaga_absolutehumidity
- entity: sensor.thermalcomfort_badbaga_dewpoint
- entity: sensor.thermalcomfort_badbaga_heatindex
- entity: sensor.thermalcomfort_badbaga_simmerindex
- entity: sensor.thermalcomfort_badbaga_simmerzone
- entity: sensor.thermalcomfort_badbaga_perception
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
Can someone please tell me how to remove or change the plus icons of a grocery list? I donāt know what to call it, Iāve tried right clicking and inspecting. I have card mod. Im using the OurGroceries Card, and trying to make i look as close to mushroom theme as possible.
hi can somone help me how to control the size of this grid cardā¦its soo big and even panel mode is false. i want it to look small . any way around with cardmod is it possible?
code:
square: false
columns: 1
type: grid
cards:
- square: true
columns: 3
type: grid
cards:
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: script.remote_sleep
icon: mdi:television
show_state: false
hold_action:
action: call-service
service: script.remote_wakeup
data: {}
target: {}
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: script.remote_arrow_up
icon: mdi:arrow-up
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.pressure_pump
icon: mdi:lightbulb-group-outline
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: script.remote_arrow_left
icon: mdi:arrow-left
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: script.remote_select
icon: mdi:checkbox-blank
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: script.remote_arrow_right
icon: mdi:arrow-right
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: script.remote_top_menu
icon: mdi:backburger
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: script.remote_arrow_down
icon: mdi:arrow-down
- show_name: false
show_icon: true
type: button
tap_action:
action: toggle
entity: script.remote_home
icon: mdi:home
card_mod: null
OK ā Iām really struggling to understand how to get this to work when the value i want is heavily nested and its content is in a div or a span.
I have this mushroom person card of my lovely wifeā¦ and I want to change the font color so i can actually read the status
Hereās what i get when i inspect this element.
Can someone provide me some guidance on how to get that āHomeā value to be a different color?
Iāve tried so many permutations. I really dont think i understand this structure as much as i need toā¦ no matter how many times I read the documentation iām just not getting it.
Hereās my latest attempt, but it might be just as far off as my first.
card_mod:
style:
ha-card:
$ mushroom-card:
$ mushroom-state-item:
$ mushroom-state-info:
.secondary span{
color:green"
}
Iām fairly certain if someone can help me figure out how to change the styles of this value iāll be able to understand it enough to change any other kind of element by using inspect. Thank you for your help!!
Matt
Hi can somone help me to change the location of the image
I want to push the background image(the equalizer) to right (as you could see in image that its overlapping over the artwork soo pushing it right side might make things look good)
my code
type: custom:mini-media-player
entity: media_player.alexa_device
info: scroll
background: /local/svg/equalizer.svg
hide:
controls: true
name: true
power: true
source: true
volume: true
progress: true
tap_action:
action: navigate
navigation_path: /lovelace/musica/
style: |
:host
ha-card {
box-shadow: none !important;
}
.entity__info {
font-size: 1vw !important;
}
.entity__artwork {
border-radius: 0 !important;
box-shadow: 0px 0px 0px 0px white;
}
.mmp__bg {
background: none !important;
width: 160px;
height: 100px;
# position: relative;
# left: 1000px;
# top: 1000px;
}
OK ā well I think i figured this out! I still dont really know WTF iām doing, but I was able to get this to work. Iāll paste the code below and how i got here, so if some kind soul wants to educate me on what these things are it would be greatly appreciated.
Soā¦ This code
style: |
:host{
--secondary-text-color: white;
}
ha-card {
--card-secondary-font-size: 20px;
}
gave me what I was looking forā¦ a more legible status on a black background
One of the things i learned is that, in addition to exploring the element there is this really helpful Styles modal on the right hand side of the page that provides the elements you want to change and has the details you need to update the yaml.
--card-secondary-font-size: 20px; was listed under the :host that was inherited from #shadow-root (open).host which has this color item: color: var(--primary-text-color);
Now, I still dont know how to use the $, or the .: but I feel like iām on the right track. If anyone finds this helpful, or if anyone wants to correct or add onto this to help my (and others journies) it would be much appreciated.
`
Iām not exactly an expert, but in your case Iād try something along these lines:
card_mod:
style:
ha-card:{
--rgb-state-person-home: green;
}
I havenāt tested this, but my experience with card-mod is enough that I know you should try to set the --rgb-state-person-home color to what you want it to be. Try it at the first level (ha-card), and if it doesnāt work, start going into shadow-roots from there.
You might also want to check out card-mod helper it can help you find the correct path.
Edit: should have read the whole thread, Iād have seen that you managed to change the font color. The variable above and the card-mod helper are also avenues for you to explore if you plan on working with card-mod some more in the future 
If someone could help me out with this so I can stop banging my head against my desk that would be great. Iām using Calendarific integration through HACS to create a custom sensor which shows the days until a selected holiday. Iāve had to modify a theme to get the colors to change. But I cannot for the life of me figure out how to get the font size to change.
hours_to_show: 24
graph: none
type: sensor
detail: 1
entity: sensor.halloween
theme: Google Orange Theme
card_mod:
style: |
ha-card {
--mdc-icon-size: 40px;
font-family: "Jim Nightshade";
font-size: 0px;
}
Using card_mod I was able to change the icon size and the font style. But the size of the font will not change. (I know in my code itās set to 0px but even when I change it to 500px it only creates weird spacing between everything:
