anyone knows how to modify the app-header?
app-header-background-color: changes the background color, but i´d like to add a blurr-effect to it using this:
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
1 Like
I’ve updated to 2023.5.0b0 and it appears there have been more frontend changes that affect card-mod.
Since 2023.4.0 I’ve used this in my themes to get the look of my dashboards;
HomeIQ Dark:
card-mod-theme: HomeIQ Dark
card-mod-root: |
.header {
display: none;
}
div#view {
margin-top: 0 !important;
}
card-mod-view: |
#view {
height: 100vh !important;
overflow: auto;
}
But since updating to 2023.5.0b0 setting the div#view margin to 0 isn’t working and I’m left with a blank space at the top of my screen.
Does anyone know how I can remove the space now?
Try the config here:
1 Like
Anyone know how to change the background of the assist popup? This one seems to work for all popups except the assist popup.
card-mod-more-info-yaml: |
$: |
.mdc-dialog .mdc-dialog__content {
background-color: var(--primary-background-color) !important;
}
I have this:
ha-card {
background: url({{state_attr("camera.tpc2_sd_stream","entity_picture")}});
background-repeat: repeat;
background-size: 100% 100%;
thou unfortunately 5min refresh rate , dunno how to fix that, or whether it’s the card, or dashboard update-interval to address
that is for a view?
No sorry, it’s for a card (apex-chart ) maybe that’s where the 5min refresh-rate comes from
EDIT: Nope refresh-rate seems to be controlled by the view(or browser) 
after searching and trying for quite some time, if someone want´s to modify the back-arrow of a subview:
ha-icon-button-arrow-prev
1 Like
Hi, what would be the correct way/syntax to display a card on card?
I am trying to put a windrose on a map via a picture elements card. I have 3 questions:
- How can I “size” a card.
- how can I rotate a card.
3. How can I make a card transparent?
Below my result so far. I know it dos not makes sense what I am displaying here (PV etc.) but it is a sandbox to play with.
type: picture-elements
elements:
- type: custom:windrose-card
title: Windrose Buienradar
hours_to_show: 24
max_width: 400
refresh_interval: 360
windspeed_bar_location: bottom
windspeed_bar_full: false
wind_direction_entity: sensor.buienradar_wind_direction_azimuth
windspeed_entities:
- entity: sensor.buienradar_wind_speed
name: Windkracht
wind_direction_unit: degrees
input_speed_unit: kph
output_speed_unit: bft
windrose_draw_north_offset: 0
cardinal_direction_letters: NOZW
matching_strategy: speed-first
direction_speed_time_diff: 1
transform: rotate(0.35turn)
style:
top: 32%
left: 60%
card_mod: null
style: |
ha-card {
background-color: transparent
}
- type: state-badge
entity: sensor.pv_with_color
style:
top: 32%
left: 60%
image: https://demo.home-assistant.io/stub_config/floorplan.png
Can anyone help me apply a background image to an entire page in a theme, including behind the header? I imagine I need to navigate the ShadowDOM but I’m having hard time figuring it out.
just for reference, I have to re-iterate on this. can not get the app-header, app-toolbar mod to work anymore, and only
/* Set the toolbar background. */
.header, .toolbar {
background: {{'radial-gradient(var(--primary-color),var(--card-background-color))'
if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
else 'var(--primary-color)'}};
color: var(--text-primary-color);
}
makes it happen.
I do still see app-header-text-color: to be functional in regular themes.
Anyone has a hint?
DASHBOARD SCROLLIN ISSUE v.2023.5.3:
If you have the minimalist theme or otherwise have this piece of code in your theme under card-mod-root-yaml:
div#view{
transform: initial;
padding: 0 !important;
position: fixed !important;
margin: 0 !important;
width: 100%;
}
Then scrollin probably doesn’t work anymore in all dashboards, remove this piece of code and it works again
1 Like
Were you able to figure this one out?
Having the same issue on 2023.5.X
It’s not just the space at the top but the last card on the page is also cut off by the bottom navbar.
That’s interesting, I don’t use minimalist theme or have that code anywhere but I do have problems with scrolling.
It is intermittent and only affects HA but I have no idea what is causing it. Refreshing always bring back the ability to scroll so I just shrug and carry on. I know there have been a quite a few frontend changes recently and I am sure I read something about scrolling?
It’d be nice to know the cause (and a fix) though…
I have a lot of problems with scrolling on iPad as well, starting recently. Whole square sections are then empty, sometimes on top and sometimes on bottom of the screen or the menu-column is missing, … Very annoying. But I’m somehow sure, that it is not related to card_mod.
I used your solution after updating to 2023.4, thanks worked great. After updating to 2023.5 I have a large gap at the top, were you able to fix again?
yes i also found a solution for 2023.5, i thing the height of 100% should also work
card-mod-root: |
.header {
display: none;
}
#view {
padding: 0 !important;
height: 100vh !important;
}
1 Like
Back in business,Thank you
I’ve the following card:
mushroom-template-card-defaults: &mushroom-template-card-template
type: custom:mushroom-template-card
secondary: ""
icon_color: blue
tap_action:
action: more-info
fill_container: true
card_mod:
class: small-icon
type: custom:vertical-stack-in-card
cards:
- <<: *mushroom-template-card-template
entity: sensor.moon_phase_image
picture: "{{ state_attr(entity, 'entity_picture') }}"
layout: vertical
card_mod:
style: |
ha-card {
margin: 12px;
border-style: none !important;
}
:host {
--mush-icon-size: 55px;
}
- <<: *mushroom-template-card-template
primary: "{{ states('sensor.astroweather_moon_phase') }} %"
icon: "{{ state_attr('sensor.moon_phase', 'icon') }}"
entity: sensor.moon_phase
- <<: *mushroom-template-card-template
primary: "{{ (as_timestamp(states('sensor.astroweather_moon_next_rising'))) | timestamp_custom(('%H:%M') ) }}"
icon: mdi:arrow-up-circle-outline
entity: sensor.astroweather_moon_next_rising
- <<: *mushroom-template-card-template
primary: "{{ (as_timestamp(states('sensor.astroweather_moon_next_setting'))) | timestamp_custom(('%H:%M') ) }}"
icon: mdi:arrow-down-circle-outline
entity: sensor.astroweather_moon_next_setting
card_mod:
class: vertical-stack-in-card-moon-card-spacing
Trying to move the remaining card_mod style into a theme with the class moon-image:
- <<: *mushroom-template-card-template
entity: sensor.moon_phase_image
picture: "{{ state_attr(entity, 'entity_picture') }}"
layout: vertical
card_mod:
class: moon-image
ha-card under class is working fine.
The :host element NOT …
100_raeume:
card-mod-theme: 100_raeume
card-mod-card: |
ha-card.moon-image {
margin: 12px;
border-style: none !important;
}
ha-card.moon-image :host {
--mush-icon-size: 55px;
}
ha-card.vertical-stack-in-card-moon-card-spacing {
height: 160px;
--mush-spacing: 0px 0px 0px 0px !important;
}
Any help is appreciated.
Thanks.