Pieter, I am not using tiles… Tell me via PM what do you want to style?
1 Like
Hi there,
Thanks for the nice info.
Can I ask you how can you change the icon place holder (the round area where the icon is). Size and borders, so ir can be changed to a more square format. I had that until the changes in 2024.02.
Thank you very much.
Pedro.
Share your code, as a first step, sometimes it’s i.e even relevant if it’s in nested cards
Thank you for your quick reply.
Right until 2024.01 I used the following code that draw almost square shapes around the icon. Now the code is not producing any effect on the shape:
card_mod:
style:
.icon-container .icon$: |
.shape {
border-radius: 15px !important;
height: 50px !important;
width: 50px !important;
margin-top: 8px !important;
margin-bottom: 5px !important;
margin-left: -5px;
margin-right: -5px;
}
Not using tiles.
What happened here:
- Tile card is added to HA.
- A card-mod code for customizing Tile card was made.
- You started using this code.
- The Tile card was changed (which is normal fact).
- The old card-mod is not working.
Suggest to be LESS dependent on it.
Learn how to use Code Inspector & see what changed in a card.
Also, suggest to ask similar card-mod questions in a huge card-mod thread.
1 Like
Thanks, yes I know that there have been some changes in the tile card and that changed the behaviour of my code,
I already done that a few days ago 
(on the large card_mod thread).
card_mod:
style:
ha-tile-icon$: |
.shape {
Sometime it makes life easier, if searching for a solution, sometimes not … but it’s never a good idea to “tag/ping” someone to ask a question 
… the answer to a question most of the times pops up, with an “open” question
1 Like
Thanks! That’s it.
Yes the change to ha-tile-icon was announced , i believe ( And mentioned/showed above in 1 of lldars examples ) … No long path, just right down in the Shadow !
1 Like
You can access the shape color with --tile-color: under ha-card { as well.
I generally use the .shape method, but thought I’d mention it.
@pmgsrosa I included code for adjusting the slider height and color if you use those as well.
type: tile
entity: light.tv_lights
hide_state: false
show_entity_picture: false
features:
- type: light-brightness
tap_action:
action: toggle
icon: mdi:light-recessed
card_mod:
style:
hui-card-features$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
--control-slider-border-radius: 4px !important;
height:15px !important;
--control-slider-color: orange !important;
--control-slider-background: red !important;
}
.: |
ha-card {
--tile-color: red !important;
}
1 Like
Edit: Deleted, wrong!, was distracted, look below, for right path
2 Likes
100% correct. Learned that the hard way with the climate card this evening!
I learned by “accident” doo to my lazy nature 
1 Like
Couldn’t get this code to work with the tile light card. The looong path may be necessary with this one.
1 Like
Here is our working solution, with the help of @Ildar_Gabdullin.
This changes the button colours and also the highlight colours when hovering to match the colour it will be if that’s the state.
- type: tile
entity: alarm_control_panel.home
name: "Home Alarm"
features:
- type: "alarm-modes"
modes:
- armed_home
- armed_away
- disarmed
card_mod:
style:
# hover colours
hui-card-features $ hui-alarm-modes-card-feature $ div ha-control-select $ div: |
#option-armed_home {
--control-select-color: #ffa800 !important;
}
#option-armed_away {
--control-select-color: #aa0000 !important;
}
#option-disarmed {
--control-select-color: #40b100 !important;
}
.: |
ha-tile-icon {
--tile-color:
{% set status = states(config.entity) %}
{% set colors = {
'armed_home': '#ffa800',
'armed_away': '#aa0000',
'disarmed': '#40b100'
} %}
{{ colors.get(status, 'grey') }};
}
ha-card {
--state-alarm_control_panel-armed_home-color: #ffa800;
--state-alarm_control_panel-armed_away-color: #aa0000;
--state-alarm_control_panel-disarmed-color: #40b100;
}
2 Likes
Weird, but you are right, i have have no clue where/what happened in this end 
My Lazy nature played me ! … i never clicked save, just removed the long-path, and tested in editor … another reminder to me
For the record - my proposed solution is a bit different:
type: tile
entity: alarm_control_panel.security
features:
- type: alarm-modes
modes:
- armed_home
- armed_away
- disarmed
card_mod:
style:
hui-card-features $:
hui-alarm-modes-card-feature $:
ha-control-select $: |
.option:nth-child(1)::before {
background-color: magenta !important;
}
.option:nth-child(2)::before {
background-color: orange !important;
}
.option:nth-child(3)::before {
background-color: cyan !important;
}
.: |
ha-card {
--state-alarm_control_panel-armed_home-color: magenta;
--state-alarm_control_panel-armed_away-color: orange;
--state-alarm_control_panel-disarmed-color: cyan;
}
It is not using these weird “–control-select-color” vars but depends on an order ))).
1 Like
An update to the prior solution.
If you want the colours to work for your history graph card too, then you can override the theme colour variables (introduced in 2022.12) in a custom.js file:
document.documentElement.style.setProperty('--state-alarm_control_panel-armed_home-color', '#ffa800');
document.documentElement.style.setProperty('--state-alarm_control_panel-armed_away-color', '#aa0000');
document.documentElement.style.setProperty('--state-alarm_control_panel-disarmed-color', '#40b100');
You will then only need the card-mod section for the highlight/hover:
card_mod:
# this works in conjunction with www/custom.js
style:
hui-card-features $ hui-alarm-modes-card-feature $ div ha-control-select $ div: |
#option-armed_home {
--control-select-color: #ffa800 !important;
}
#option-armed_away {
--control-select-color: #aa0000 !important;
}
#option-disarmed {
--control-select-color: #40b100 !important;
}
So you can remove this:
.: |
ha-tile-icon {
--tile-color:
{% set status = states(config.entity) %}
{% set colors = {
'armed_home': '#ffa800',
'armed_away': '#aa0000',
'disarmed': '#40b100'
} %}
{{ colors.get(status, 'grey') }};
}
ha-card {
--state-alarm_control_panel-armed_home-color: #ffa800;
--state-alarm_control_panel-armed_away-color: #aa0000;
--state-alarm_control_panel-disarmed-color: #40b100;
}
Result:
PS: Of course, you can just create a full theme too, but that may be overkill.
1 Like
thanks for the tag, I did find some mods for the climate card here: Style Tile: more-info - #8 by Mariusthvdb
I am not a big fan of the numbered nth-child solutions, as they are hard coded to the order of things.
Prefer the named elements myself, and theme color variables if possible.
not always an option though. In my situation, I am still wooing for a direct way to touch either the opacity (ha sets it to 1) or color of the selected button icon.