Continuing the discussion from 
Card-mod - Add css styles to any lovelace card:
as a separate post, since this is no longer on card-mod, but has turned into a cool little project of its own.
selecting the active Plex players using:
- type: custom:auto-entities
card:
type: entities
# title: Plex dashboard
# card_mod: *header
show_empty: false
filter:
include:
- entity_id: media_player.plex_*
state: /playing|paused|'on'/
options:
!include /config/lovelace/includes/include_plex_playing.yaml
# exclude:
# - state: unavailable
# - state: idle
# - state: 'off'
(in commented bits some other experiments that can still be used, but I chose to leave out for now. Include and exclude do the same, just listed for reference)
the include moves the auto-entities selected entity to the underlying config. Which was a bit of a search I must admit. Ive started out with config.entity in the templates in the single card from the other post. I then realized I had to use this.entity_id but that didnt work plainly like that. It needs to be quoted in the templates like 'this.entity_id':
type: custom:stack-in-card
card_mod:
style: |
ha-card {
margin: -16px;
box-shadow: none;
}
keep:
background: true
cards:
- type: custom:button-card
template: button_default_title
name: >
[[[ var caption = 'Plex playing: ';
var title = states['this.entity_id'].attributes.media_title;
var artist = states['this.entity_id'].attributes.media_artist;
var album = states['this.entity_id'].attributes.media_album_name;
return `<div style='display: flex; padding: 0px 16px 0px 0px;'>
<div>${caption}</div>
<marquee>
<span style='color:silver;align-items:center;'>${artist} - ${album} - ${title}</span>
</marquee>`;]]]
show_icon: false
styles:
card:
- color: orange
- background-color: black
- type: custom:hui-element
card_type: markdown
theme: plex
card_mod:
style: |
ha-card.type-markdown {
background-image: url('/local/various/plex.png');
background-position: right top;
background-size: 180px; /*contain works too, but the size then changes according to space used in markdown */
background-repeat: no-repeat;
/*box-shadow: none;*/
color: silver;
}
content: >
{% set player = 'this.entity_id' %}
{% if states(player) not in ['unknown','unavailable'] %}
<font color='orange'>**User:**</font> {{state_attr(player,'username')}}
{% for attr in states[player].attributes %}
{%- if not attr in ['media_content_id','icon','entity_picture','hide_attributes',
'media_position_updated_at','media_duration','media_position',
'player_source','media_content_rating',
'is_volume_muted','username','friendly_name','volume_level',
'supported_features'] %}
<font color=orange> **{{attr.split('media_')[1]|replace('_',' ')|title}}:**</font> {{states[player].attributes[attr]|title}} {% endif %}
{%- endfor %}
{% else %} Nothing playing
{% endif %}
- type: custom:button-card
aspect_ratio: 1/1
show_name: false
show_icon: false
tap_action: none
card_mod:
style: |
ha-card {
background: url({{state_attr('this.entity_id','entity_picture')}});
/*box-shadow: none;*/
background-size: cover;
}
The above config results in a separate stack for each individual media player playing a Plex media source.
If you check closely, youāll see a theme: plex for the middle card in the stack, the markdown. This is a neat little trick I discovered to be able to use both a background-image And a background-color (in the theme). the theme is nothing more than:
plex:
- card-background-color: black
result:
hahaha
