Try to just add some margin to each of the cards for the person like this:
type: vertical-stack
cards:
- type: markdown
content: '{{ states(''sensor.time'') }}'
card_mod:
style: |
ha-markdown {
padding: 0 0 0 8px !important;
font-size: 110px !important;
font-weight: bold !important;
line-height: 1.2 !important;
}
ha-card {
background-color: transparent;
box-shadow: 0px 0px;
margin-bottom: 0px;
margin-left: 8px;
margin-top: 5px;
}
- type: markdown
content: Сегодня **{{ now().strftime('%d %B, %Y') }}**
card_mod:
style: |
ha-markdown {
padding: 0 0 0 10x !important;
font-size: 21px !important;
font-weight: normal !important;
line-height: 1.4 !important;
}
ha-card {
background-color: transparent;
box-shadow: 0px 0px;
margin-left: 8px;
margin-bottom: 0px;
margin-top: -45px;
}
- type: markdown
content: |-
{% set time = now().hour %}
{% if time <= 1 %} Иди спать {{'\\U0001f621'}}
{% elif time <= 3 %} Вали спать {{'\U0001f92c'}}
{% elif time <= 5 %} ... {{'\U0001f47b'}}
{% elif time <= 7 %} Проснулся? {{'\U0001f616'}}
{% elif time <= 8 %} Вставай! {{'\U0001f97a'}}
{% elif time <= 9 %} Кофейку? {{'\U0001f643'}}
{% elif time <= 10 %} В бой! {{'\U0001fae1'}}
{% elif time <= 13 %} Добрый день {{'\U0001F60A'}}
{% elif time <= 15 %} Пора обедать {{'\U0001F60E'}}
{% elif time <= 17 %} Вздремнуть? {{'\U0001f914'}}
{% elif time <= 19 %} Добрый вечер {{'\U0001F44B\U0001F3FB'}}
{% elif time <= 22 %} А что на ужин? {{'\U0001F60C'}}
{% elif time <= 23 %} Ужинать и спать! {{'\U0001F974'}}
{% else %} Добрый вечер {{'\U0001F974'}}
{% endif %}
card_mod:
style: |
ha-markdown {
padding: 0 0 0 10px !important;
font-size: 30px !important;
font-weight: normal !important;
line-height: 1.2 !important;
}
ha-card {
background-color: transparent;
box-shadow: 0px 0px;
margin-left: 12px;
margin-top: -10px;
{
- type: grid
square: true
columns: 2
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: person.korzik
layout: horizontal
icon_type: entity-picture
primary_info: none
secondary_info: none
fill_container: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
box-shadow: 0px 0px 6px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 0px);
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-size: 61px;
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
transition: all 0s;
margin-left: 22px;
}
:host {
--state-person-home: var(--green-color);
--state-person-not-home: var(--grey-color);
--state-person-Away: var(--grey-color);
--state-person-unknown: var(--grey-color);
--state-person-RT: var(--red-color);
--state-person-Maldiviana: var(--red-color);
--state-person-Izmailovo: var(--blue-color);
--state-person-Derevnya: var(--yellow-color);
--state-person-Zavoronki: var(--yellow-color);
--state-person:
{% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
- type: custom:mushroom-entity-card
entity: person.artemiy
layout: horizontal
icon_type: entity-picture
primary_info: none
secondary_info: none
fill_container: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
box-shadow: 0px 0px 6px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 0px);
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-size: 61px;
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
transition: all 0s;
margin-left: 22px;
}
:host {
--state-person-home: var(--green-color);
--state-person-not-home: var(--grey-color);
--state-person-Away: var(--grey-color);
--state-person-unknown: var(--grey-color);
--state-person-RT: var(--red-color);
--state-person-Edu: var(--deep-orange-color);
--state-person-Maldiviana: var(--red-color);
--state-person-Izmailovo: var(--blue-color);
--state-person-Derevnya: var(--yellow-color);
--state-person-Zavoronki: var(--yellow-color);
--state-person-Edu: var(--red-color);
--state-person:
{% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki', 'Edu']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
- type: custom:mushroom-entity-card
entity: person.dakononov
layout: horizontal
icon_type: entity-picture
primary_info: none
secondary_info: none
fill_container: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
box-shadow: 0px 0px 6px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 0px);
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-size: 61px;
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
transition: all 0s;
margin-left: 22px;
}
:host {
--state-person-home: var(--green-color);
--state-person-not-home: var(--grey-color);
--state-person-Away: var(--grey-color);
--state-person-unknown: var(--grey-color);
--state-person-RT: var(--red-color);
--state-person-Maldiviana: var(--red-color);
--state-person-Izmailovo: var(--blue-color);
--state-person-Derevnya: var(--yellow-color);
--state-person-Zavoronki: var(--yellow-color);
--state-person:
{% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
- type: custom:mushroom-entity-card
entity: person.dariya
layout: horizontal
icon_type: entity-picture
primary_info: none
secondary_info: none
fill_container: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
box-shadow: 0px 0px 6px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 0px);
}
.: |
ha-card {
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
--icon-size: 61px;
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
transition: all 0s;
margin-left: 22px;
}
:host {
--state-person-home: var(--green-color);
--state-person-not-home: var(--grey-color);
--state-person-Away: var(--grey-color);
--state-person-unknown: var(--grey-color);
--state-person-RT: var(--red-color);
--state-person-Maldiviana: var(--red-color);
--state-person-Izmailovo: var(--blue-color);
--state-person-Derevnya: var(--yellow-color);
--state-person-Zavoronki: var(--yellow-color);
--state-person:
{% if is_state(config.entity, ['home', 'Away', 'not_home', 'unknown', 'RT', 'Maldiviana', 'Izmailovo', 'Derevnya', 'Zavoronki']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
- type: custom:clock-weather-card
entity: weather.yandex_weather
sun_entity: sun.sun
temperature_sensor: sensor.outdoor_temp
weather_icon_type: fill
animated_icon: true
forecast_days: 0
time_format: 24
date_pattern: d.m.y
hide_today_section: false
hide_forecast_section: true
hide_clock: true
hide_date: true
hourly_forecast: false
use_browser_time: true
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: 0px 0px;
margin-top: -110px;
margin-left: 8px;
}
just adjust this bit if you need to move it more:
margin-left: 22px;
for the month not being in your language take a look at this post.
The frontend is where the user selects their desired presentation language but templates are processed by the backend. The frontend has no knowledge of the timestamp_custom filter or any other Jinja2 filter.
For more information, refer to petro’s post .
you will need to create a dictionary in your template. the backend (where templates are evaluated) doesnt know anything about the frontend (where you language is set).