Does the style show in the styles tab? I don’t see card-mod, so maybe try saving and trying again.
Try out this.
style:
ha-card {
background-color: rgba(0,0,0,0);
}
.time-picker-content {
background-color: red;
}
time-unit:
$: |
.time-unit {
background-color: green !important;
}
1 Like
Yup, that was it.
Thanks, I achieved everything I wanted
entity: input_datetime.XXXXX
hide:
name: true
hour_step: 1
layout:
align_controls: center
name: inside
link_values: true
minute_step: 5
name: ''
style:
.: |
ha-card {
width: 30%;
box-shadow: none;
background-color: rgba(0,0,0,0);
}
.time-picker-row:
.time-picker-content:
.: |
.time-separator {
display: none;
}
time-unit:
$: |
.time-unit {
padding: 2px !important;
}
.time-input {
border: 2px solid var(--primary-color) !important;
background-color: rgba(0,0,0,0) !important;
color: black !important;
border-radius: 5px;
}
.time-picker-icon {
color: var(--primary-color) !important;
}
type: 'custom:time-picker-card'
3 Likes
Hi everyone,
I am having an issue that nobody else seems to have. Not sure it is related to card-mod. All I want is to have the border of a card change color when the entity is on. The following card does that but when I click the button the light turns on as it should but the border color change doesn’t happen until I press the button a second time. Rarely but sometimes, the color change does occur but several seconds later. Any idea what might be the problem? Many thanks in advance.
entity: switch.escalier
hold_action:
action: more-info
icon: 'hass:lamp'
show_icon: true
show_name: true
show_state: false
style: |
ha-card {
border: {% if is_state('switch.escalier', 'on') %} 2px solid green {% endif %};
}
tap_action:
action: toggle
type: button
Try exiting edit mode and/or refreshing the page.
tried that but behaviour remains the same.
You should try button-card, if you use it you could just do:
state:
- styles:
card:
- border: 2px solid green
value: 'on'
It works great for me as long as I’m not in edit mode.
Thanks for the suggestion. This is interesting because this way of doing it has the exact same behaviour which makes me think the problem is elsewhere!! But where…?
For what? button-card is a custom card you can install with HACS.
yes this is what I did, it has the same behaviour with the custom:button-card!
Can anyone help me target and remove the “display” property on the “ha-svg-icon” element?
The path should be:
ha-card > div.mmp-player > div.mmp-player__core.flex > div.entity__icon > ha-icon > ha-svg-icon
I’m trying to change the icon size of mini-media-player
Or maybe someone knows how to modify a variable (ex. --mini-media-player-scale) but only affect a specific element (ha-svg-icon)?
display isn’t important, that just changes whether it’s hidden or not there at all or anything like that. Try:
style: |
div.entity__icon > ha-icon {
--mdc-icon-size: 12px;
}
Change the 12px
1 Like
That worked perfectly, thanks!
Hi @thomasloven, i’m assembling a new dashboard in panel mode, i’m trying to get rid off the scroll bar on the right. How can i do that?
The code so far for this part:
title: Casa
views:
- title: Painel
panel: true
cards:
- type: picture-elements
image: /local/background.png
style:
overflow: hidden
1 Like
I have a question. I noticed when I use picture-elements and style the elements (for instance a custom card) with card-mod, the height and width is all screwed up. If I use the normal style options (like picture-element docs explain) it works fine. The thing is: I need to use card mod for modifications. But then the height and weight variables don’t work normally.
For instance, putting this style variables in the card mod way messes up height and weight (other variables work fine).
style:
'--mini-media-player-accent-color': var(--music-accent-color)
'--ha-card-background': '#000000'
'--ha-card-border-radius': '0px 0px 20px 20px'
opacity: 70%
left: 50%
top: 50%
height: 100%
width: 100%
Is there a way around this, or am I using it wrong?
Need some help with my Alarm Card.
The CSS applies correctly when the card/screen initially loads, but when I arm/disarm the alarm the second action button reverts to the theme’s styling. It happens on the second button no matter which alarm state I choose.
Thanks in advance!
Here’s a portion of my code:
style:
.actions mwc-button:
$: |
button {
min-height: 50px !important;
font-size: 16px !important;
margin-right: 10px !important;
--mdc-theme-primary: #FFFFFF !important;
}
I’ve tried adding another bit specifically targeting the nth of mwc-button. No success.
Before:
After:
