I’m using the picture element card, and I want to add a title that is not clickable and gives no entity info. The only way I can see to do this is (other than and svg / image) to add a state-label, but this has to have an entity and therefor displays the entity info.
I just want a title. Am I missing something obvious??
Anything - Anyone…
It seems that there should be the ability to just insert a label. Must be really easy to accomplish??
How do you go about adding a feature request?
Just to illustrate exactly what I am doing, you will see in the screenshot that I want to add a ‘Security’ above the shield icons.
I have tried adding a fake entity, but this adds a dash after the prefix wording:
- type: state-label
prefix: "Security"
entity: light.sec
style:
top: 8.5%
left: 61%
font-size: 2.2vw
color: white
font-weight: lighter
Markdown card
If you want this in the picture element card, just use the service call element and a dummy service.
Just tried using markdown, but it doesn’t seem to work within a picture-elements card.
Then you should use the service call element with a dummy service.
Still can’t work out how to use the service call element as you mentioned.
I tried this, but the same results:
- type: state-label
prefix: "Security "
entity: light.s
service: light.turn_o
service_data:
brightness_pct: 100
style:
top: 8.5%
left: 57%
font-size: 2.1vw
color: white
font-weight: lighter
Could you give me a code example??
It’s in the documentation:
pull directly from the documentation:
- type: service-button
title: Turn lights off
style:
top: 95%
left: 60%
service: homeassistant.turn_off
service_data:
entity_id: group.all_lights
Thanks for that! I was trying to use the service-label and not service-button (kinda counterintuative).
The annoying thing now is that I can’t style the font it seems to get overridden. can’t change the case or colour.
You can still style the font… Have you read the documentation? I’m trying not to be an ass here but the information is there but it doesn’t look like you are using it. It seems like you are just looking for examples and only using the example. I can tell you first hand that you will have a bad time using this method. Just because the example doesn’t have it doesn’t mean it can’t be done. You should be reading what attributes are allowed for the service-button. Style is an option. Here are all the attributes that are allowed, again pulled directly from the documentation:
SERVICE CALL BUTTON
CONFIGURATION VARIABLES
type
(string)(Required)service-button
title
(string)(Required)Button label
service
(string)(Required)light.turn_on
service_data
(object)(Optional)The service data to use.
style
(object)(Required)Position and style the element using CSS.
Default value: position: absolute, transform: translate(-50%, -50%)
EDIT: If you’re unclear about the phrase “Position and style the element using CSS.”, that pretty much means you can style this however you want using CSS. Which is what is done in other examples on that page.
So to marry the 2 examples:
- type: service-button
title: Turn lights off
style:
top: 95%
left: 60%
font-size: 2.2vw
color: white
font-weight: lighter
service: homeassistant.turn_off
service_data:
entity_id: group.all_lights
Thanks for the information, but that doesn’t really help. I did indeed read the info available.
It’s not that I don’t know how to style the font, it’s that the styles are being overridden.
I have used the following code, however the colour and text-transform are not working. Color wise, it is defaulting to the primary colour value set in the theme.
- type: service-button
title: Security
style:
top: 8.5%
left: 57%
font-size: 2.1vw
color: white
font-weight: lighter
text-transform: none
service: homeassistant.turn_off
service_data:
entity_id: group.all
The screenshot below shows what I’m trying to change.
If that’s the case then you should write up a PR to have that fixed. It shouldn’t be overwriting your style.
Color is getting overwritten though. That appears to be by design. Not sure why.
HI,
since I am looking to create something like this for my scenes, I would like to ask how you wrote this scenes card? Would you care to share the code for that please?
Here is the lovelace code for that page:
views:
- title: Home Layout
icon: mdi:home
theme: wichal-button-dark
panel: true
background: center / cover no-repeat url("/local/background_light.png")
cards:
- type: picture-elements
image: /local/homeLayout9.png
elements:
## security ##
- type: image
entity: script.night_time_panic
image: /local/rooms/icons/shieldoops.png
tap_action: toggle
state_image:
"off": /local/rooms/icons/shieldoops.png
"on": /local/rooms/icons/shieldoops.png
style:
top: 29%
left: 59%
width: 6%
- type: image
entity: automation.night_hall_motion
image: /local/rooms/icons/shield-green.png
tap_action: toggle
state_image:
"off": /local/rooms/icons/shield-gray.png
"on": /local/rooms/icons/shield-green.png
style:
top: 29%
left: 74.8%
width: 6%
- type: image
entity: automation.wifi_away_mart
image: /local/rooms/icons/shield-blue.png
tap_action: toggle
state_image:
"on": /local/rooms/icons/shield-gray.png
"off": /local/rooms/icons/shield-blue.png
style:
top: 29%
left: 90%
width: 6%
## Scenes ##
- type: image
entity: script.good_morning
image: /local/rooms/icons/sunrise.png
tap_action: toggle
state_filter:
"on": brightness(100%) saturate(1)
"off": brightness(100%) hue-rotate(0deg)
style:
top: 70%
left: 59%
width: 7%
- type: image
entity: script.home_mode__day
image: /local/rooms/icons/sunset.png
tap_action: toggle
state_filter:
"on": brightness(100%) saturate(1)
"off": brightness(100%) hue-rotate(0deg)
style:
top: 70%
left: 74.8%
width: 7%
- type: image
entity: script.night_night
image: /local/rooms/icons/moon.png
tap_action: toggle
state_filter:
"on": brightness(100%) saturate(1)
"off": brightness(100%) hue-rotate(0deg)
style:
top: 70%
left: 90%
width: 7%
## Weather1 ##
- type: image
image: /local/icons/weather/weather_cloudy.png
tap_action: more-info
entity: sensor.dark_sky_icon_1
state_image:
"clear-day": /local/rooms/icons/weather/weather_clear.png
"clear-night": /local/rooms/icons/weather/weather_clearnight.png
"rain": /local/rooms/icons/weather/weather_rain.png
"snow": /local/rooms/icons/weather/weather_snow.png
"sleet": /local/rooms/icons/weather/weather_sleet.png
"wind": /local/rooms/icons/weather/weather_windy.png
"fog": /local/rooms/icons/weather/weather_fog.png
"partly-cloudy-day": /local/rooms/icons/weather/weather_partlycloudy.png
"partly-cloudy-night": /local/rooms/icons/weather/weather_cloudy.png
"cloudy": /local/rooms/icons/weather/weather_cloudy.png
style:
top: 71%
left: 10%
width: 4%
filter: brightness(40%) saturate(0.1)
- type: state-label
entity: sensor.dark_sky_daytime_high_temperature_1
style:
top: 77%
left: 10%
font-size: 1.5vw
## Weather2 ##
- type: image
image: /local/icons/weather/weather_cloudy.png
tap_action: more-info
entity: sensor.dark_sky_icon_2
state_image:
"clear-day": /local/rooms/icons/weather/weather_clear.png
"clear-night": /local/rooms/icons/weather/weather_clearnight.png
"rain": /local/rooms/icons/weather/weather_rain.png
"snow": /local/rooms/icons/weather/weather_snow.png
"sleet": /local/rooms/icons/weather/weather_sleet.png
"wind": /local/rooms/icons/weather/weather_windy.png
"fog": /local/rooms/icons/weather/weather_fog.png
"partly-cloudy-day": /local/rooms/icons/weather/weather_partlycloudy.png
"partly-cloudy-night": /local/rooms/icons/weather/weather_cloudy.png
"cloudy": /local/rooms/icons/weather/weather_cloudy.png
style:
top: 71%
left: 25.5%
width: 4%
filter: brightness(40%) saturate(0.1)
- type: state-label
entity: sensor.dark_sky_daytime_high_temperature_2
style:
top: 77%
left: 25.5%
font-size: 1.5vw
## Weather3 ##
- type: image
image: /local/icons/weather/weather_cloudy.png
tap_action: more-info
entity: sensor.dark_sky_icon_3
state_image:
"clear-day": /local/rooms/icons/weather/weather_clear.png
"clear-night": /local/rooms/icons/weather/weather_clearnight.png
"rain": /local/rooms/icons/weather/weather_rain.png
"snow": /local/rooms/icons/weather/weather_snow.png
"sleet": /local/rooms/icons/weather/weather_sleet.png
"wind": /local/rooms/icons/weather/weather_windy.png
"fog": /local/rooms/icons/weather/weather_fog.png
"partly-cloudy-day": /local/rooms/icons/weather/weather_partlycloudy.png
"partly-cloudy-night": /local/rooms/icons/weather/weather_cloudy.png
"cloudy": /local/rooms/icons/weather/weather_cloudy.png
style:
top: 71%
left: 41%
width: 4%
filter: brightness(40%) saturate(0.1)
- type: state-label
entity: sensor.dark_sky_daytime_high_temperature_3
style:
top: 77%
left: 41%
font-size: 1.5vw
## Bottom Bar #
- type: state-label
entity: sensor.time__date
style:
top: 94%
left: 15%
font-size: 2.4vw
color: white
font-weight: lighter
- type: image
image: /local/icons/weather/weather_cloudy.png
tap_action: more-info
entity: sensor.dark_sky_icon
state_image:
"clear-day": /local/rooms/icons/weather/weather_clear.png
"clear-night": /local/rooms/icons/weather/weather_clearnight.png
"rain": /local/rooms/icons/weather/weather_rain.png
"snow": /local/rooms/icons/weather/weather_snow.png
"sleet": /local/rooms/icons/weather/weather_sleet.png
"wind": /local/rooms/icons/weather/weather_windy.png
"fog": /local/rooms/icons/weather/weather_fog.png
"partly-cloudy-day": /local/rooms/icons/weather/weather_partlycloudy.png
"partly-cloudy-night": /local/rooms/icons/weather/weather_cloudy.png
"cloudy": /local/rooms/icons/weather/weather_cloudy.png
style:
top: 93%
left: 77%
width: 4%
filter: brightness(120%) saturate(0.1)
- type: state-label
entity: sensor.dark_sky_apparent_temperature
suffix: " | "
style:
top: 94%
left: 85%
font-size: 2.4vw
color: white
font-weight: lighter
- type: state-label
entity: sensor.hall_temp_rounded
style:
top: 94%
left: 94%
font-size: 2.4vw
color: white
font-weight: lighter
## Room Backgrounds ##
## Living Room ##
- type: image
entity: group.lounge
image: /local/rooms/icons/roomBack8.png
style:
top: 10%
left: 13%
width: 22%
- type: state-label
entity: group.lounge
prefix: "Living Room - "
style:
top: 10%
left: 9%
color:
font-size: 1.5vw
font-weight: light
text-align: left
- type: image
entity: group.lounge
image: /local/rooms/icons/switchOffGrey.png
tap_action: toggle
state_image:
"off": /local/rooms/icons/switchOffGrey.png
"on": /local/rooms/icons/switchOnGrey.png
style:
top: 10%
left: 21.2%
width: 3.5%
## Kitchen ##
- type: image
entity: group.kitchen
image: /local/rooms/icons/roomBack8.png
style:
top: 22%
left: 13%
width: 22%
- type: state-label
entity: group.kitchen
prefix: "Kitchen - "
style:
top: 22%
left: 7.5%
font-size: 1.5vw
font-weight: light
- type: image
entity: group.kitchen
image: /local/rooms/icons/switchOffGrey.png
tap_action: toggle
state_image:
"off": /local/rooms/icons/switchOffGrey.png
"on": /local/rooms/icons/switchOnGrey.png
style:
top: 22%
left: 21.2%
width: 3.5%
## Hall ##
- type: image
entity: group.hall_downstairs
image: /local/rooms/icons/roomBack8.png
style:
top: 34%
left: 13%
width: 22%
- type: state-label
entity: group.hall_downstairs
prefix: "Hall - "
style:
top: 34%
left: 6.5%
font-size: 1.5vw
font-weight: light
transform: translate(-50%, -50%)
- type: image
entity: group.hall_downstairs
image: /local/rooms/icons/switchOffGrey.png
tap_action: toggle
state_image:
"off": /local/rooms/icons/switchOffGrey.png
"on": /local/rooms/icons/switchOnGrey.png
style:
top: 34%
left: 21.2%
width: 3.5%
## Toilet ##
- type: image
entity: group.downstairs_toilet
image: /local/rooms/icons/roomBack8.png
style:
top: 46%
left: 13%
width: 22%
- type: state-label
entity: group.downstairs_toilet
prefix: "Toilet - "
style:
top: 46%
left: 7%
font-size: 1.5vw
font-weight: light
- type: image
entity: group.downstairs_toilet
image: /local/rooms/icons/switchOff.png
tap_action: toggle
state_image:
"off": /local/rooms/icons/switchOffGrey.png
"on": /local/rooms/icons/switchOnGrey.png
style:
top: 46%
left: 21.2%
width: 3.5%
## Outside ##
- type: image
entity: group.outside
image: /local/rooms/icons/roomBack8.png
style:
top: 58%
left: 13%
width: 22%
- type: state-label
entity: group.outside
prefix: "Outside - "
style:
top: 58%
left: 7.5%
font-weight: light
font-size: 1.5vw
- type: image
entity: group.outside
image: /local/rooms/icons/switchOff.png
tap_action: toggle
state_image:
"off": /local/rooms/icons/switchOffGrey.png
"on": /local/rooms/icons/switchOnGrey.png
style:
top: 58%
left: 21.2%
width: 3.5%
## Master Bedroom ##
- type: image
entity: group.master_bedroom
image: /local/rooms/icons/roomBack8.png
style:
top: 10%
left: 38%
width: 22%
- type: state-label
entity: group.master_bedroom
prefix: "Master Bedroom - "
style:
top: 10%
left: 35.5%
color:
font-size: 1.5vw
font-weight: light
text-align: left
- type: image
entity: group.master_bedroom
image: /local/rooms/icons/switchOffGrey.png
tap_action: toggle
state_image:
"off": /local/rooms/icons/switchOffGrey.png
"on": /local/rooms/icons/switchOnGrey.png
style:
top: 10%
left: 46%
width: 3.5%
## Erins Bedroom ##
- type: image
entity: group.erins_bedroom
image: /local/rooms/icons/roomBack8.png
style:
top: 22%
left: 38%
width: 22%
- type: state-label
entity: group.erins_bedroom
prefix: "Erin's Bedroom - "
style:
top: 22%
left: 35%
font-size: 1.5vw
font-weight: light
- type: image
entity: group.erins_bedroom
image: /local/rooms/icons/switchOffGrey.png
tap_action: toggle
state_image:
"off": /local/rooms/icons/switchOffGrey.png
"on": /local/rooms/icons/switchOnGrey.png
style:
top: 22%
left: 46%
width: 3.5%
## Upstairs Hall ##
- type: image
entity: group.hall_upstairs
image: /local/rooms/icons/roomBack8.png
style:
top: 34%
left: 38%
width: 22%
- type: state-label
entity: group.hall_upstairs
prefix: "Upstairs Hall - "
style:
top: 34%
left: 34.3%
font-size: 1.5vw
font-weight: light
transform: translate(-50%, -50%)
- type: image
entity: group.hall_upstairs
image: /local/rooms/icons/switchOffGrey.png
tap_action: toggle
state_image:
"off": /local/rooms/icons/switchOffGrey.png
"on": /local/rooms/icons/switchOnGrey.png
style:
top: 34%
left: 46%
width: 3.5%
## Clare's Office ##
- type: image
entity: light.clares_office
image: /local/rooms/icons/roomBack8.png
style:
top: 46%
left: 38%
width: 22%
- type: state-label
entity: light.clares_office
prefix: "Clare's Office - "
style:
top: 46%
left: 34.4%
font-size: 1.5vw
font-weight: light
- type: image
entity: light.clares_office
image: /local/rooms/icons/switchOff.png
tap_action: toggle
state_image:
"off": /local/rooms/icons/switchOffGrey.png
"on": /local/rooms/icons/switchOnGrey.png
style:
top: 46%
left: 46%
width: 3.5%
## END OF HOME ##All the shields icons etc can be sourced here: https://www.flaticon.com/
Here is my background and room background icons
thank you very much! will copy and adapt to my needs, coming from a heavily Tiled regular Ha setup, I think I can find much I need here. cool!
Glad I could help - make sure you put up your progress! I’d like to see how you get on 
Hey by the way, someone created a style override card. I forget the name of it but it may fix your text issue. It’s a custom card.
Thanks - I’ve seen that - the problem is that I can’t use custom cards as I use the interface on a Kindle Fire 7. They just don’t work on it 
