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.
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. 
But I would suggest to place all this in card-mod theme thread, where you find more audience and where it better belongs to.
1 Like
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?
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
e.g.
1 Like
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
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
Hi,
how can I add or modify badge in any Tile card like the climate or person entities features in
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
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?
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
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.
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?
I am also a fan of the multiple-entity-row. For me the fun is to get more information in less space. Removing the icon(badge) en clearing the info-pointer space are always the first things I do. But now I have a problem. In this specific example I canāt do it without also losing the content info.
Can you help me out?
type: entities
entities:
- type: custom:multiple-entity-row
entity: sun.sun
icon: mdi:blank
name: false
tap_action: none
show_state: false
entities:
- entity: sensor.co2xxx
name: CO2
unit: false
styles:
width: 50px
text-align: left;
color: var(--my-font31-color)
- entity: sensor.gradient
name: GraD
format: precision03
styles:
width: 70px
text-align: left;
color: var(--my-font34-color)
- entity: sensor.average_xxx
unit: false
format: precision01
name: AvG
styles:
width: 55px
text-align: left;
color: var(--my-font35-color)
style: |
hui-generic-entity-row .entities-row div.entity:nth-child(1) div::after
{
color: var(--my-font01-color);
font-size: 0.8rem;
content: "\A {{states['sensor.multiplied_sensor'].state}}";
white-space:;
}
hui-generic-entity-row .entities-row div.entity:nth-child(2) div::after
{
color: var(--my-font04-color);
font-size: 0.8rem;
content: "\A {{states['sensor.average_temp_02_trend'].state}}";
white-space: ;
}
hui-generic-entity-row .entities-row div.entity:nth-child(3) div::after
{
color: var(--my-font05-color);
font-size: 0.8rem;
content: "\A {{ states('sensor.ewe_th_08_slaapkamer_humidity') | float | round(0) }} ";
white-space: ;
}
style: |
ha-card {
--my-font01-color: red;
--my-font04-color: red;
--my-font05-color: red;
--my-font31-color: red;
--my-font34-color: red;
--my-font35-color: red;
}