Iām trying to modify this card because in mobile view, right side is too wide and left side too narrow, so the left part doesnāt show the whole name and the left have too much space.
I tried to add flex-wrap: wrap in several places, it didnāt seem to have any effect.
Also to wrap each item from the shopping list, along with its checkbox into something that looks like a āchipā. This will allow putting a shopping list in a wider card while saving space (having more items visible before scrolling will be needed).
I used most of the card_mod tricks from here:
But it still didnāt help me get to the flex design I wantedā¦
Thought I would share how to use YAML anchors and card_mod as itās not immediately obvious, well it wasnāt for me! I wanted to colour the icons on a glance card to be dependant on the value.
Sometimes, for a reason I donāt understand, HA will expand the *ref_0 to the Anchor values rather than leave it as *ref_0, which kinda defeats the objective but mostly it leaves as is. This means you can change the code/colours without having to do it to every entity.
Hi, does anyone know, how to change the Tile-Background color?
When I select a color within the default options of the card,
Then the Tile Card does have a corresponding color when I hover the mouse ofer it:
I have implemented CardMod on some tiles, where the Icon Color should change based on the selected value.
For those cards, the background color of the tile is always the default āgreyā
this is my current card-mod config for the above card:
The ::after is the most important one to change as this is on the click. The hover::before is with a mouse hover so isnt so important for mobile at least
Opacity not needed if you only want to change the color.
Being very new to home assistant and being overwhelmed on how to add custom css with card-mod can i just ask what does the ā$ā represent in the code. I am trying to add a simple bottom border to my horizontal stack card but cant for the life of me work out how to do it as its inside a shadow dom and i keep seeing references to this ā$ā in a selector.
$ means the object is in a shadow root of another so here is the example:
i cant refer to .mdc-ripple-surface without entering the shadow root of mwc-ripple first.
Thanks for this, i think i am slowly getting my head around it. Just out of curiosity how would i target the container vertical which is part of a shadow root below. Its a mushroom template card. On a side note what is the selector you would need to use if you were going through more than 1 shadow root to target an element
Thank you so much for this, you have explained it really well and i think i actually get it.
One final thing, in the above example where i target mushroom-state-item$, how do i then style anything above it in the DOM tree for example ha-card? As mushroom-state-item$ is directly underneath the style in the yaml code if that makes sense.
Sure. There is a built in function for that in card mod.
So if you wanted to do both it would be with the .: |
This essentially brings you back to style: | but just keep in mind the indentation of this as it needs to be put in the same place as the other things you first put after style:
card_mod:
style:
mushroom-state-item$: |
.container {
outline: red solid 1px !important;
}
.: |
ha-card {
background: blue !important;
}
Thats fab thank you so much for your kind help. Youāve made it sound so easy it now makes sense.
I lied this is my final question it just came to my mind, is there a way say in a horizontal stack where you have 4 cards that you want to apply all the same styles to without having to use the card_mod parameter on every card?
Yes you can use yaml anchors like this. But often when you then save and reopen the full card mod code is added rather than the anchor. But if you just want to save copying the same code a bunch of times you can.
Hi,
I am trying to customise custom bar card. Looks like I am on the right track, but canāt get the indicator to move. I have swapped solid color bar with image and got stuck.
here is the code:
First i would post a version of this that doesnt immediately have bunch of errors due to indentation or duplicate statements:
after fixing the duplicate:
after fixing first indentation:
you should be able to easily move it just by using top, bottom, right, left. you can even use negative values, and i am pretty sure the position: relative; that you have on it isnt even required.
it now makes sense.
