Did you find a resolution? I noticed the issue was closed?
Good day, Id like to combine the tiles with the default madia_player. Is it possible to force the tile card to expand to the media player size.
Iāve had luck by just defining how many columns I want and letting it take care of the size. It can make things difficult to properly size iconsā¦ but not to hard.
1 Like
@joshluster thank you. can you tell me what you selected here:
config:
columns: 3
column_width: 75px
row_height: 75px
gap: 15px
trying to get a separate tile to change its color (have no color set and use transparent icons to make them āfloatā, I am stuck ā¦
since the tiles run scripts, theres no use for color_on and color_off, and i think i am forced to use the style template below, unfortunately is doesnāt work. :
entities:
- entity: script.opstart_direct
image: /local/activities/opstart75.png
style_template: "if (entities['input_select.activity'].state === 'Opstart') return 'color: #F0C209';"
this is how the tiles show at the moment:
my goal is to have the Tile with the script that was selected have a colored background, so i can see which one was selectedā¦
Ive asked on the Tiles Github, but no response or instruction so far.
Hope you can help,
Cheers,
Marius
Stupid mistake - I had copied and pasted the wrong thing into the frontend: section. Mine is now working
config:
columns: 4
row_height: 75px
gap: 0px
color: hsla(0, 0%, 98%, 0)
color_on: hsla(0, 0%, 98%, 0)
color_off: hsla(0, 0%, 98%, 0)
entities:
- entity: script.george_sonos
image: /local/georgestrait1.png
column: 1
row: 1
column_span: 2
row_span: 2
- entity: script.brad_sonos
image: /local/bradpaisly1.png
column: 3
row: 1
column_span: 2
row_span: 2
- entity: script.country_sonos
image: /local/country90.png
column: 1
row: 3
column_span: 2
row_span: 2
- entity: script.garth_sonos
image: /local/garth1.png
column: 3
row: 3
column_span: 2
row_span: 2Can you post your corrected frontend: section. I still canāt get mine working.
My work-around to kind of do this, is to have template switches (or input_booleans linked to automations) that fire whatever you want them to.
Try using ābackground-colorā rather than just ācolorā to change the tile colour, I thought ācolorā just changed the primary text.
https://github.com/c727/home-assistant-tiles#entity-config
color is for non-toggle tiles.
what would your suggestion for a template switch look like when used for an input_select in my case? Im confused as it would not have a value on/off?
The style-template would be so very adequate ā¦ if one could get it to work that is 
maybe i can create a binary sensor per input_select option and use the latest addition :https://github.com/c727/home-assistant-tiles#changelog or have the input_select also set an input_boolean for that option and use that? Im wondering if i wouldnāt create a loop here.
I was referring to color in CSS land sorry, not this component, give it a go such that the style template has a component that looks like this (this didnāt change secondary text color for me so I didnāt end up using it):
style_template: "if (state === 'on') return 'background-color: hsl(37, 96%, 48%); color: hsl(0, 0%, 98%)'"
Iām using an input select as part of mine as well. Mine uses the tiles Service command via the tiles component (against input_boolean entities which make up the tiles themselves). It looks something like this:
- entity: input_boolean.tile_tablet_button_alarm_clock
label_state: input_boolean.alarmclock_status
label_sec: Alarm Clock
text_sec_size: '0.7em'
icon: mdi:alarm
column_span: 3
color: 'hsla(0, 0%, 98%, 0)' #whitetransparent
color_on: 'hsl(198, 97%, 48%)' #blue
color_off: 'hsla(0, 0%, 98%, 0)' #whitetransparent
text_color: 'hsl(0, 0%, 0%)' #black
text_color_on: 'hsl(0, 0%, 98%)' #white
text_color_off: 'hsl(0, 0%, 0%)' #black
service: input_select.select_option
data:
entity_id: input_select.tablet_panel_detail
option: Alarm Clock
Then I have automations that run based on the input select value (hiding groups and controlling the button):
- alias: Tablet Alarm Clock Panel On
trigger:
platform: state
entity_id: input_select.tablet_panel_detail
to: "Alarm Clock"
action:
- service: group.set_visibility
entity_id: group.tile_tablet_panel_alarm_clock
data:
visible: True
- service: homeassistant.turn_on
entity_id: input_boolean.tile_tablet_button_alarm_clock
- alias: Tablet Alarm Clock Panel Off
trigger:
platform: state
entity_id: input_select.tablet_panel_detail
from: "Alarm Clock"
action:
- service: group.set_visibility
entity_id: group.tile_tablet_panel_alarm_clock
data:
visible: False
- service: homeassistant.turn_off
entity_id: input_boolean.tile_tablet_button_alarm_clock
EDIT: Ignore the over-assignment of colours in my customise bit, Iām doing some weird stuff with hiding and showing groups and found this was required to make sure the colour was correctly applied on each group visibility change.
Thank you for your help
well thats what i thought to be using:
style_template: "if (entities['input_select.activity'].state === 'Opstart') return 'color: #F0C209 ';"
do you spot any mistakes here?
ive got them at least use the color_off, but no tiles is ever turned-onā¦ when i click the action follows fine, the script runs, but the tiles stay Offā¦ do i need anything besides these, iow dont these booleans turn on/off when clicked?:
homeassistant:
customize:
input_text.tiles_activity:
custom_ui_state_card: state-card-tiles
config:
columns: auto-fit
column_width: minmax(75px, 75px)
color_on: '#F0C209' #'hsl(198, 97%, 48%)'
color_off: '#555B65'
# color: "var(--paper-card-background-color)"
# text_align: center
text_uppercase: false
icon_size: 75px
entities:
- entity: input_boolean.activity_opstart #script.opstart_direct
service: script.turn_on
entity_id: script.opstart_direct
image: /local/activities/opstart75.png
- entity: input_boolean.activity_opstaan # script.opstaan_direct
service: script.turn_on
entity_id: script.opstart_opstaan_direct
# label: Opstaan
image: /local/activities/opstaan75.png
- entity: input_boolean.activity_aan_de_slag #script.aan_de_slag_direct
# label: Aan de slag!
image: /local/activities/aandeslag75.png
service: script.turn_on
entity_id: script.opstart_aan_de_slag_direct
- entity: input_boolean.activity_uit_huis #script.uit_huis_direct
# label: Uit huis
image: /local/activities/uithuis75.png
service: script.turn_on
entity_id: script.uit_huis_direct
- entity: input_boolean.activity_gym #script.gym_direct
# label: Gym
image: /local/activities/gym75.png
service: script.turn_on
entity_id: script.gym_direct
- entity: input_boolean.activity_selamat_makan #script.selamat_makan_direct
# label: Selamat makan
image: /local/activities/selamatmakan75.png
service: script.turn_on
entity_id: script.selamat_makan_direct
- entity: input_boolean.activity_home_theater #script.home_theater_direct
# label: Home theater
image: /local/activities/hometheater75.png
service: script.turn_on
entity_id: script.home_theater_direct
more_info: script.home_theater_direct
# style_template: "{% if is_state ('input_select.activity','Home theater') %} color: green {% endif %}"
- entity: input_boolean.activity_naar_bed #script.naar_bed_direct
# label: Naar bed
image: /local/activities/naarbed75.png
service: script.turn_on
entity_id: script.naar_bed_direct
input_boolean:
activity_opstart:
name: Opstart
initial: off
activity_opstaan:
name: Opstaan
initial: off
activity_aan_de_slag:
name: Aan de slag
initial: off
activity_gym:
name: Gym
initial: off
activity_home_theater:
name: Home theater
initial: off
activity_selamat_makan:
name: Selamat makan
initial: off
activity_uit_huis:
name: uit huis
initial: off
activity_naar_bed:
name: Naar bed
initial: off
finally made it , but not with the style_templateā¦
Have made input_booleans for all tiles, and created extra scripts-sections to set these on and off, via an extra group (which makes switching all others off while only the selected is switched on easy)ā¦
figured that when i do have entities now that have an On and Off state, i might as well set the color_on and _off in the tiles grid section.
config:
columns: auto-fit
column_width: minmax(75px, 75px)
color_on: '#F0C209'
color_off: "var(--paper-card-background-color)" #'#555B65'
opstart_direct:
alias: Opstart direct
sequence:
- service: input_select.select_option
data:
entity_id: input_select.activity
option: Opstart
- service: homeassistant.turn_off
data:
entity_id: group.activity_select_booleans
- service: input_boolean.turn_on
data:
entity_id: input_boolean.activity_opstart
A lot of extra code, while I still think a style_template for the initial setup should be possible.
Donāt understand why:
style_template: "if (entities['input_select.mode'].state === 'Normal') return 'color: red'; else return 'color: green';"
or
style_template: "{% if is_state ('input_select.mode','Normal') %} color: 'green' {% endif %}"
wont workā¦
Anyways, thanks for your assistance!
Marius
Glad to see you got it working, what I was trying to explain (poorly) is that you need to do it like this:
style_template: "if (entities['input_select.mode'].state === 'Normal') return 'background-color: red'; else return 'background-color: green';"
INSTEAD OF:
style_template: "if (entities['input_select.mode'].state === 'Normal') return 'color: red'; else return 'color: green';"
ācolorā in this custom UI and ācolorā in CSS/HTML (which is what style_template applies) are different things.
2 Likes
hi @mynameisdaniel
back again.
background-color working as you described, perfect!
what would i need the color: for coloring the icon and text? is below syntax correct for that?
- entity: script.audio_auditorium_off
label_sec: 'Audio A off'
style_template: "if (entities['sensor.audio_auditorium_state'].state === 'on') return 'background-color: #555B65;color: #F0C209';
else return 'background-color: #F0C209; color: #555B65';"
icon: mdi:music-off
it only colors the icon now, and adding a label_template didnāt helpā¦
another tiles question: what could be the reason the text-decoration: line-through doesnāt do anything in
entities:
- entity: switch.sw_audio_auditorium_template
label_sec: Auditorium
icon_template: "if (state === 'on') return 'mdi:music';
else return 'mdi:music-off';"
style_template: "if (state !== 'on') return 'text-decoration: line-through';"
its copied straight from https://github.com/c727/home-assistant-tiles/blob/0303e12376be1b4b1e5f7c6299f1d5565abd729c/configuration.yaml#L101
fwiw: the issue of line-throughnot happening is on Safari Mac, not in Chrome. It does occur on the iOS app though.
hi guys, how can I turn off the auto fit-in feature?
Iād like to have 4 columns of tiles, each of the column should have the same width but now the last colum is always auto fitting to the card.
Can someone help?
Thatās what Iām getting now:
EDIT :SOLVED: I had a typo in my config 
1 Like
what would be the code for coloring the label_sec in CSS?
this is what i have right now:
- entity: script.audio_auditorium_on
label_sec: 'Audio A'
style_template: "if (entities['sensor.audio_auditorium_state'].state === 'on') return 'background-color: #F0C209; color: #555B65';
else return 'background-color: #555B65; color: #F0C209';"
icon: mdi:music
showing:
Need to color the āAudio Aā depending on the same template as the icon (done with color: )
