Nice looking))
yes, happy with it, next challenge is luring: widen the markdown (see the mod-card that works, but card-mod says I am doing it wrong…
# - type: custom:mod-card
# card_mod:
# style: |
# ha-card {
# margin: -8px -16px -16px -16px;
# }
# card:
- type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card {
box-shadow: none;
}
.card-content {
margin: -8px -16px -16px -16px;
}
content: >
this should be the easiest:
- type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0px -16px -16px -16px;
}
but often makes the card go beyond its borders…
Marius, what do you have & what do you want?
In pics.
OK,
1 . Take the code with your attempts to change an icon’s color (there is a ready example in the post I told you about earlier).
2 . Find a code for rotating an icon inside Entities card.
3 . Put these codes together.
…
5 . PROFIT!
entities with an include:
type: entities
title: Raspberry Pi4
card_mod:
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
entities:
- binary_sensor.ha_rpi4
- lots of other things
- !include /config/lovelace/includes/include_rpi4_graph.yaml # <----- this is the include
which starts with
#type: custom:mod-card
#card_mod:
# style:
# .: |
# ha-card {
# box-shadow: none;
# margin: 0px -16px -16px -16px;
# }
#card:
type: custom:hui-element
card_type: picture-elements
image: /local/homeassistant/homeassistant.png
card_mod:
style:
.: |
ha-card {
box-shadow: none;
}
'#root>bar-card':
$: |
adding the default margin: 0px -16px -16px -16px;
renders ok on first refresh but after a reload it makes the card overflow :
using the mod-card:
type: custom:mod-card
card_mod:
style:
.: |
ha-card {
box-shadow: none;
margin: 0px -16px -16px -16px;
}
card:
type: picture-elements
image: /local/homeassistant/homeassistant.png
card_mod:
style:
'#root>bar-card':
fixes it permanently like I want it and within the regular card borders:
(but throws the warning ‘mod-card should NEVER be used with a card that already has a ha-card element, such as picture-elements’ …
ive also tried it as stack-in-card, and it makes the bottom picture use the full width, but the fold-entity-row’s are horrible (way too wide):
Meanwhile - how to scale an iframe content (results may depend on the page):
type: vertical-stack
cards:
- type: entities
entities:
- entity: input_number.test_level_1
name: scale
- type: iframe
url: >-
https://fahrplan.oebb.at/bin/stboard.exe/dn?L=vs_sq&mMode=run&monitorCMSFrames=true&cfgfile=FLORIDSDOR_1192101_534633483&start=yes
aspect_ratio: 100%
card_mod:
style: |
div#root iframe {
transform: scale({{states("input_number.test_level_1")|float / 100|float}});
transform-origin: 0 0;
width: 100000px;
height: 100000px;
}
More examples are described here.
2 Likes
Probably because you are using fold-entity-row inside stack-in-card - which is WRONG since you must use it inside Entities card.
My proposals are:
- Always use
stack-in-cardas a root element with specifiedkeepoptions (make a decluttering template). - Place inside this stack any of these elements:
- entities card (remove top and/or bottom padding if needed - make a decluttering template);
- bar-card, glance-card etc;
- any graph-card card;
- internal stack-in-card with specified
keepoptions (for example, the outer stack hasouter-padding: falseand the internal stack hasouter-padding: true) + any inserted cards mentioned above; - entities card with ONE entity row -
fold-entity-row(make a decluttering template) - with expanded.card-content(padding: 0px 0px 0px 0px) and shiftedhead(margin-left/right: 16px) - and then insert one morestack-in-card(with appropriatekeepoptions) as one ofentities.
Play with it - It will worth it.
1 Like
YES! these are the magic words, how could I have missed that… and its way easier than you suggest above 
moving the folds under the top entities card did the trick… (well, and a tiny extra box-shadow mod on the bottom include itself:
type: custom:stack-in-card
title: Raspberry Pi4
keep:
background: true
card_mod:
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
cards:
- type: entities
entities:
- binary_sensor.ha_rpi4
- sensor.cpu_temp_read
- type: custom:multiple-entity-row
entity: sensor.argon_one_addon_fan_speed
name: Argon fan
secondary_info: last-changed
card_mod:
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
{% set speed = states(config.entity)|int(default=0) %}
{% set mapper = {0:'green',1:'darkgreen',3:'orange',33:'orangered',66:'maroon'} %}
color: {{ mapper[speed] if speed in mapper else 'red'}};
animation:
{% if speed != 0 -%}
{% set mapper = {1:'4',3:'3',33:'2',66:'1'} %}
{% set rotation = mapper[speed] if speed in mapper else '0.3' %}
{{'rotation ' + rotation +'s linear infinite'}}
{% else %} null
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
entities:
- attribute: Temperature C
name: Temp
unit: '°C'
- attribute: mode
name: Mode
- attribute: fan level
name: Level
- type: custom:fold-entity-row
head:
type: section
label: Last boot
padding: 0
entities:
- entity: sensor.last_boot_phrase
name: Last boot
- entity: sensor.last_boot_date_time
name: Last boot date
- sensor.last_boot
- type: custom:fold-entity-row
head:
type: section
label: System monitor
padding: 0
entities:
- sensor.processor_temperature
- sensor.processor_use
- sensor.disk_free_home
- sensor.disk_use_home
- sensor.disk_use_percent_home
- sensor.memory_free
- sensor.memory_use
- sensor.memory_use_percent
- sensor.swap_use
- sensor.swap_use_percent
- sensor.swap_free
- sensor.ipv4_address_eth0
- sensor.external_ip
- !include /config/lovelace/includes/include_rpi4_graph.yaml
though as you can see there is still a returning space above the blue card. When I refresh that is gone, do another reload in the browser and its back again… how can I prevent that?
believed I cheered to soon, al sorts of margin issues arise when using the stack-in-card out of the box. Guess Ill live with the blue card as a stand alone card, and have an entities card back…
Try to apply the rotation style directly to the state-badge element.
Remove box-shadow from the Entities card.
Also specify keep::margin=false for the stack.
Do not specify margins for the embedded picture-elements-card.
Do this :
When you make margins negative , you may overlap another card…
yes, that works and shifted it a bit:
- type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -16px 0px 0px 0px;
}
not sure what you suggest here:
replace:
card_mod:
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
with
card_mod:
style:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
?
I have none set now.
No,
hui-generic-entity-row:
$: |
state-badge {
...
thanks! (set it to 66% for testing purposes 
)
2 Likes
Good. As I wrote before, it is a good idea to create decluttering cards for a stack, entities inside stack, folded stack. Then building a card becomes like a building a house from ready bricks.
Hello.
Is it possible to intergrade 5 buttons inline tougher with slider to get the result as shown on right side of the image?
PROFIT - I’ll never profit aside from a greater deal of acceptance from the domestic minister for home affairs 
Thanks for the pointers, but I know I’m still doing something wrong here - I get how to make the icon go green, but I have no idea where I’m going wrong with the rotation. It’s definitely a lack of skill issue on my part 
it works well with an entities card using the below code block,
type: entities
entities:
- entity: switch.night_light
icon: mdi:fan
style:
hui-generic-entity-row:
$: |
state-badge {
{% if is_state('switch.night_light', 'on') %}
color: green;
animation: rotation 1.5s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
but when I move it to a glance card, it just shows a yellow state icon - I know you said to put the two code blocks together, but I know I’ve done something wrong…
type: glance
entities:
- entity: switch.night_light
icon: mdi:fan
tap_action:
action: toggle
show_name: false
card_mod:
style: |
ha-card {
--paper-item-icon-active-color: green;
}
card-mod-glance:
$: |
state-badge {
{% if is_state('switch.night_light', 'on' %}
color: green;
animation: rotation 1.5s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
1 Like
had this footer mod:
.header-footer.footer {
--mdc-icon-size: 30px;
padding-bottom: 10px;
font-weight: bold;
font-size: 20px;
color: orange;
}
but on latest dev that no longer works, showing:
latest frontend update has a ‘chip’ change I suppose has to do with this, but I cant find the correct setting to again center these chip icons, and colorize and resize the middle ‘My’…
Wrong. Your code is to make ALL icons to be green by changing a variable --paper-item-icon-active-color.
You should use a code to change a color by using DOM navigation for all entities or some entity (YOUR case since you want to rotate it next) - see again this topic:
type: glance
entities:
- entity: sensor.cleargrass_1_co2
card_mod:
style: |
state-badge {
color: red;
}
- entity: sensor.cleargrass_1_co2
Then regarding rotation:
What is that? Where did you take it?
Use same method as for entities - but apply it as the style for a changing color.
type: glance
entities:
- entity: sensor.cleargrass_1_co2
card_mod:
style: |
state-badge {
color: red;
animation: rotation 0.5s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
- entity: sensor.cleargrass_1_co2
Seriously - you have got ready “bricks” of card-mod examples - and your task is just to combine them properly. This is not a matter of “knowing CSS” - basically this is a matter of “learning”, if talking about simple cases.
The code for the footer plz…
On my setup all these footer/header examples still work.
I see, you are talking about dev HA version… Haven’t seen it yet.
Can someone give me a hint how I can add margin to the following card to increase the spacing between the value and the unit:
- entity: input_number.bedroom_bedappliances_maximumruntime
icon: mdi:alarm
type: custom:numberbox-card
border: false
name: false
I’ve just spent an hour if not two trying different options.
My dom tree looks like this:
I essentially need to add
margin-left: 10px
to
span.cur-unit
It’s 2.30am, I’ll 
, my brain is dead 
some oddity. using a mod on an embedded markdown card
- type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card {
margin: 8px 0px -16px -0px;
font-size: 20px;
box-shadow: none;
}
regularly changes the full card to use the size setting on the full entities card it is used in (except for the header). But including even the text in the fold-entity-row header, and fold itself:
- type: entities
title: Weather quick view
card_mod: &header
style: |
.card-header {
background-color: var(--background-color-off);
color: var(--text-color-off);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
entities:
badges:
- sensor.weather_animated_icon
- sensor.badge_wind_compass
- sensor.wind_compass
- sensor.wind_bft
- type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card {
margin: 8px 0px -16px -0px;
font-size: 20px;
box-shadow: none;
}
content: >
**Weersverwachting:**
Voor vandaag, {{states('sensor.vandaag')}}:
{{states('sensor.weather_animated_icon')}}, {{states('sensor.dark_sky_temperature')}}°
<font color= {{states('sensor.temperature_color_name')}}>{{states('sensor.dark_sky_daily_summary')}}</font>
- type: custom:fold-entity-row
head:
type: section
label: Details
padding: 0
entities:
- sensor.temp_current
- sensor.mean_outdoor_temp
- sensor.buienradar_feel_temperature
- sensor.dark_sky_apparent_temperature
- sensor.real_feel_temp
as it should be
but:
a mere reload of the page then fixes it, but still seems odd this keeps happening on first loads for Safari, Chrome still shows the enlarged card. Someone spots anything incorrect?
edit
adding ‘.type-markdown’:
- type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card.type-markdown {
margin: 8px 0px -16px -0px;
font-size: 20px;
box-shadow: none;
}
seems to fix it. Will check if that is permanent. Still want to understand why this is happening though…