I have a question about the alignment. I’ve tried everything, but I can’t get this card right. I’m also sharing my code. As you can see, it should be the same as the other cards (right side)
- type: horizontal-stack
cards:
- type: custom:state-switch
entity: template
template: >-
{% if is_state_attr('media_player.sonos_woonkamer', 'source', 'Spotify
Connect') and is_state('media_player.sonos_woonkamer', 'playing') %}
spotify
{% elif is_state_attr('media_player.sonos_woonkamer', 'source', 'TV') and
is_state('media_player.sonos_woonkamer', 'playing') %}
tv
{% else %}
hide
{% endif %}
states:
spotify:
type: custom:mushroom-template-card
primary: '{{ state_attr(''media_player.sonos_woonkamer'', ''media_artist'') }}'
secondary: '{{ state_attr(''media_player.sonos_woonkamer'', ''media_title'') }}'
icon: mdi:spotify
layout: vertical
icon_color: grey
picture: ''
entity: media_player.sonos_woonkamer
card_mod:
style: |
ha-card {
{% if not is_state(config.entity, 'idle') %}
background-image: url('{{ state_attr(config.entity, "entity_picture") }}');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color), 0.7);
background-blend-mode: overlay;
{% endif %}
--rgb-state-media-player: var(--rgb-teal);
box-shadow: var(--card-box-shadow);
margin: 0px 0px 0px 14px;
}
tv:
type: custom:mushroom-template-card
primary: '{{ state_attr(''media_player.lg_webos_tv_up77006lb'', ''source'') }}'
secondary: Soundbar
icon: ''
icon_color: grey
picture: >-
/api/media_player_proxy/media_player.lg_webos_tv_up77006lb?token=14bd9a7da2a506cb14b503fa5ad19988481a2c72777b0c39a3a23786538a75c5&cache=e33f2d5224fb5709
entity: media_player.sonos_woonkamer
fill_container: false
multiline_secondary: false
layout: vertical
card_mod:
style: |
ha-card {
{% if not is_state(config.entity, 'idle') %}
background-image: url('{{ state_attr(config.entity, "entity_picture") }}');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color), 0.7);
background-blend-mode: overlay;
{% endif %}
--rgb-state-media-player: var(--rgb-teal);
box-shadow: var(--card-box-shadow);
margin: 0px 0px 0px 14px;
}
- type: conditional
conditions:
- condition: state
entity: media_player.ps5_console
state_not: 'off'
card:
type: custom:mushroom-template-card
primary: '{{ state_attr(''media_player.ps5_console'', ''media_title'') }}'
secondary: >-
{% if is_state('media_player.ps5_console', '') %}
{{ states('media_player.ps5_console') }}
{% else %}
Speeltijd: {{ timedelta(states('sensor.playstation_aan_vandaag') |
float(0) / 24) }}
{% endif %}
icon: mdi:sony-playstation
icon_color: grey
picture: ''
entity: media_player.ps5_console
layout: vertical
card_mod:
style: |
ha-card {
{% if not is_state(config.entity, 'idle') %}
background-image: url('{{ state_attr(config.entity, "entity_picture") }}');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color), 0.7);
background-blend-mode: overlay;
{% endif %}
--rgb-state-media-player: var(--rgb-teal);
box-shadow: var(--card-box-shadow);
margin: 0px 0px 0px 14px;
}