lawi75
January 15, 2021, 9:53am
1283
Newbe challange:
My end goal is to change the font of the temperature in a weather-forecast card but I’m not able to get the style element inserted in the right place (I guess) with shadow-roots etc…
Example code:
- type: weather-forecast
entity: weather.home
debug_cardmod: true
style:
hui-weather-forecast-card:
$:
ha-card:
$: |
.content {
...
}
show_forecast: false
The end goal (I guess) is to get a style tag inside the temp div or?
Hope any css/frontend guru can help
BR.,
1 Like
Wondering if anyone can help with an animation.
type: vertical-stack
cards:
- type: grid
columns: 1
square: false
cards:
- type: picture
image: local/header_information.jpg
tap_action:
action: navigate
navigation_path: /lovelace/upstairs
hold_action:
action: none
- type: conditional
conditions:
- entity: input_boolean.show_calendar
state: 'on'
card:
type: 'custom:atomic-calendar-revive'
entities:
- entity: calendar.bin_collection
name: Bin Collections
enableModeChange: true
firstDayOfWeek: 1
maxDaysToShow: 14
showDate: true
style: |
ha-card{
animation: fadeIn ease 2s;
-webkit-animation: fadeIn ease 2s;
-moz-animation: fadeIn ease 2s;
-o-animation: fadeIn ease 2s;
-ms-animation: fadeIn ease 2s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
- type: conditional
conditions:
- entity: input_boolean.eufy_advanced_settings
state: 'on'
card:
type: entities
entities:
- entity: input_datetime.eufy_schedule
- entity: input_boolean.eufy_weekend_clean
- entity: vacuum.robovac
name: Eufy Start / Stop
- entity: input_boolean.vacuum_disable
name: Disable Schedule
- type: grid
columns: 3
cards:
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/security
entity: alarm_control_panel.ha_alarm
icon: 'hass:bell-outline'
show_state: true
name: Security
- type: button
tap_action:
action: toggle
entity: input_boolean.guest_mode_switch
show_state: true
show_name: true
show_icon: true
- entity: input_boolean.house_option_alarmclock
hold_action:
action: more-info
show_icon: true
show_name: true
tap_action:
action: navigate
navigation_path: /lovelace/alarmClock
type: button
show_state: true
- entity: climate.zone_1
name: Heating
hold_action:
action: navigate
show_icon: true
show_name: true
tap_action:
action: more-info
type: button
show_state: true
- type: 'custom:button-card'
aspect_ratio: 1/1
name: Next Bin
entity: input_select.bins
hold_action: none
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.show_calendar
show_icon: true
show_name: false
show_state: true
show_label: true
label: |
[[[
return 'Collection: ' + states['sensor.bin_day'].state;
]]]
state:
- value: Recycling
color: 'rgb(50, 50, 50)'
- value: Refuse
color: 'rgb(21, 150, 49)'
- value: Garden
color: 'rgb(92, 65, 12)'
styles:
icon:
- margin-top: '-20px'
- margin-bottom: 0px
name:
- font-size: 12px
- color: 'rgb(150, 150, 150)'
state:
- margin-top: '-55px'
- padding-bottom: 10px
label:
- font-size: 12px
- color: 'rgb(150, 150, 150)'
- margin-top: '-20px'
- margin-bottom: 20px
- entity: input_boolean.eufy_advanced_settings
hold_action:
action: more-info
icon: 'mdi:robot-vacuum'
name: Eufy Settings
show_icon: true
show_name: true
show_state: false
tap_action:
action: toggle
type: button
1 Like
lawi75
January 15, 2021, 2:02pm
1285
Looks like the font size is set in :host, but how do I override that for div class “temp”?
KTibow
January 15, 2021, 2:38pm
1286
I’m confused. You might be able to do this by progressing from height: 0; to height: unset;.
I’m getting really close now!
See the video of it sliding open:
This is the style code I have so far:
style: |
ha-card{
animation-duration: 1s;
animation-name: slidein;
}
@keyframes slidein {
0% {
opacity:0;
margin-bottom: -200px;
}
100% {
opacity:1;
margin-bottom: 0px;
}
}
2 Likes
Styling Weather Card:
- type: weather-forecast
entity: weather.home_met
show_forecast: true
card_mod:
style: |
.name-state .name {
color: orange;
font-size: 2px;
}
.name-state .state {
color: red;
font-size: 7px;
}
.temp-attribute .temp {
color: green;
font-size: 40px !important;
}
.temp-attribute .temp span {
color: blue;
font-size: 7px !important;
}
.temp-attribute .attribute {
color: cyan;
font-size: 7px;
}
.forecast .temp {
color: orange;
}
.forecast .templow {
color: blue;
}
.forecast div {
color: magenta;
}
How to replace the main picture:
type: weather-forecast
entity: weather.home_met
card_mod:
style: |
svg {
display: none;
}
.icon-image {
background-image: url("https://www.pngall.com/wp-content/uploads/11/Weather-No-Background.png");
background-size: 100% 100%;
height: 64px;
}
More examples are described here .
4 Likes
Hi all,
How can I reach the highlighted #root div in the picture above?
This is one of several attempts I’ve made, but I’m a bit loss…
...
type: "custom:mod-card" # MOD CARD FOR HORIZONTAL STACK
style:
.: |
ha-card {
background: rgba(255, 255, 255, 1);
height: 70px !important;
margin: 0 5%;
width: 90%;
position: absolute;
bottom: 10px;
border-radius: 35px;
text-align: center;
}
hui-horizontal-stack-card:
$:
#root {
justify-content: center !important;
align-items: center !important;
}
card:
type: horizontal-stack # HORIZONTAL STACK FOR TOP BANNER
cards:
- type: "custom:button-card"
...
KTibow
January 16, 2021, 4:23pm
1291
You indented hui-horizontal-stack-card:. It should be 1 less indented.
KTibow
January 16, 2021, 4:24pm
1292
Instead of using a conditional card, show/hide it using Jinja templating.
That sounds way beyond my pay grade!
KTibow
January 16, 2021, 4:30pm
1294
Do you get the first part? Do that first, and then I’ll explain it.
You have lost me - what first part?
KTibow
January 16, 2021, 4:35pm
1296
Make it so that the card always displays, instead of being inside of a conditional.
Damn, I knew I was missing something stupid!!!
Ah - I see. So obviously I can make the card into a standard entities card. How would Jinja be used to make the card show / hide when a button is pressed then?
KTibow
January 16, 2021, 4:40pm
1299
Make two animations. The first one is showing. The second one is hiding. Use Jinja2 templating with an if-else statement. Once it finishes, it remains in that state.
Vies123
January 16, 2021, 4:43pm
1300
I’m sure it is something trivial, but since I dont know CSS that well, I better ask. I have clock on my home screen and I have been using this code to make it bigger on bottom of the screen
- cards:
- entities:
- entity: sensor.time
gridcol: 2 / 5
gridrow: 3
show_icon: false
show_name: false
show_state: true
style: |
ha-card {
font-size: 60px;
height: 100%;
background-color: rgba(0, 0, 0, 0.50)
}
type: glance
It used to work just fine, but after I update (from some version from early 2020) to recent Home assistant, it doesnt work anymore. Now all font sizes above 28px get cut from top and bottom. So I think I need some additional code, but I have no idea what.
KTibow
January 16, 2021, 4:44pm
1301
Are you using layout-card?
Vies123
January 16, 2021, 6:17pm
1302
Yes I am. Does it make difference?
