Hi
Trying hard to change the font size, margin, padding of an input_datetime element. I wonder if anyone could shed some hint on how to achieve my goal. I would like to reduce the size to better fit my phone screen (see image). Anyone did something similar ??
entities:
- entity: input_datetime.modetect_l0_sdb
icon: 'mdi:motion-sensor'
name: Salle de bain sous-sol
secondary_info: last-changed
TIA
I have similar setup. You donāt need your input_datetimes to be editable, do you?
If you donāt, donāt expose them in fronted. If you really need to, wrap them in template_sensors.
To sum it up: donāt think you need all the information in one place (provided you show that last_changed) especially on a small screen so change your UI design.
Hereās what I have as a main card
and this is a conditional card I display when Debug is enabled (as you can see, no input_datetimes, theyāre all in HA only).
Hope that helps.
@thomasloven Iāve recently started using card-mod and would be grateful if you could explain me something.
I want to hide entityās state badge. I can do that when my entity is in Entities card:
type: entities
entities:
- entity: automation.ventilation_1st_floor_bathroom_extractor_fan_turn_on_by_humdity_threshold
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
but it doesnāt work if my entity is inside fold-entity-row:
type: entities
entities:
- type: custom:fold-entity-row
open: true
head:
type: section
label: test
entities:
- entity: automation.ventilation_1st_floor_bathroom_extractor_fan_turn_on_by_humdity_threshold
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
What am I doing wrong here?
Are you using the latest versions of both?
fold-entity-row: 1.0.1 (btw, you use numbers instead of 1.0.1 on Github - tough)
card-mod has no version in console but file size is the same as the latest release.
Since this is popping up more and more here, in discord and on github let me make a clarification to everyone:
Do not use mod-card unless absolutely necessary.
mod-card is the final, all-other-options-exhausted, Iām-about-to-cry-it-must-be-possible-somehow, last resort if nothing else works.
The first line under the āUsageā seciton of the readme states
This is not a new card. Instead it changes the way pretty much any other card works .
That means it should not be used as a card, I.e. if you write type: followed by anything other than the type of the card you actually want to display youāre likely doing it wrong.
Of course, mod-card wouldnāt exist unless there were some cases where it was in fact needed. However, while the list in the readme says āamong otherā, itās actually pretty darn exhaustive.
And even for the cards in that list, itās not necessary most of the time, and not in the way that you think (mod-card is for things like adding a border around an entire stack of cards. If you want to mod the cards in the stack - donāt use mod-card.)
mod-card unless absolutely necessary.I donāt really know if it is OK to ask here for advice about styling something very specific but honestly, when else can we do at the moment except prettify our UI?
So,
Thanks to the guidance from @thomasloven a few posts up I donāt have a problem with the template side of things but I canāt find what element I need to use in style to change the icon based on the state of an input boolean. Can anyone help please?
Itās a custom:multiple-entity-row
It is in an entities card which is in turn in a vertical stack
Iām successfully changing the icon colour with this, so the template will be similar:
style: |
:host {
{% raw %}
{% set schedule = {% endraw %} {{ schedule }} {% raw %} %}
{% if states('input_boolean.heating_downstairs_schedule' ~ schedule ~ '_active') == 'on' %}
--paper-item-icon-color: rgb(255, 165, 0);
{% elif states(config.entity) == 'on' %}
--paper-item-icon-color: var(--accent-color);
{% else %}
color: var(--secondary-text-color);
--paper-item-icon-color: var(--secondary-text-color);
{% endif %}
{% endraw %}
;
}
Are you trying to change the icon itself, i.e. what symbol is displayed?
That canāt be done with card-mod, Iām afraid.
I was yes,
But never mind.
could you describe us your goal?
Yes, I want the āŖ mark to go down
Thatās not how you target a class.
https://www.w3schools.com/cssref/sel_class.asp
Also, youāll most likely need to read the āAdvanced usageā section of the readme for this one.
Hello!
I came across this wonderful mod in search of a solution to the following problem:
- entities:
- entity: input_boolean.humi2x14_drymode
name: rftg
type: entities
style: >
ha-card {
padding-top: 16px;
}
I am trying to move a switch to a place of text (input_boolean entity).
Please, help ) I am absolute zero in CSS )
So I have been screwing around with this all morningā¦ Youād think it would be very simple.
I have a harmony_hub I want to change the icon colour if it is on or off.
Why doesnāt this work:
- type: entities
title: Harmony Remote
state_color: true
show_header_toggle: false
entities:
- input_boolean.harmonyremote
- entity: remote.harmony_hub
state_color: true
style: |
:host {
--paper-item-icon-color:
{% if is_state('remote.harmony_hub', 'on') %}
var(--primary-color)
{% else %}
var(--disabled-text-color)
{% endif %}
;
}
But then THIS does work:
- type: entities
title: Harmony Remote
state_color: true
show_header_toggle: false
entities:
- input_boolean.harmonyremote
- entity: remote.harmony_hub
state_color: true
style: |
:host {
--paper-item-icon-color: {% if is_state('remote.harmony_hub', 'on') %} var(--primary-color) {% else %} var(--disabled-text-color) {% endif %};
}
I would much prefer to use the first one as it is more readable but canāt for the life of me see my mistake.
@DavidFW1960 I tried both versions in Chrome and Safari and they do work as expected.
try this
- entity: input_boolean.humi2x14_drymode
name: rftg
style:
hui-generic-entity-row:
$: "div.info.pointer.text-content {display: none}"
but if
wellā¦ then itās either learn some or donāt touch it imho 
Thanks. Did get it to work but zero idea what I screwed upā¦
I probably donāt need to specify the state_color: true twiceā¦ might remove and see if it still works.
Thank you very much! It works. I came a little closer to understanding how this works )
wellā¦ this morning I spent some time playing with card-mod and it didnāt workā¦ why?! then I realised I was changing one part of code but was looking at another element in UI.
need more sleep