I propose you to use a bar-card instead)))
Vertical, no icon, indicator, state and name.
Even you may animate the process of filling the tank - see my example (1st post → link at the bottom → styles for bar-card).
I am trying to hide the icon and entity name of my entity card, but it doesn’t do anything.
the ha-card part is working.
type: entities
style: |
ha-card {
background-color: transparent !important;
box-shadow: none !important;
}
.info {
display: none;
}
entities:
- entity: sensor.calculation
title: "test"
Hello,
i have a question. Can i remove a margin at an element? I removed the icon from an entity in an entities card, but now there is a margin on the left of 16px. I tried this but it doesn´t change anything:
card_mod:
style:
hui-generic-entity-row:
$: |
.info {
margin-left: 0px;
}
state-badge {
display: none;
}
Thanks for the help.
Thanks Ildar. I have tried combinations of the bar-card and button-card and it is very, very messy. You also do not have much freedom if all the tanks are not the same size and in the same plane.
If I can get the image elements in picture-elements to stretch, then I can put any size of tank anywhere. I made up this example just to explain what I am trying to do. My actual card is much more complex.
I am sure the problem is I am not using the correct CSS element or it is hidden under that shadow-root blanket of CSS magic. I have read everything I could find on this and I am 100% convinced it is my lack of CSS skills that is holding me back here.
If it is due to the element being in a shadowroot (sorry I really don’t know what I am talking about), how do I need to address it? Do I still use :host, or something else?
Sorry - I hope I do not sound rude.
@thomasloven can you confirm how card-mod can access the height inside the image element?
My edit did work, when i opened it in another browser.
The top one (End) has the edit, but the bottom one (Remaining) doesn´t. You can see it has a margin on left and right.
Thanks for the response.
Try this instead
type: entities
entities:
- type: buttons
card_mod:
style:
hui-buttons-base$:
ha-chip$: |
.mdc-chip__text::before {
content: "{{states('sensor.elektra_kosten_totaal')}}";
}
entities:
- entity: sensor.elektra_kosten_totaal
icon: mdi:lightning-bolt
show_name: false
show_icon: true
Any Card-mod gurus able to help me on this? I’m trying to target this state-switch <div> to set overflow: visible so that the background colour/image can ‘escape’.
This is what it currently looks like:
This is the desired look:
This is the <div> I can target with overflow: visible to make it work under styles #root {}:
I’ve attempted to wrap the state-switch-card within a custom:mod-card but I’m not sure if this is the correct approach?
thanks!
YAML
- type: custom:stack-in-card
view_layout:
grid-area: main1
justify-self: middle
show:
mediaquery: '(min-width: 600px)'
card_mod:
style: |
#root {
overflow: visible !important;
}
:host {
margin-top: -300px !important;
padding-top: 300px !important;
overflow: visible !important;
margin-left: -4px !important;
}
ha-card {
background-color: rgba(0,0,0,0) !important;
backdrop-filter: blur(0px) !important;
border-radius: 30px 30px 30px 30px !important;
box-shadow: none !important;
overflow: visible !important;
}
cards:
- type: custom:mod-card
card:
type: custom:state-switch
entity: hash
transition: slide-left
transition_time: 500
view_layout:
grid-area: main1
states:
kitchen:
type: custom:layout-card
layout_type: grid
view_layout:
grid-area: main1
layout:
grid-template-columns: auto 300px 300px auto
grid-template-rows: 1fr
cards:
- type: custom:mini-media-player
Is it possible to center all of these entities?
Im using multiple-entity-row
type: entities
entities:
- entity: sensor.nordpool_kwh_se3_sek_3_095_0
type: custom:multiple-entity-row
icon: none
name: false
state_header: Spotpris
entities:
- entity: sensor.pool_heater_power
format: precision0
name: Förbr/nu
unit: watt
- entity: sensor.daily_energy_peak
format: precision2
name: Förbr/idag
- entity: sensor.monthly_energy_peak
format: precision2
name: Förbr/mån
I just can’t cope with the scrollbar.
I try to remove it by making it wider. I change the width in the inspector and it works. But I can’t figure out where my mistake is.
Inspector path:
/html/body/home-assistant//home-assistant-main//app-drawer-layout/partial-panel-resolver/ha-panel-lovelace//hui-root//ha-app-layout/div/hui-view/hui-masonry-view//div/div[2]/hui-vertical-stack-card//div/hui-entities-card//ha-card/div/div[3]/hui-element//hui-horizontal-stack-card//div/mod-card[2]//ha-card/hui-entities-card//ha-card/div/div/hui-buttons-row//hui-buttons-base//div
My code:
YAML
- type: 'custom:hui-element'
card_type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: entities
entities:
- entity: input_select.nachalo_stirki
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
card_mod:
style: |
ha-card {
box-shadow: none;
}
- type: custom:mod-card
card:
type: entities
entities:
- type: buttons
entities:
- entity: automation.wm_start_auto
state_color: true
icon: 'mdi:washing-machine-alert'
name: Запустить по расписанию
tap_action:
action: call-service
service: automation.toggle
service_data:
entity_id: automation.wm_start_auto
card_mod:
style:
hui-buttons-row $ hui-buttons-base $: |
.ha-scrollbar {
width: 130% !important;
}
card_mod:
style: |
ha-card {
box-shadow: none;
}
What is now:
What I want to get:
I would be grateful for any help and / or any recommendations for improving the code.
Perhaps it would be more correct to change the width of the column of a horizontal stack, for example, in a ratio of 40/60%?
Also I want to resize all the icon size separate, but I cant get it to work. Any tips how and where to put the card-mod is appreciated!
My code:
entity: sensor.nibe_bt50_room_temp_s1
icon: none
type: custom:multiple-entity-row
name: false
state_header: Inne
format: precision1
entities:
- entity: alarm_control_panel.verisure_alarm
style:
hui-generic-entity-row:
$: |
state-badge {
--mdc-icon-size: 50px;
}
format: precision1
icon: true
name: false
state_color: true
- entity: binary_sensor.all_doors
name: false
icon: true
state_color: true
hide_if: 'on'
- entity: binary_sensor.garageport_status_door
name: false
icon: true
state_color: true
hide_if: 'on'
- entity: sensor.nibe_bt1_outdoor_temperature
format: precision1
name: Ute
Create a small code snippet describing your case and post here.
Currently it is hard to understand the problem w/o seeing the code.
The first thought:
Why using hui-element?
The only case is “use horizontal stack inside Entities card”.
But in this case the left card will be not aligned with respect to other entity rows:
type: entities
entities:
- sun.sun
- type: custom:hui-element
card_type: horizontal-stack
...
Wrong style.
Styles for buttons described here.
Should be:
- type: buttons
entities:
- entity: automation.test
...
card_mod:
style:
hui-buttons-base $: |
.ha-scrollbar {
width: 130% !important;
}
And the total code is (assuming that the stack is placed inside Entities card):
type: entities
entities:
- sun.sun
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: entities
entities:
- entity: input_select.test_value
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
card_mod:
style: |
ha-card {
box-shadow: none;
}
- type: entities
entities:
- type: buttons
entities:
- entity: automation.test
state_color: true
icon: mdi:washing-machine-alert
name: Запустить по расписанию
tap_action:
action: call-service
service: automation.toggle
service_data:
entity_id: automation.test
card_mod:
style:
hui-buttons-base $: |
.ha-scrollbar {
width: 130% !important;
}
card_mod:
style: |
ha-card {
box-shadow: none;
}
This variant looks more aligned:
type: entities
entities:
- sun.sun
- type: custom:stack-in-card
mode: horizontal
card_mod:
style:
hui-horizontal-stack-card $: |
div#root :first-child {
width: 45%;
flex: unset;
}
.: |
ha-card {
box-shadow: none;
}
cards:
- type: entities
entities:
- entity: input_select.test_value
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.: |
ha-paper-dropdown-menu {
margin-left: 8px !important;
}
card_mod:
style: |
.card-content {
padding: 0px;
}
- type: entities
entities:
- type: buttons
entities:
- entity: automation.test
state_color: true
icon: mdi:washing-machine-alert
name: Запустить по расписанию
tap_action:
action: call-service
service: automation.toggle
service_data:
entity_id: automation.test
card_mod:
style:
hui-buttons-base $: |
.ha-scrollbar {
justify-content: flex-end;
padding-right: 0px !important;
}
.ha-scrollbar ha-chip {
padding-right: 0px ;
}
card_mod:
style: |
.card-content {
padding: 0px;
padding-top: 4px;
}
@Pelican
Check this:
type: vertical-stack
cards:
- type: entities
entities:
- entity: input_number.test_number
name: height
- type: picture-elements
style: |
ha-card {
--image-height: {{states('input_number.test_number')|int}};
}
elements:
- type: image
image: /local/images/blue.jpg
style:
transform-origin: left bottom
left: 110px
top: 439px
width: 82px
height: 1px
transform: translate(-50%,-50%) scale(1,var(--image-height))
image: /local/images/tank.png
BUT - I gonna disappoint you - the image elements do not keep the same position with respect to the main image because the main image is scaled automatically dependingly on the card size! That means that the water will be in the tank only if the card’s size is constant.
Here is a case when the card’s size is changed:
And specifying positions & sizes in “%” does not help.
1 Like
@Ildar_Gabdullin you are a genius! Thank you very much.
It works perfectly. The masks are made with the same width as the main image and I position them at full width, so they scale perfectly. My final solution ended up making the main image “full” and the masks look “empty”. I position the masks at some % from top of the main image and scale them down according to the depth sensor. It also works on my phone.
The sensor values have to be made to be a percentage either in the sensor integration (ESPHome in this case) or in the card.
I believe this is the best solution for showing tank levels and I can’t thank you enough for your help.
So to be complete, here is the yaml:
- type: picture-elements
image: /local/background_image.png
card_mod:
style: |
ha-card {
--mask1-height: {{states('sensor.level1')|int}};
--mask2-height: {{states('sensor.level2')|int}};
}
elements:
- type: image
image: /local/mask1.png
style:
top: 0%
width: 100%
height: 1px
transform: translate(0%,0%) scale(1,var(--mask1-height))
- type: image
image: /local/mask1.png
style:
top: 0%
width: 100%
height: 1px
transform: translate(0%,0%) scale(1,var(--mask2-height))
But in your example the top = 0.
IMHO the most tricky part is to calculate top position of the image…
The images must keep relative positions after resizing of the window.
You are right. I am applying it in a few different scenarios and the top may not always be at 0. Here is what the first application looks like:
The aerator and (animated) bubbles are simple SVGs elements. Mask1 overlays the bubbles, so the bubble level is always right. I have some other applications where the top levels will not be the same.
You are 100% correct in that the top position is the hardest, but if all your masks have the same width it becomes a lot easier.
Do you specify “top” in px or % ?
I used % for the tops. Only px I used was for the mask height.
Please post a sample code for calculating “top”.