I’m pretty sure you don’t need shadow-rooting for that. What happens without shadow-rooting? Could you also specify your whole intentions?
Sorry if I explained badly. I meant: I understand how to navigate into shadow roots (and there are many examples of those) and how to get into inner elements (like a div) but here are 3 divs on the same level and I’m unsure how to be specific about how to apply styling to only one of those divs. Should I aim to style the class on the div instead, since they each use different classes?
I was trying to simulate your situation but failed since I do not have any details…
In my opinion you should use smth like “.classname” notation.
Like:
style: |
ha-card .mmp__bg {
....
}
But cannot check myself if it works…
The class styling would be the easiest, but you could also try nth-of-type.
1 Like
there are several css pseudoclasses for that. ie :first-child etc
1 Like
Specially for @parautenbach
Styling "custom:mini-media-player"
Font-size for all text:
type: 'custom:mini-media-player'
name: Player
toggle_power: true
entity: media_player.kodi_rpi_1
artwork: full-cover
card_mod:
style: |
ha-card {
font-size: 25px !important;
}
Colored player’s name (+font-size):
card_mod:
style: |
.entity__info__name {
font-size: 25px !important;
color: magenta !important;
}
Colored movie’s (or song) name (+font-size):
card_mod:
style: |
.entity__info__media {
font-size: 25px !important;
color: magenta !important;
}
Colored icon:
card_mod:
style: |
.entity__icon {
color: magenta !important;
}
Alternatively - the icon may be styled by using a stock “--mmp-icon-color” variable:
card_mod:
style: |
ha-card {
--mmp-icon-color: cyan !important;
}
Colored “power” button:
card_mod:
style:
mmp-powerstrip $: |
ha-icon-button {
color: cyan !important;
}
Colored buttons (except “power” button):
card_mod:
style:
mmp-media-controls $: |
ha-icon-button {
color: cyan !important;
}
Colored play-control buttons:
card_mod:
style:
mmp-media-controls $: |
.flex.mmp-media-controls__media ha-icon-button {
color: cyan !important;
}
Colored play-control buttons (different colors):
(Updated 28.02.21 because of this post)
card_mod:
style:
mmp-media-controls $: |
.flex.mmp-media-controls__media ha-icon-button:nth-child(1) {
color: cyan !important;
}
.flex.mmp-media-controls__media ha-icon-button:nth-child(2) {
color: red !important;
}
.flex.mmp-media-controls__media ha-icon-button:nth-child(3) {
color: lightgreen !important;
}
Colored “mute” button:
card_mod:
style:
mmp-media-controls $: |
.mmp-media-controls__volume.flex ha-icon-button {
color: cyan !important;
}
Colored progress bar:
card_mod:
style:
mmp-progress $: |
.mmp-progress:before {
background-color: cyan !important;
}
.: |
mmp-progress {
--mmp-accent-color: magenta;
}
Colored volume slider:
card_mod:
style: |
ha-card {
--md-slider-inactive-track-color: cyan;
--md-slider-active-track-color: red;
--md-slider-handle-color: green;
}
Transparent cover:
card_mod:
style: |
.mmp__bg .cover {
opacity: 0.1 !important;
}
Alternatively - the opacity may be styled by using a stock “--mmp-artwork-opacity” variable:
card_mod:
style: |
ha-card {
--mmp-artwork-opacity: 0.3 !important;
}
Colored shortcut buttons:
type: custom:mini-media-player
name: Player
toggle_power: true
card_mod:
style:
mmp-shortcuts $: |
mmp-button ha-icon {
color: cyan;
}
mmp-button {
background-color: green;
}
artwork: full-cover
entity: media_player.kodi_iiyama
shortcuts:
columns: 4
buttons:
- icon: mdi:dog
type: source
id: aaaa
- icon: mdi:dog
type: script
id: script.test_script
- icon: mdi:dog
type: script
id: script.test_script
- icon: mdi:dog
type: script
id: script.test_script
For some particular button:
card_mod:
style:
mmp-shortcuts $: |
mmp-button:nth-of-type(2) ha-icon {
color: cyan;
}
mmp-button:nth-of-type(2) {
background-color: green;
}
Colored shortcut name - similarly to colored icon:
card_mod:
style:
mmp-shortcuts $: |
mmp-button span {
color: cyan;
}
mmp-button {
background-color: green;
}
More examples are described here.
4 Likes
If I use “custom: slider-entity-row” in a new card, everything works fine:
type: entities
entities:
- type: 'custom:slider-entity-row'
entity: input_number.secondi_accensione_luce_davanti
name: Secondi accensione
icon: 'mdi:clock'
but if I use it inside a card where there are already other entities, the right margin of the slide disappears
type: 'custom:mod-card'
style: |
ha-card {
border: 1px solid black;
background: white;
}
card:
type: vertical-stack
cards:
- type: 'custom:button-card'
name: Luce davanti
styles:
name:
- font-size: 20px
- type: 'custom:slider-entity-row'
entity: input_number.secondi_accensione_luce_davanti
name: Secondi accensione
icon: 'mdi:clock'
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: input_select.modalita_luce_davanti
icon: 'mdi:lightbulb-on-outline'
name: sempre_acceso
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.modalita_luce_davanti
option: sempre_acceso
show_state: false
show_name: false
state:
- value: sempre_acceso
color: 'rgb(5, 147, 255)'
- type: 'custom:button-card'
entity: input_select.modalita_luce_davanti
icon: 'mdi:motion-sensor'
name: automatico
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.modalita_luce_davanti
option: automatico
show_state: false
show_name: false
state:
- value: automatico
color: 'rgb(5, 147, 255)'
- type: 'custom:button-card'
entity: input_select.modalita_luce_davanti
icon: 'mdi:lightbulb-off-outline'
name: sempre_spento
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.modalita_luce_davanti
option: sempre_spento
show_state: false
show_name: false
state:
- value: sempre_spento
color: 'rgb(5, 147, 255)'
Can anyone help me?
Hi All,
I am looking at aligning my text in the middle of a card using the card-mod add-on.
I’ve tried aligning using the following code:
- type: 'custom:simple-thermostat'
entity: climate.kitchen
show_header: false
control: false
step_layout: row
step_size: '0.5'
hide:
temperature: true
state: true
style: |
ha-card {
--st-font-size-xl: 20px;
--st-font-size-m: 20px;
--st-font-size-title: 20px;
--st-font-size-sensors: 20px;
--st-spacing: 1px;
color: black;
height: 192px;
text-align: center;
vertical-align: middle;
}
But I am just seeing the following:
Is it possible to vertically align the text to the center?
Its worth noting that the text displayed is from the simple-thermostat card and the plus and minus are buttons.
Thanks
Leacho
6 Likes
Thank you, but I can’t seem to solve this one with card-mod (and it seems I don’t need to as I’ll explain).
I thought this gave me the lead I needed:
What I wanted to do was to have a default background image (cover artwork) when there’s none available (like when the player is off).
This is what I tried:
- type: custom:mini-media-player
name: Main Bedroom
entity: media_player.main_bedroom
artwork: cover
volume_stateless: true
hide:
power: true
volume: false
mute: true
idle_view:
when_idle: false
when_paused: false
when_standby: false
style: |
.mmp__bg .cover {
background-image: url('/local/tivoli-model-three.png');
background-size: cover;
}
The problem is that this doesn’t work, because when there’s no artwork there’s no .cover class (I only discovered this now).
To help explain this better:
This is what the HTML looks like when there is artwork.
And this, when there’s none:
Note how <div class="mmp__bg"></div> is empty.
Of course, card-mod can only modify what’s there.
And to make me really feel silly, I just discovered there’s already a documented feature for this in mini-media-player. My humble apologies for wasting anybody’s time. Ildar, your list of examples are still useful – I’m using the opacity config now.
Got your point.
I have just started looking at this card - so could you tell me which property is to be used to specify the “idle picture”?
Please do not apologize - I must thank you for pointing me at this useful card.
Also my styling examples will be useful for somebody anyway. I am also still learning and value every good & clear advice.
BTW, you still can do that:
type: 'custom:mini-media-player'
name: Player
toggle_power: true
style: |
.mmp__bg {
background-image: url("/local/images/persons/ildar.png") !important;
background-repeat: no-repeat !important;
}
artwork: material
entity: media_player.kodi_iiyama
Left - idle, right - some music is played:
Sure, search for background under the main card options here.
You’re welcome – and thank you.
Yes, you’re right. It’s one of the things I did but the problem was that I wanted the “smart” logic of MMP to size and fit the picture in the same way it does for cover art (I could’ve copied just all the attributes of the cover class but didn’t want to duplicate it, or size the image exactly).
Compare e.g.
which cuts off the picture in the same way your picture in your example is, with
which is what you get using MMP’s background option (cropped but in a different way).
But, it’s still useful if people want to have all kinds of other interesting effects and things that the background setting doesn’t cover.
Hi Everyone,
I tried to set up a very “easy” thing, namely to change the border color of a state-badge inside a picture elements card. Nothing happens, and I don’t really get what I’m doing wrong.
I’ve added this to raw editor:
- type: state-badge
entity: binary_sensor.window4
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span{
color: #000 !important;
}
.: |
:host {
{% if is_state('binary_sensor.window4', 'Open') %} --label-badge-red: #03A9F4; {% endif %};
{% if not is_state('binary_sensor.window4', 'Closed') %} --label-badge-red: #fd79a8; {% endif %};
color: #fff;
}
I know it’s working for badges at the header, but seems like it’s not the same for every card.
- Wrong indentation for the
"style"keyword. - Picture elements card has its OWN
"style"keyword for an element like “state-badge”. You are not supposed to use this"style"section for"card-mod". - Using the “style” you can do this non-card-mod styling:
- type: picture-elements
style: |
ha-card { height: 120px !important; }
image: /local/images/blue.jpg
elements:
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
color: orange
'--label-badge-text-color': magenta
'--label-badge-red': green
'--label-badge-background-color': yellow
top: 18%
left: 10%
1 Like
Hi Ildar,
Originally, I wanted the color to be red on state-change, but simply trying to overwrite ‘–label-badge-red’ also did not succeed.
Checked in Chrome and Edge.
I just realized that for "binary_sensor" we must use --label-badge-blue instead of --label-badge-red.
badges:
- entity: binary_sensor.updater
name: 'some name'
style: |
:host {
--label-badge-blue: cyan;
}
- entity: sensor.cleargrass_1_co2
name: 'some name'
style: |
:host {
--label-badge-red: cyan;
}
Edited my first post about badges - 🔹 Card-mod - Add css styles to any lovelace card - #1310 by Ildar_Gabdullin.
in response to a rather old post of mine on conditional badges, Conditional badge at all possible? was written by @Troon
please add that to the Badge styling options 
it is rather powerful, and dearly missed in current core Badge usage
1 Like
What do you mean? thomasloven is the developer of card_mod. Do you mean that they should make an example?
Thank you for a good idea, here added a couple of examples (+ added a link here).
Badges: conditional display:
Example 1 - toggle “Show / Hide badge”:
- title: badge
path: badge
badges:
- entity: sensor.cleargrass_1_co2
name: conditional
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') %}
display: inline-block;
{% else %}
display: none;
{% endif %}
}
cards:
- type: entities
entities:
- entity: input_boolean.test_boolean
name: Show badge
Example 2 - show a badge if the sensor is available:
- entity: sensor.cleargrass_1_co2
name: display if available
style: |
:host {
{% if states(config.entity) in ['unavailable','unknown'] -%}
display: none;
{% else %}
display: inline-block;
{% endif %}
}
… one more styling:
Badges: hidden name:
- entity: sensor.cleargrass_1_co2
name: transparent color
style: |
:host {
color: transparent;
}
Update 17.08.23: this fix may not be needed since there is a PR to implement the “show_name” option which is not working this moment.
More examples are described here.
3 Likes
No, see post below yours, above this one
Has anyone figured out how to use backdrop-filter css for cards? The css style is used for popups/more-info (and works great there). I wanted to use this as background for cards, bur couldn’t get it to work. Maybe it’s not possible, or am I missing something?