Have you looked at custom:stack-in-card? Should join it all together so there isn’t any space between buttons. You could have 4 of them where you join the top and bottom together in each one, or you can make one big seamless stack with no spaces in between.
1 Like
Thanks both for the pointers! Will check out both options.
I’m trying to fit in my home assistant kiosk on a Hyperpixel 4.0 square screen so i need to lower the height of an entity row avoiding a vertical scrollbar. For some reason i can’t get this to work, what i’m doing wrong?
My code:
- type: entities
entities:
- entity: cover.rolluiken_slaapkamer_3
name: Room 3
- entity: cover.rolluiken_slaapkamer_2
name: Room 2
- entity: cover.rolluiken_slaapkamer_1
name: Room 1
- entity: cover.rolluiken_slaapkamer_0
name: Room 0
- entity: cover.sunscreen_1
name: Sunscreen 1
- entity: cover.sunscreen_2
name: Sunscreen 2
- entity: cover.sunscreen_3
name: Sunscreen 3
card_mod:
style: |
hui-generic-entity-row {
height: 40px;
}another option:
- type: custom:mod-card
card_mod:
style: |
:host {
--grid-card-gap: 0px;
}
card:
type: grid
simply reduce the gap to 0 
or set that to the row in button-card directly:
- type: custom:button-card
styles:
grid:
- row-gap: 0px
1 Like
1st post → link at the bottom
1 Like
I would like to alter the look of the custom:weather-card fron Bram Kragten. I am an absolute beginner on this, and just start playing with the DOM Inspector after reading about this. I found the items i would like to change.
This is the card i want to change and below the card I changed via DOM inspector:
The changes are obvious in the header part of the card. This is the default code of the card:
type: custom:weather-card
entity: weather.home
number_of_forecasts: '5'
name: Het weer
I made an overview of the items i would like to change:
The items are .icon_bigger, .title, .temp and .tempc
But i do’nt know how i put these with styles: in my card config.
I have the feeling i am almost there to understand how this works… But can anyone please tell me how i go further with this?
I found this in the Inspector:
You are doing it wrong!
card-mod.js?hacstag=190927524315:5 mod-card should NEVER be used with a card that already has a ha-card element, such as weather-card
OK, Does anyone knows how to change this Card? Perhaps @bramkragten the maker of this card?
Probably you tried to use mod-card with this weather card - which is wrong.
why dont you simply edit the card itself? You seem to know exactly what you want, go ahead and edit the resource file itself.
Hi @Mariusthvdb Marius,
You are right! I browsed the file weather-card.js and found the items to change. Success!
It was more the fear of the unknown; I have never done this before. AND I was hoping I could change this with the mod-card from Thomas Loven.
But it was actually quite simple. Looking back I feel myself a bit foolish… 
Thanks for putting me in the direction.
2 Likes
Why do you use :host in this and other examples?
Most probably these are very old examples…
In some cases I also used kind of “ha-card some_element”.
In most cases “:host” & “ha-card” will not harm - but they should be omitted, actually.
Ah o.k. Thought there is some magic 🧙♂️ behind. ha-card was/is fine. But :host is no html element/dom-path-selector, so most probably it was never necessary, but worked with it as well by chance.
Probably “:host” SHOULD be used only when it is the ONLY selector, like:
- entity: xxx
card_mod:
style: |
:host { ... }
BTW, “:host” as a selector may be seen in Code Inspector:
just to clarify what it represents.
Also, In my first posts I used to use this construction:
element:
$:
element:
$: |
element {...}
which will work but not optimal - see this.
Later I posted all styles with an optimized code (also, some old post were revised too).
Yes and no. :host is only a html pseudo class (as :after, etc.) not a dom structure element. So you can put styles for the shadow root in total.
But it is not there to derive the path as with (real) element in the html-tree.
Is there a way to use an if/else statement within CSS? Trying to get this to work:
[[[return `Status: <br><span style="color: lime;">{% if states('switch.pool_robot') ==='on' %} Cleaning {% else %} Sleeping {% endif %}</span>`]]]
It works fine with ${states[‘switch.pool_robot’].state}, but I’d rather it say Cleaning than just “on”, which is the true state.
Use search here for “{% if states(” string.
Got it!
[[[ if (entity.state === 'on') return `Status: <br><span style="color: lime;">Cleaning</span>`; return `Status: <br><span style="color: lime;">Sleeping</span>`; ]]]
still using that on various places. But not sure how to do without:
type: custom:mod-card
card_mod:
style: |
:host {
--stack-card-margin: 0px;
}
card:
type: vertical-stack
cards:
and likewise:
- type: custom:mod-card
card_mod:
style: |
:host {
--grid-card-gap: 0px;
}
card:
type: grid
on a badge:
- entity: person.marijn
card_mod:
style: |
:host {
--ha-label-badge-label-color: black;
{% set zones = states.zone|map(attribute='name')|list %}
{% set id = config.entity.split('.')[1] %}
{% set activity = states('sensor.' ~ id ~ '_activity') %}
{% set cc = state_attr('sensor.' ~ id ~ '_geocoded_location','ISO Country Code')|lower %}
{% if cc and cc != 'nl' %}
--label-badge-red: white;
{% elif is_state(config.entity,'home') %}
--label-badge-red: green;
--ha-label-badge-label-color: gold;
{% elif 'bij' in states(config.entity) %}
--label-badge-red: gold;
{% elif activity in ['Automotive','Cycling','Walking'] or
states(config.entity) in zones %}
--label-badge-red: mediumslateblue
{% else %}
--label-badge-red: #636B75;
{% endif %}
}
on an include filter in auto-entities:
include:
- attributes: {device_class: battery}
options:
secondary_info: last-updated
style: |
:host {
--card-mod-icon-color: {% if states(config.entity)|int(-1) < 30 %}red
{% elif states(config.entity)|int(-1) < 60 %}orange
{%else%}green
{%endif%};
}
and, eg on a plain entity:
- entity: binary_sensor.backups_stale
card_mod:
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'off' %} green
{% else %} red
{% endif %}
and even worse:
- entity: sensor.backup_state
card_mod:
style: |
:host {
--card-mod-icon:
{% if states(config.entity) == 'backed_up' %} mdi:check-circle
{% else %} mdi:alert-circle
{% endif %};
--paper-item-icon-color:
{% if states(config.entity) == 'backed_up' %} green
{% else %} red
{% endif %};
}
…
could you help me fix this, so I dont need the :host?
would be awesome,
You need :host there. And you are assigning things for :host. That is fne. I only wanted to address, that afaik we don’t need the :host in the path example above. and/or wanted to know if there is some unknown hidden magic behind it otherwise.
1 Like