And all this is less hack than
type: divider
style:
margin-top: 50px
background-color: transparent
(with or without margin for different/adjusted spaces)?
well, maybe not…
guess there are more ways to do the same. but, background: transparent, still has a background? with : none, there effectively is none.
anyways, thanks!
I used to use
icon: mdi:dummy
which worked.
Maybe they removed bank because it was redundant if any ‘dummy’ entry worked?
Could be, another person in the Community said he was using “mdi:null” all the time…
icon: ''
is shorterst…
and even
icon: none
or icon: 1
works. only thing that doesnt work is an empty spot there. Seems anything works, as long as it is Not in material design icons library
btw, for the Glance card gap, this is a bit shorter:
- entity: sun.sun
card_mod:
style: |
state-badge {
display: none;
}
:host div {
display: none;
}
not yet exactly sure why that would be, but since it takes less modding, I would presume it to be more efficient
I would love to hide the divider on this fold-entity-row however 
seems not to be described in the main post yet, so maybe explore that a bit:
consider this:
type: entities
title: Air quality dashboard
card_mod:
class: class-header-no-margin-no-color
style: |
.card-header {
background: {% set aqi = states('sensor.u_s_air_quality_index')|int(0) %}
{% if aqi <= 50 %} seagreen
{% elif aqi <= 100 %} gold
{% elif aqi <= 150 %} orange
{% elif aqi <= 200 %} crimson
{% elif aqi <= 300 %} purple
{% else %} maroon
{% endif %};
color: var(--text-color-off);
}
entities:
- type: custom:fold-entity-row
head:
type: section
label: AirVisual
card_mod: &label
style: |
.label {
margin-left: 0px;
}
padding: 0
entities:
which shows like
if you look closely, you’ll notice the divider peeking through the header color.
we did have a similar case before: 🔹 Card-mod - Add css styles to any lovelace card - #2725 by Ildar_Gabdullin however using that now does not hide the divider?
So, I’d love to set that to none, or at least transparent.
guess we should set the height to 0px?
- type: custom:fold-entity-row
card_mod:
style:
div#head hui-section-row $: |
.divider {
background-color: transparent;
}
is not successful though.
or
style:
div#head hui-section-row $: |
.divider {
height: 0px !important;
}
for that matter
Update and fix
duh… I thought it was as simple as:
- type: custom:fold-entity-row
head:
type: section
label: AirVisual
card_mod: &label
style: |
.label {
margin-left: 0px;
}
.divider {
height: 0px;
}
but now that makes the lable change position
so, in this case setting a transparent color is indeed better than not showing the element:
card_mod:
style: |
.label {
margin-left: 0px;
}
.divider {
background-color: transparent;
}
Tap / Press animation without manual helper?
Is there a option to play a animation of a button, entity (Mushroom etc.) after press?
I often have a script as a tap action and want to show a short animation that I can see something happens but I have no status changed of the entity.
Regards, Steffen
Hi,
is it possible to change the text color of an input text field through a value that is sent from Node-RED via “color” (or similar)?
From node Red i get this code in Debug “{”_msgid":“3f5d80faeb358d57”,“payload”:1676912276174,“topic”:"",“payload_msg”:“Wert außerhalb des möglichen Bereichs”,“color”:“red”}"
In Home Assitant if tried this Code, but it dont work.
type: entity
entity: input_text.status_luften
card_mod:
style: |
.value {
font-size: 20px !important;
color: var(–card-mod-status-luften-color);
}
variables:
card-mod-status-luften-color: ‘{{ state_attr(’‘input_text.status_luften’’, ‘‘color’’) }}’
guys i’m stuck i have a light-popup card and i want to stack it horizontal-stack how to remove this black background and reduce its area?
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
card_mod:
style:
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 50px;
top: 500px;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0.5);
--ha-card-background: rgba(0,0,0,0.5);
}
ha-dialog {
--vertical-align-dialog: center !important;
}
content:
type: horizontal-stack
cards:
- type: custom:light-popup-card
card_mod:
style: |
ha-card {
--ha-card-background: orange;
}
entity: light.sufit_salon
displayType: slider
hideIcon: false
hideState: false
sliderColoredByLight: false
fullscreen: false
borderRadius: 40px
brightnessWidth: 50px
brightnessHeight: 125px
sliderColor: "#d1b056"
sliderTrackColor: "#616261"
- type: custom:light-popup-card
entity: light.sufit_salon
displayType: slider
hideIcon: false
hideState: false
sliderColoredByLight: false
fullscreen: false
borderRadius: 40px
brightnessWidth: 100px
brightnessHeight: 250px
sliderColor: "#d1b056"
sliderTrackColor: "#616261"
if i place card one at a time, without stack everything is ok
hey Ildar, this is super nice.
can you help me out find the right path and margin settings for the aria-selected='true' tab, so we can do what we can in the main HA menubar:
paper-tab[aria-selected=true] {
background-color: rgba(var(--primary),0.3);
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
}
especially concerned for the size, though background would also be a nicety
active icon size:
I did find this to work:
card_mod:
style:
tabbed-card $:
mwc-tab:
$: |
.mdc-tab {
min-width: 60px;
}
.mdc-tab--active {
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
}
showing:
but as you can see, the icon drops…
btw, I am using max 5 icons, and experimented with your mod. Seems we dont need the padding mod? and there’s nt much difference in my config when using the various px settings:
$: |
.mdc-tab {
min-width: 70px;
}
alone works fine, and appears to be the max for 5 icons, but I can set it to any number below that too? does not make the icons go closer, like in your mod, even with the padding set to 0px. With or without !important. hmm.
background colors for the tabs:
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$: |
.mdc-tab {
min-width: 70px;
background: var(--primary-color);
}
.mdc-tab--active {
background: var(--text-color-off);
}
or if you want them all:
.: |
:host {
background: green;
}
and now we see what the horizontal padding does:
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$: |
.mdc-tab {
min-width: 40px;
background: var(--primary-color);
}
.: |
tabbed-card {
--mdc-tab-horizontal-padding: 0px;
}
card:
type: custom:tabbed-card
attributes:
minWidth: true
isMinWidthIndicator: true
isFadingIndicator: true
so there is still space between the tabs?
lastly:
how to get to the
.mdc-tab-indicator .mdc-tab-indicator__content--underline {
border-color: black;
}
?
that would be:
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
border-color: black !important;
}
but, how to combine that with:
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$: |
.mdc-tab {
min-width: 40px;
background: var(--primary-color);
}
.mdc-tab--active {
background: var(--text-color-off);
}
is this the best way?
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
border-color: red !important;
}
.: |
.mdc-tab {
min-width: 40px;
background: var(--primary-color);
}
.mdc-tab--active {
background: var(--text-color-off);
}
Probably, this happens due to “display: inline” property.
The element is not vertically aligned, it grows to “down” direction.
Does not work w/o !important, check this:
card_mod:
style:
tabbed-card $:
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
border-color: red !important;
}
.: |
.mdc-tab {
min-width: 40px !important;
background: yellow !important;
}
.mdc-tab--active {
background: lightgreen !important;
}
hmm, how strange, in my desktop browser (Safari Mac) and the iOS App, !important is only required on the tab-indicator border color.
because of your remark, I just checked Firefox and Chrome, and indeed, those browsers need the !important on the other settings too…
remarkable.
the order and hierarchy was right though, and that was my main point for asking.
thanks for confirming
I see, but, not really.
I tried to use:
.mdc-tab--active {
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
but nothing happens.
yet, if I check higher in the inspector most of the properties are centered already?
though the padding is not.
the only way I can move the icon is changing the padding, but I cant make it move upwards:
padding-bottom: 24px !important;
and setting
padding: 0px !important;
moves it almost out of sight downwards…
also tested these options: How to Center An Image Horizontally and Vertically in CSS…
suppose it can be done, do we need another element, maybe the icon itself, and not the tab?
amazingly enough, the
.mdc-tab--active {
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
}
does Not require !important in Chrome or Firefox…
Update
think I found the correct property:
display: contents
positions the icon properly:
now how to get there…
seems like this
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
border-color: var(--text-color-off) !important;
}
.: |
.mdc-tab {
min-width: 40px !important;;
background: var(--primary-color) !important;
}
.material-icons {
display: contents !important;
}
.mdc-tab--active {
--mdc-icon-size: {{states('input_number.active_icon_size')}}px;
/*background: var(--text-color-off) !important;*/
}
.: |
tabbed-card {
--mdc-tab-horizontal-padding: 0px;
}
it’s starting to be a huge mod, but it works really well.
NB:
documentation mentions --mdc-theme-secondary: for the indicator icon (when set) so I gave
--mdc-theme-secondary: var(--text-color-off)
a try. This however seems to be not useful, and further inspection shows the indicator icon = ‘’…
setting that attribute on either the main config or a tab, does not do anything either. no indicator icon at all. So I probably am missing the point here, or we have a bug
we houd however be able to set:
styles:
--mdc-tab-horizontal-padding: 0px;
and not have to card_mod that with:
.: |
tabbed-card {
--mdc-tab-horizontal-padding: 0px;
}
I want to remove three icons from the “thermostat” card.
triple dots
heat/cool
cool
Starting with dots in the corner, I have the following:
type: thermostat
entity: climate.radiator_01_thermostat
name: ' '
card_mod:
style: |
ha-icon-button$: |
mwc-icon-button {
display: none;
}
Could someone please give me some pointers on how to proceed?
Thank you
card_mod:
style:
ha-icon-button$: |
mwc-icon-button {
display: none;
}
.: |
div#modes ha-icon-button:nth-child(1) {
display: none;
So for the first there was a wrong | and for the rest see the example and count the item to hide.
How to put mdi:icon to state-badge? I read above post but this not work for me.
- type: conditional
conditions:
- entity: input_boolean.menu_parter
state: "off"
card_mod:
style: |
:host {
--card-mod-icon: mdi:bed;
}
elements:
- entity: light.sufit_salon
style:
top: 65%
left: 52%
color: transparent
transform: scale(0.7,0.7)
tap_action: !include FloorPlan3D/popup/swiatlo_salon405.yaml
type: state-badge
or
- type: conditional
conditions:
- entity: input_boolean.menu_parter
state: "off"
elements:
- entity: light.sufit_salon
style:
top: 65%
left: 52%
color: transparent
transform: scale(0.7,0.7)
card_mod:
style: |
:host {
--card-mod-icon: mdi:bed;
}
tap_action: !include FloorPlan3D/popup/swiatlo_salon405.yaml
type: state-badge
where to put:
card_mod:
style: |
:host {
--card-mod-icon: mdi:bed;
}