Hi,
I created this picture element which works fine:
type: picture-elements
elements:
- type: service-button
title: NAS WOL
service: wake_on_lan.send_magic_packet
service_data:
mac: 01:23:45:67:89:AB
style:
left: 25%
top: 25%
transform: scale(1,1)
- type: state-icon
entity: light.basement
style:
left: 50%
top: 50%
transform: scale(2,2)
tap_action:
action: toggle
image: /local/floorplan/basement.png
But I would like to put an icon instead of the title of the service-button, is it possible?
Thank you @Ildar_Gabdullin,
I installed card-mod but I don’t find how to hide an item ![:thinking: :thinking:](https://community.home-assistant.io/images/emoji/twitter/thinking.png?v=10)
OK I found how to hide the service-button.
But the icon replacement doesn’t work on service-button.
But it works on the other icon I added as you put in 1. (mdi:power replaced by mdi:bed)
type: picture-elements
elements:
- type: service-button
title: NAS WOL
service: wake_on_lan.send_magic_packet
service_data:
mac: 01:23:45:67:89:AB
style:
left: 25%
top: 25%
transform: scale(1,1)
card_mod:
style: |
:host {
display: none;
--card-mod-icon: mdi:bed;
}
- type: icon
icon: mdi:power
title: ' '
style:
left: 25%
top: 25%
transform: scale(1,1)
tap_action:
action: call-service
service: wake_on_lan.send_magic_packet
service_data:
mac: 01:23:45:67:89:AB
card_mod:
style: |
:host {
--card-mod-icon: mdi:bed;
}
- type: state-icon
entity: light.basement_1
style:
left: 50%
top: 50%
transform: scale(2,2)
tap_action:
action: toggle
image: /local/floorplan/basement.png
I did not mean to replace an icon. Nothing to replace if it is not supported.
I proposed three methods. One of them is with card-mod and adding a pseudo-class. For details - go to card-mod thread → 1st post → link at the bottom → find a section about using “:after” and “:before”.
But probably this is the hardest way for you - so consider other 2 methods first.
Yes I saw that, thank you. It works perfectly in a basic card but not in a picture-element
Adding pseudo classes possible to all elements.
If a particular example was not provided, it does not mean that it is impossible.
OK.
I continue trying and trying (I never worked with css etc) and I will inevitably find one day.
Try, make mistake, try again - this this the Way.
I myself never dealt with css before card-mod.
I’m reading your post, now you’re an expert for sure, I’m sure my need is nothing for you.
I am not a native English speaker, may not understand all expressions properly.
I advise you to consider a simpler way - replace the service-button by a state-icon with tap_action.
Using card-mod is a more complex task, you will learn it step by step, but for now you will have a rather good working solution.