Dear all:
Would like to ask styling options of tile card, I plan to overlay some to floor plan picture element card, and the space is tight on small screens. So I’d like to ask if there is a way to only show icon (like state-icon) when screen width is below 600px?
For bigger screen I have space to display the tile car without issue, it’s mainly a problem on iPhone. I prefer tile card to state-icon as it can present more info. Many thanks in advance!
Ok answer to my own question, yes it’s possible and I even managed to reduce the gaps between the tiles (so in 203px height I can squeeze in 5 tiles). However it’s not without problem:
Code below:
type: custom:mod-card
card:
type: vertical-stack
cards:
- type: tile
entity: weather.openweathermap
state_content:
- temperature
- humidity
- wind_speed
vertical: false
features_position: bottom
card_mod:
style: |
ha-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0px !important;
margin: 0 !important;
--tile-min-width: 250px !important;
--tile-height: 30px !important; /* reverted height */
height: 30px !important; /* reverted height */
}
@media (max-width: 600px) {
ha-card {
width: 50px !important;
height: 30px !important; /* reverted height */
--tile-min-width: 50px !important;
--tile-height: 30px !important; /* reverted height */
}
ha-tile-info { display: none !important; }
ha-icon { --mdc-icon-size: 28px !important; }
}
- type: tile
entity: switch.adaptive_lighting_indoor_lights
name: Adaptive Lighting
state_content:
- state
- color_temp_kelvin
- brightness_pct
vertical: false
features_position: bottom
card_mod:
style: |
ha-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0px !important;
margin: 0 !important;
--tile-min-width: 250px !important;
--tile-height: 30px !important;
height: 30px !important;
}
@media (max-width: 600px) {
ha-card {
width: 50px !important;
height: 30px !important;
--tile-min-width: 50px !important;
--tile-height: 30px !important;
}
ha-tile-info { display: none !important; }
ha-icon { --mdc-icon-size: 28px !important; }
}
- type: tile
entity: sensor.cheap_electricity_period_start
name: Cheap Electricity
icon: mdi:cash-multiple
state_content: description
vertical: false
features_position: bottom
card_mod:
style: |
ha-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0px !important;
margin: 0 !important;
--tile-min-width: 250px !important;
--tile-height: 30px !important;
height: 30px !important;
}
@media (max-width: 600px) {
ha-card {
width: 50px !important;
height: 30px !important;
--tile-min-width: 50px !important;
--tile-height: 30px !important;
}
ha-tile-info { display: none !important; }
ha-icon { --mdc-icon-size: 28px !important; }
}
- type: tile
entity: binary_sensor.workday_today
name: Work Day
vertical: false
features_position: bottom
card_mod:
style: |
ha-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0px !important;
margin: 0 !important;
--tile-min-width: 250px !important;
--tile-height: 30px !important;
height: 30px !important;
}
@media (max-width: 600px) {
ha-card {
width: 50px !important;
height: 30px !important;
--tile-min-width: 50px !important;
--tile-height: 30px !important;
}
ha-tile-info { display: none !important; }
ha-icon { --mdc-icon-size: 28px !important; }
}
- type: tile
entity: binary_sensor.on_holiday
name: Holiday Status
vertical: false
features_position: bottom
card_mod:
style: |
ha-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0px !important;
margin: 0 !important;
--tile-min-width: 250px !important;
--tile-height: 30px !important;
height: 30px !important;
}
@media (max-width: 600px) {
ha-card {
width: 50px !important;
height: 30px !important;
--tile-min-width: 50px !important;
--tile-height: 30px !important;
}
ha-tile-info { display: none !important; }
ha-icon { --mdc-icon-size: 28px !important; }
}
card_mod:
style: |
ha-card {
margin: 0px !important;
padding: 0px !important;
background: rgba(128, 128, 128, 0.5);
border-radius: 12px;
box-shadow: none;
display: inline-block;
}
This is probably a bit more work to setup, but it uses only “stock” capabilities. If you look at the visibility section for tiles (or maybe it would be better as a section), you can add a condition for SCREEN. So you could do a section for mobile with one layout and a section for other things. The screen visibility option doesn’t give you granular control for the pixel, but it might be close enough.
Could be the ripple which is defined in ::before pseudo class I believe
Use card_mod class configuration and then style your class in a card_mod theme.
I note that v4 beta now can style stacks, so you would be able to ditch mod_card. Also, grid sections can be styled which may give you some more options.
Thanks a lot for your reply, and look forward to V4.
Can you elaborate a bit more on this and how possible to make the clickable area aligned with where the tiles are displayed?
Have a great day!
