BradAU
April 27, 2023, 7:01pm
1405
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?
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
No sorry, it’s for a card (apex-chart ) maybe that’s where the 5min refresh-rate comes from(or browser)
mase
May 4, 2023, 9:31pm
1411
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
sender
May 6, 2023, 4:47pm
1412
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.
Arroma
May 17, 2023, 10:58am
1416
DASHBOARD SCROLLIN ISSUE v.2023.5.3: 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
MRobi
May 17, 2023, 1:26pm
1417
Were you able to figure this one out?
klogg
May 17, 2023, 1:48pm
1418
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.
cyn
May 20, 2023, 12:53pm
1420
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?
Mar1us
May 20, 2023, 2:57pm
1421
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
cyn
May 20, 2023, 4:12pm
1422
Back in business,Thank you
heinemannj
May 21, 2023, 8:09am
1423
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.: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.
Is it possible to replace the 3 dots menu icon that’s on the navbar with just the assist icon?
