well, sure, ive been clicking my way around this morningā¦ hehe
I just discover it is caused by using the:
card_mod:
style:
hui-generic-entity-row $: |
.info {
display: none;
}
if I replace that with the state: false native card option, we get:
which is exactly what I am looking for was expecting based on the docs examples. Unfortunately we can now clearly see the name space is not released, going to the mobile display of the row:
causing the right side to overflow againā¦ grr
You should describe what you want. If you want it right aligned with minimum space or distributed over the whole line. Without this, this is too much trial and error.
Compare
with
is what I am after yes. Bigger problem seems to be I can not get mobile And desktop to behave like that with the same config.
I wrote āwhat I am looking forā in that post, because I was indeed looking for the reason why the card didnt do what I expected it to do, fill from the right. (Iāve edited that post)
As I have established now, that is caused by the card_mod styling on the .info
So, cut it short, I like an icon, no name, several icons spread evenly over the space next to the icon, and no closing state on the right.
Ill limit the number of entities to what can be displayed correctly on mobile, as that space seems more limited than 1 column on desktop, and doesnt get resized, but overflows.
Mariusthvdb:
So, cut it short, I like an icon, no name, several icons spread evenly over the space next to the icon, and no closing state on the right.
But did you test this and leave everything what you had before.
yes, and that has come very close to being very nice:
- type: entities
card_mod:
style: |
.card-content {
padding: 8px 16px 8px 0px;
}
entities:
- entity: sun.sun
type: custom:multiple-entity-row
card_mod:
style:
hui-generic-entity-row $: |
.info {
display: none;
}
.: |
.entities-row {
width: 100%;
}
state_color: true
show_state: false
# name: false
I had to push the padding a bit, because otherwise too much space would be on the left.
changing the justify-content does not seem to make things better (I feel there is too much whitespace between the entities now on desktop (see above). Mobile is better but even there the justify could improveā¦
so many optionsā¦
update
had to add !important to overwrite the card option for justify-content:
.: |
.entities-row {
width: 100%;
justify-content: space-evenly !important;
}
and, so you know this has not been in vain:
- type: custom:mod-card
card_mod:
style: |
:host {
--stack-card-margin: 0px;
}
card:
type: vertical-stack
cards:
- type: custom:sun-card
card_mod:
style: |
.sun-card {
--sun-card-lines: #d7d7d7 !important;
padding: 0px !important;
}
.sun-card-header span {
display: none;
}
.sun-card-footer span {
display: none;
}
.sun-card-footer-row {
padding: 0px !important
}
- !include /config/dashboard/includes/include_zon_multiple_row.yaml
1 Like
Like your status and sharing of it. card-mod theme thread , where you find more audience and where it better belongs to.
1 Like
LeiChat
May 17, 2023, 10:50am
4738
Would appreciate any tips on right aligning a second entity value on a card.
If I use markup to put a span/div round the second value in the āsecondary informationā may I use card-mod to align that content to the right?
Mockup based on a Mushroom entity cardā¦
Aside from āMultiple Entity Row ā, has anyone come across any other cards that support two parameter/entity values?
Arroma
May 17, 2023, 10:57am
4739
Thanks, I didnāt know there was that thread
Struggeling with fonts on iOS, on Android and Windows this works fine.
Does anyone have a few fonts that work well cross platform?
ha-card {
ha-card-background: rgba(0, 0, 0, 0);
box-shadow: none;
margin: 20px 10px 0px -5px;
font-size: 15px;
font-family: 'Segoe UI Light";
text-align: center
Care to share your YAML? Iām playing around with it, but having zero luck using card-mod on the title card:
type: custom:expander-card
title: ''
cards:
- type: entities
entities:
- entity: climate.first_floor_baseboards
name: First Floor
icon: mdi:radiator
- entity: climate.second_floor_baseboards
name: Second Floor
icon: mdi:radiator
- entity: climate.master_bedroom_baseboards
name: Master Bedroom
icon: mdi:radiator
- entity: climate.basement_baseboards
name: Basement
icon: mdi:radiator
style:
.: |
ha-card {
height: 4em;
background: none;
box-shadow: none;
}
state_color: false
button-background: rgba(7, 103, 215, 0.24)
clear: false
padding: '0'
child-padding: '0'
gap: '0'
title-card:
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: BASEBOARD HEATERS
card-mod:
style: |
mushroom-title-card$: |
.title {
font-size: 35px!important;
font-weight: 520!important;
}
title-card-button-overlay: false
richard0815
May 19, 2023, 8:05pm
4743
Hi,
how can I colourize the numbers unequal to ā0ā ?
type: horizontal-stack
cards:
- type: entity
entity: sensor.number_lights_on
name: Lichter an
- type: entity
entity: sensor.door_count
name: Offene TĆ¼ren
icon: mdi:door-sliding
I Just want to get an an idicator and change colour to red if Light is on (uneuqal 0) or Doors are open (uneuqal 0)
1st post ā Bottom ā Link from Ildar ā Entity Card.
1 Like
hoangvh
May 20, 2023, 6:31am
4745
Hi,
richard0815
May 20, 2023, 9:33am
4746
Thankās a lot.
Anyway its static, is it possible to change a sensors color depending on state with css?
- type: entity
entity: sensor.number_lights_on
state_color: false
card_mod:
style: |
.info .measurement {
{% if is_state(sensor.number_lights_on,'0') %}
color: green;);
{% else %}
color: red;);
{% endif %}
}
This one isnāt working
richard0815:
This one isnāt working
Always put your templates in dev tools templates and see what is the output and where is the error.
Here there are missing āā around the entitiy and not needed ); which you added for whatever reasons?
richard0815
May 20, 2023, 9:57am
4748
I am using it in a horizontal-stack-card which require a type: entity.
type: horizontal-stack
cards:
- type: entity
entity: sensor.number_lights_on
state_color: false
card_mod:
style: |
.info .measurement {
{% if is_state('sensor.number_lights_on', '0') %}
color: green;);
{% else %}
color: red;);
{% endif %}
}
Dev-Template is giving me: UndefinedError: āsensorā is undefined
richard0815
May 20, 2023, 10:29am
4749
it need to be like this:
type: horizontal-stack
cards:
- type: entity
entity: sensor.number_lights_on
state_color: false
card_mod:
style: |
ha-card {
{% if is_state('sensor.number_lights_on', '0') %}
color: green;);
{% else %}
color: red;);
{% endif %}
}
ha-card insead of .info .measurement donāt know where i got it from
HƤh?
What I wrote. Missing āā in your first post.
For the rest: OK then donāt do what I write and use your faulty css.
c0ntax
May 22, 2023, 5:25pm
4751
In a markdown card, or any card really, is it possible to specify separate font style for the title and another font style for the rest of the text?
If so, how would that be done?
But I would suggest to place all this in 
