1st post -> link at the bottom -> post with styles -> post for Entity card
Thanks for that, I was just about to install Custom Stack In Card via HACS when I saw that Card-Mod had an update. I updated and it seems to work againā¦
dont think I found a post on the core Lovelace type: grid card above, so hereās my quest:
using
- type: grid
columns: 10
cards:
and a set of button cards, I get a nice horizontal row of small buttons, which I needā but unfortunately with gaps between the buttons.
I tried:
- type: custom:layout-card
layout_type: custom:horizontal-layout
layout:
width: 40
max_cols: 10
card_margin: 0px
margin: 0px
which comes close,
but this is bothered by the resizing (probably the fixed width) and the iPhone screen size. taking 1 or 2 buttons to the next line.
Grid auto-resizes nicely.
So, I want to card_mod the gap in the type: grid card to be 0px.
could anyone help me out doing so please?
thanks for having a look!
maybe:
- type: custom:stack-in-card
mode: horizontal
keep:
background: true
cards:
does just that, but then I would need yet another custom cardā¦
And why do you not stay with grid, e.g. inside a custom:vertical-stack-in-card (to have a ha-card) and then remove the gaps with card_mod?
Edit: Ah, o.k. last paragraph. I see.
that is exactly what I was askingā¦
btw I dont use the vertical-stack-in-card, had too many issues with that in the past
I always try an entities card first (can throw anything in an entities), or a core stack (either horizontal or vertical). Grid card is magic.
if nothing of these does what I need, I might resort to stack-in-card , but it always gives trouble when using fold-entity-rows and needs heavy card-modding in that situationā¦
but, I have to admit, it seems to be the easiest card for concatenating images/buttons in a single row.
though I very often see this happening:
first load after a lovelace refresh shows perfectly:
and a reload messes it up:
grr,
need to override that yet again with:
card_mod:
style: |
ha-card {
background-color: var(--background-color-off);
}
on the stack-in-cardā¦
Hm. Expected the the problem was only to have it without helpe-card around. If it is only the css, you are asking. The root inside grid-card has
grid-gap: var(--grid-card-gap, 8px);
Donāt get it both topics:
Core stack do not have ha-card to card-mod it. Have it?
And ācan throw anything in an entitiesā? Without lovelace-hui-element?
its easy to mod the contained cards.
nope, with hui-element, one of the most used cards in my config 
now, how to get to the .root in the type: grid card and set the grid-gap: 0px;
No, if those do not have ha-card and the contained card neither (like here grid), then you canāt. That was the topic and therefor I proposed
Just set it. Here with custom:vertical-stack-in-card as helper.
type: custom:vertical-stack-in-card
title: abc
card_mod:
style: |
:host { --grid-card-gap: 100px; }
cards:
- type: grid
Or (not so efficient):
type: custom:vertical-stack-in-card
title: abc
card_mod:
style:
hui-grid-card$: |
#root { grid-gap: 100px !important; }
cards:
- type: grid
1 Like
thanks, however that is not what I can use, since I need the mod to be set in the grid-card itself and need a mod-card for that, like
- type: custom:mod-card
card_mod:
style: |
:host {
grid-gap: 0px;
}
card:
type: grid
columns: 10
since the grid card doesnt have a ha-card element. This doesnāt work though.
this does !
- type: custom:mod-card
card_mod:
style:
hui-grid-card$: |
#root { grid-gap: 0px; }
card:
type: grid
columns: 10
also without the !important
Iām currenlty not sure, where is the node in your thoughts. The vertical-stack-in-card was an example. You can use whatever around the grid, as long as it brings an ha-card element to start card-modding. So yes, it will work, as long as you are using my examples and not elaborating whyever new ideas, which are of course not working. I showed two ways. Both are working with mod-card as well.
type: custom:mod-card
title: abc
card_mod:
style: |
:host { --grid-card-gap: 100px; }
card:
type: grid
and
type: custom:mod-card
title: abc
card_mod:
style:
hui-grid-card$: |
#root { grid-gap: 100px !important; }
card:
type: grid
BTW in first way, I am setting only the (existing, but not set) variable in host, which is then used later on.
Without such card around, you donāt have ha-card and it will not work.
well, I am doing that with a purpose, and have done so from the start. This is not the only grid card in the vertical-stack. I can not set it on the stack for that matter.
thats why I use mod-card.
I now see that:
- type: custom:mod-card
card_mod:
style: |
:host {
--grid-card-gap: 0px;
}
also works indeed.
no node, just exploring different options. of all of the options, this seems to be the most stable. SO thank you very much!
final solution, a perfectly adjusting row of 10 buttons, no gap, no box-shadow (set in the individual cards), and no peeking background color (as on the stack-in-card)
just found/realized we can do this on a regular horizontal-stack too:
type: custom:mod-card
card_mod:
style: |
:host {
--stack-card-margin: 0px;
}
card:
type: horizontal-stack
cards:
which is a mod Ive been looking for since a very long timeā¦ #TIL
this can replace a lot of other stuff in the config, and is so concise.
once you see it it is so obviousā¦
1 Like
Was wondering if anyone would be able to help me achieve something with slider-entity-row. Iām looking to change the appearance of the sliders from their original styling:
To something like this:
I imagine I would need to increase the height of both the foreground and background of the sliders, add a corner radius to both and change their colors. Maybe I could also make the handle completely transparent.
Any help would be appreciated!
What did you try until now? Show us your code and most probably, we can tell what can be improved or what is wrong until now.
I havenāt tried anything yet, I have very little CSS knowledge. I could probably figure a bit of it out, but not sure what each element is called in order to try modifying it.
To figure out what the elements are called, you can use the developper tools on your browser of choice. This will help you along as well.
1 Like
Ty! Going to see what I can figure out.
1 Like
Hey Ildar,
was this ever updated to use the options of Make graph colors themable by spacegaier Ā· Pull Request #10698 Ā· home-assistant/frontend Ā· GitHub ?
I was hoping to be able to easily do:
- type: history-graph
title: Gebruik actueel
card_mod:
class: class-header-margin
style: |
ha-card {
graph-color-1: gold;
graph-color-2: darkblue;
graph-color-3: lightblue;
}
hours_to_show: 24
refresh_interval: 30
entities:
- entity: sensor.zp_actuele_opbrengst
name: Zon
- entity: sensor.calculated_bruto_verbruik
name: Verbruik
- entity: sensor.netto_verbruik
name: Vermogen
but ofc this doesnt work yet. Before I try to make it work, please let me know if this is supported at all?
thx!