I almost do not use markdown card in my setup.
Only as a kind of caption for test cards like this:
It is very sad that some stock functionality is buggy.
It is very sad that some stock functionality is buggy.
1 Like
Hi, Thomas, may be I did not express my thought clearly - now with HA 2021.6.5 errors are occurred when using "style" with the ":host":
type: entities
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
style: |
:host {
color: red;
}
The code works but the HA editor does not allow to save changes.
Could be a bug in HA, may be?
Found one more issue with "card-mod" - be careful.
Probably, it is a bug (or a feature) of HA frontend editor.
- Create an Entities card with
card-mod:
type: entities
entities:
- type: custom:multiple-entity-row
card_mod:
style: |
:host {
color: red;
}
entity: sun.sun
entities:
- entity: sun.sun
- entity: sun.sun
- type: custom:multiple-entity-row
card_mod:
style: |
:host {
color: red;
}
entity: sun.sun
entities:
- entity: sun.sun
- entity: sun.sun
Looks fine in the HA frontend editor:
-
Save the card.
-
Open the card in the HA frontend editor.
-
Remove some row using UI editor - see that red color style is not working:
-
The saved card is w/o
"card-mod"- the HA frontend editor removed the"card-mod"code:
type: entities
entities:
- type: custom:multiple-entity-row
entity: sun.sun
entities:
- entity: sun.sun
- entity: sun.sun
This happens not with "multiple-entity-row" only - it happens with simple entity rows too.
So, do not edit the card using UI editor.
this might be a long shot, but since the custom-card with the āissueā I have with it seems abandoned, please let me ask here:
can we style the position of the title of these shutter cards, which now all seem randomly aligned above the shutter image. Card option is set to 'top. but other than that, the card doesnt offer styling options:
If at all possible, Id like to either outline all cards Left, or, if not possible center them all. Right now, I dont understand what isās doingā¦
thanks for having a look
1 Like
Hi. Iām working on a theme in a āNeuromorphic styleā
Iām able to customize elements but only in a cards, now i wanna move config to theme file and iām searching for a help, because every try ends as a failure. Below images as it look in cards configs, and link to github with a working code.
https://github.com/maskaz/HA-Neuromorphic
Thanks and regards
2 Likes
Awesome! Is it possible change the icon for the badges at the top of dashboards using this? I cannot find anything.
Added some further investigations:
Why is
type: button
card_mod:
style: |
:host {
--card-mod-icon: mdi:bed
}
or
type: horizontal-stack
cards:
- type: button
card_mod:
style: |
:host {
--card-mod-icon: mdi:bed;
}
only working sometimes, after roundtrips, reload of whatever and only within edit-more/edit popup?
Only a change in the editor (e.g. add remove indent, close/open editor ā¦) takes the changes into account and changes the icon. Is this only possible this way or a known bug/limitation?
I canāt tell you that but you can change the iconās colour. You might be able to iterate on that but I think youāll be better off applying your icons using a template (binary) sensor instead. That way, the icon will change anywhere you use the sensor and you donāt need to duplicate the work.
Hi Marius, have a look, played with CSS a little:
type: custom:shutter-card
card_mod:
style: |
ha-card {
--ha-card-background: rgb(168,240,255);
--ha-card-header-color: black;
--ha-card-header-font-size: 16px;
--ha-card-border-radius: 8px;
}
.card-header {
background-color: rgb(190,212,216);
border-radius: 8px 8px 0px 0px;
text-align: right;
}
.sc-shutter .sc-shutter-top {
display: flex;
flex-direction: row;
}
.sc-shutter .sc-shutter-top .sc-shutter-label {
flex: 1 1 75%;
text-align: left;
}
.sc-shutter .sc-shutter-top .sc-shutter-position {
text-align: center;
}
title: My shutters
entities:
- entity: cover.left_living_shutter
name: Left shutter
buttons_position: left
title_position: top
- entity: cover.bedroom_shutter
name: Right shutter
buttons_position: left
title_position: top
Another example:
type: custom:stack-in-card
mode: horizontal
keep:
background: false
box_shadow: false
margin: false
outer_padding: false
border_radius: false
cards:
- type: custom:shutter-card
card_mod:
style: |
ha-card {
box-shadow: none;
}
.card-header {
text-align: center;
}
.sc-shutter .sc-shutter-top {
display: flex;
flex-direction: row;
}
.sc-shutter .sc-shutter-top .sc-shutter-label {
flex: 1 1 75%;
text-align: center;
font-size: var(--mdc-typography-body1-font-size);
}
.sc-shutter .sc-shutter-top .sc-shutter-position {
text-align: center;
}
title: Bedroom
entities:
- entity: cover.left_living_shutter
name: Left
buttons_position: left
title_position: top
- entity: cover.bedroom_shutter
name: Right
buttons_position: left
title_position: top
- type: custom:shutter-card
title: Kitchen
entities:
- entity: cover.left_living_shutter
name: Left
buttons_position: left
title_position: top
- entity: cover.bedroom_shutter
name: Right
buttons_position: left
title_position: top
It is strange , but styling the 1st card affects on the 2nd card tooā¦
1 Like
thank you Ildar.
though some positioning is possible like that, it seem impossible to have the name of the individual screen align horizontally with the icons of the up/downā¦
Ive also tried a little hack, by using name: 'Name ' so the spaces would cause some horizontal shift, but apparently the spaces are trimmed ;-(
and about the first mod being applied to all cards, I hadnāt noticed in y card setup, because I have a header anchor like on the first:
<<: &header
card_mod:
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
font-weight: bold;
margin: 0px 0px 8px 0px;
}
and use it on all others with:
- type: custom:shutter-card
title: Screens
<<: *header
so it applied already 
I now notice the effect though too, and I believe it is what Thomas wrote before, but which is no longer in the documentation somehowā¦
the stacks are nice! didnt think of that, very clever indeed
Imho, left & right shutters are better to place horizontallyā¦ More intuitive.
quite. This:
- type: custom:stack-in-card
mode: horizontal
title: Screens
<<: *header
# keep:
# background: false
# box_shadow: false
# margin: false
# outer_padding: false
# border_radius: false
cards:
- type: custom:shutter-card
card_mod:
style: |
ha-card {
box-shadow: none;
}
entities:
- entity: cover.screen_keuken
name: Keuken
- type: custom:shutter-card
entities:
- entity: cover.raamverduistering_stookhok
name: Stookhok
does it also, no need for the keep object in the stack-in-card?
on mobile this is a really cut-off experienced though,
and when tilting to landscape mode, things get even worseā¦
iPhone 5S:
- portrait - cut right side
- landscape - OK
Try using state-switch dependingly on screen size.
+1 to that suggestion. Works a treat.
ha, glad you like the state-switch card, so new to it and already suggesting it to me 
not really sure what you suggest here? if in portrait mode, use the stack-in-card horizontal mode, if in landscape, use single card config? (I have regular 2 columns in landscape)
or
if desktop, use stack-in-card, if mobile, use not stacked cards maybe even better, given the fact the cards are cut-off right sided on mobile no matter the view
trying this:
- type: custom:state-switch
entity: deviceID
states:
'bredacted devices Safari9':
<<: &desktop-view
type: custom:stack-in-card
mode: horizontal
title: Screens
<<: *header
keep:
background: false
box_shadow: false
margin: false
outer_padding: false
border_radius: false
cards:
- type: custom:shutter-card
card_mod:
style: |
ha-card {
box-shadow: none;
}
entities:
- entity: cover.screen_keuken
name: Keuken
- type: custom:shutter-card
entities:
- entity: cover.raamverduistering_stookhok
name: Stookhok
'6redacted devices chrome0a':
<<: *desktop-view
default: # for all other device-id's including mobile
type: custom:shutter-card
title: Screens
<<: *header
entities:
- entity: cover.screen_keuken
name: Keuken
- entity: cover.raamverduistering_stookhok
name: Stookhok
I cant get it to work, mobile still shows the horizontal stackā¦ (will move this to state-card if the issue remains)
You can set it for screen pixels rather than user agent. I can show an example tomorrow if you likeā¦ lidar helped me with a couple of cards a while ago ane I ended up using bothā¦ one for iPad in Landscape mode and one for my PCā¦ works really well.
Marius, David - managed to display the shutters on iPhone 5S for portrait & landscape orientations - check here: š¹ state-switch - conditional card on steroids - #92 by Ildar_Gabdullin
1 Like
Here is my setup
style: |
.sc-shutter-label {
font-size: 14px;
padding-left: 20px;
}
.card-header {
padding-bottom: 0px;
}
.sc-shutter-middle {
margin-left:auto !important;
margin-right:auto !important;
padding-bottom: 10px;
padding-top: 20px
}
.sc-shutter:first-child .sc-shutter-middle {
padding-top: 0px
}
There is something weird with this shutter card - it causes glitches.
- Create 1 new view.
- Add a shutter-card with some styles for
"ha-card". - Add one more shutter-card w/o style.
- The 2nd card will have same style - which is WRONG.
- title: test 2
path: test-2
badges: []
cards:
- type: custom:shutter-card
title: no style
entities:
- entity: cover.left_living_shutter
name: Left shutter
buttons_position: left
title_position: top
- entity: cover.bedroom_shutter
name: Right shutter
buttons_position: left
title_position: top
- type: custom:shutter-card
card_mod:
style: |
ha-card {
--ha-card-background: rgb(168,240,255);
--ha-card-header-color: black;
--ha-card-header-font-size: 16px;
--ha-card-border-radius: 8px;
}
title: My shutters (+style)
entities:
- entity: cover.left_living_shutter
name: Left shutter
buttons_position: left
title_position: top
- entity: cover.bedroom_shutter
name: Right shutter
buttons_position: left
title_position: top
- Move the 2nd card to another view.
- The 2nd card will be displayed without style - which is RIGHT.
The same glitch was mentioned earlier - it was about 2 cards inside "vertical-stack":
Iām looking for help with sizing and placement of icons. I have a panel in the garage with this
Iām looking to get the garage door icon centered vertically and the up/down buttons as well. Ideally the up/down buttons could come further in from the right hand edge as well. Any advice?
Bonus questionā¦ I have another card just the same for āopenā which is red. Is there any way to have just one card that changes colour based on the state?
Here is the code
type: custom:auto-entities
card:
type: entities
state_color: true
card_mod:
style: |
ha-card {
--ha-card-background: green;
color: white;
font-family: DB Sans Cond;
line-height: 2.2;
--card-mod-icon-color: white;
}
:host {
--mdc-icon-size: 4vw;
font-size: 4vw;
}
filter:
include:
- entity_id: cover.garage_car_door_state
state: closed
exclude: []
sort:
method: friendly_name
show_empty: false