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…
Mariusthvdb:
widen the markdown
Marius, what do you have & what do you want?
DrewXT:
this is the bit where I’m struggling with the syntax… it’s a bit beyond me, I can happily change the colour of an icon for a switch, but I can’t manage to get them changing colour or animated via styling
OK,there is a ready example in the post I told you about earlier ).code for rotating an icon inside Entities card .
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.
Always use stack-in-card as a root element with specified keep options (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 keep options (for example, the outer stack has outer-padding: false and the internal stack has outer-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 shifted head (margin-left/right: 16px) - and then insert one more stack-in-card (with appropriate keep options) as one of entities.
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.
box-shadow from the Entities card.keep::margin=false for the stack.
Do not specify margins for the embedded picture-elements-card.
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.
Mariusthvdb:
replace
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.
MartinAM
December 2, 2021, 9:22pm
2408
Hello.
DrewXT
December 2, 2021, 11:07pm
2409
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.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?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.
Mariusthvdb:
had this footer mod:
The code for the footer plz…all these footer/header examples still work.
Mariusthvdb:
latest dev
I see, you are talking about dev HA version… Haven’t seen it yet.
mateuszdrab
December 4, 2021, 2:38am
2413
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.
I essentially need to add
margin-left: 10px
to
span.cur-unit
It’s 2.30am, I’ll
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…
yes correct, HA new version. footer code is:
footer:
type: buttons
entities:
- entity: script.garage_lamellen_open
icon: mdi:arrow-up
# name: Open
- entity: script.garage_lamellen_my
name: My
show_icon: false
- entity: script.garage_lamellen_close
icon: mdi:arrow-down
# name: Close
for now Ive added an extra stack with custom buttons:
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:button-card
entity: script.garage_lamellen_open
icon: mdi:arrow-up
show_name: false
# name: Open
aspect_ratio: 3/1
card_mod:
style: |
ha-card {
box-shadow: none;
}
- type: custom:button-card
entity: script.garage_lamellen_my
name: My
show_icon: false
aspect_ratio: 3/1
styles:
card:
- color: orange
- box-shadow: none
name:
- font-weight: bold
- font-size: 40px
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: entity
haptic: light
hold_action:
action: more-info
haptic: light
- type: custom:button-card
entity: script.garage_lamellen_close
icon: mdi:arrow-down
show_name: false
# name: Open
aspect_ratio: 3/1
card_mod:
style: |
ha-card {
box-shadow: none;
}
to get what I had before:
)
, my brain is dead 
