if you have any sugestions - then you can of course provide information what else needs / should be considered…
But replying like you did in your response isn’t in anyway helpful for me, neither for others I guess.
2 Likes
Does it work to restore old shadows?
Surely card-mod works. Let’s make people spend X hours to restore the old look. No problem. Others who disagree are free to move to another software. Freedom.
Surely I will do it. But not with a haste which is demonstrated when people say that everything may be fixed by changing some variable.
that’s HA with the default 2022.11 “default” theme:
That’s the “restore old theme” design:
That’s the “old” theme without shadows (as originally provided by Frenck)
and there’s also a theme where round cornors have been removed completely:
- without shadows
- and with shadows - if you wish
If you let me know, if anything (regarding shadows) is missing or not yet correct, I can try to solve that in the theme…
5 Likes
I will try to investigate it ASAP.
Do you by any chance now why this in themes does not work
frontend:
themes:
no_borders_dark:
ha-card-border-radius: 0px
ha-card-border-width: 0px
ha-card-border-color: rgba(0, 0, 0, 0)
ha-card-background: rgba(0, 0, 0, 0)
ha-card-border-style: none
stack-card-margin: 0
modes:
dark:
text-primary-color: white
primary-text-color: white
secondary-text-color: white
also tried
modes:
dark:
text-primary-color: white
ha-card-primary-text-color: white
ha-card-secondary-text-color: white
but it works with card-mod
card_mod:
style:
.: |
ha-card {
--primary-text-color: white;
--secondary-text-color: white;
}
Maybe it would be better to move your issue and open a new thread? what I can say for now: The theme works for me (I’m using a theme directory), but only until I refresh the browser. I kept something in mind that there is an issue on Github.
1 Like
You can change the shadows since forever, just use it your theme yaml.
ha-card-box-shadow: '0px 2px 4px 0px rgba(0,0,0,0.16)'
The four px variables are the sides of the button (to make the shadow) and the rgba value is th color+transparency.
Creates this shadow around cards.
Better to use the old value “0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)”.
Unfortunately, not everything may be reverted to the “old style” by using a theme only; a local tuning with card-mod is required; also, some custom cards work not properly in 2022.11.
A bit later I will prepare my proposals (as well as register issues for custom cards).
1 Like
I don’t like the new outlines to be honest. It’s a matter of taste, but I would really like to have the option to change back or disable rounded corners and outlines and stuff like this when it’s ‘changed’ in HA. I’m sticking to the Slate theme, which resembles the previous HA theme.
edit: Otherwise I’m extremely happy, running HA almost 3 years, rock solid! People ask about it all the time, when they see my setup and they all want to start running Home Assistant 
1 Like
Does the v2022.11.1 have some changes in the picture-elements card compared to v2022.11.0 or earlier ?
With v2022.11.0 it looked well:
But with v2022.11.1 I see some black borders:
Attached the (unchanged) card code:
type: picture-elements
image: /local/images/HA-Kachel.png
elements:
- type: state-icon
entity: sensor.ha_online
style:
left: 71%
top: 26%
- type: state-label
entity: sensor.ha_online
prefix: 'UpTime: '
style:
color: black
font-size: 150%
left: 71%
top: 36%
- type: image
entity: binary_sensor.latest_available_version_update_available
image: ''
state_image:
'on': /local/images/HA-upgrade.png
style:
left: 33%
top: 64%
- conditions:
- entity: binary_sensor.latest_available_version_update_available
state: 'off'
elements:
- entity: sensor.installed_version
style:
left: 71%
top: 55%
type: state-icon
- entity: sensor.installed_version
prefix: v
style:
color: black
font-size: 125%
left: 71%
top: 65%
title: text
type: state-label
type: conditional
- conditions:
- entity: binary_sensor.latest_available_version_update_available
state: 'on'
elements:
- entity: sensor.installed_version
style:
left: 53%
top: 50%
type: state-icon
- entity: sensor.installed_version
prefix: 'Installed: v'
style:
color: black
left: 53%
top: 60%
title: text
type: state-label
- entity: sensor.latest_available_version
style:
left: 85%
top: 50%
type: state-icon
- entity: sensor.latest_available_version
prefix: 'Available: v'
style:
color: black
left: 85%
top: 60%
title: text
type: state-label
type: conditional
- type: conditional
conditions:
- entity: sensor.hacs
state_not: '0'
elements:
- entity: sensor.hacs
style:
left: 70%
top: 80%
type: state-icon
- entity: sensor.hacs
prefix: 'Hacs: '
style:
color: black
left: 70%
top: 90%
title: text
type: state-label
- type: image
entity: sensor.hacs
image: /local/images/HACS-update.png
style:
bottom: 0%
right: 0%
transform: translate(0%,0%)
- type: custom:bar-card
animation:
state: 'on'
columns: 5
direction: up
width: 10px
height: 90px
positions:
icon: 'off'
indicator: 'off'
minmax: 'off'
title: outside
value: outside
name: outside
style:
left: 25%
top: 68%
width: 50%
scale: 100%
entities:
- entity: sensor.docker_homeassistant_cpu
max: 100
min: 0
decimal: 0
name: CPU
severity:
- color: '#40bf40'
from: 0
to: 40
- color: '#ffde00'
from: 41
to: 80
- color: '#fd0000'
from: 80
to: 100
- entity: sensor.docker_homeassistant_memory
max: 2048
min: 0
name: Memory
decimal: 0
severity:
- color: '#40bf40'
from: 0
to: 1024
- color: '#ffde00'
from: 1024
to: 1536
- color: '#fd0000'
from: 1536
to: 8192
style:
'#root>bar-card':
$: |
ha-card {
background: none;
box-shadow: none;
}
bar-card-name {
color: blacl;
font-size: 100%;
font-weight: normal;
margin: 4px;
}
bar-card-currentbar {
border-radius: 7pt;
}
bar-card-backgroundbar {
border-shadow: 2pt;
margin-top: -2pt;
margin-left: -2pt;
border-radius: 7pt;
border-style: solid;
border-color: black;
background: rgba(255, 0, 0, 0.9);
}
bar-card-value {
font-size: 125%;
color: black;
font-weight: bold;
margin: 4px;
}
Search this thread, the answers and solutions are given:
https://community.home-assistant.io/t/2022-11-a-heck-of-a-release/483295/60
1 Like
Well, according to a new style “no shadow, add border” - this picture seems correct since both cards (picture-elements & internal card) are supposed to have a border.
Hhm, but where to put those lines?
The explanation is one comment above it.
You are talking about Ildar_Gabdullin post?
I don’t understand the correlation…
It’s above the comment I linked you to. Hit the arrow button so you get to the comment, and then one above. It’s this one.
https://community.home-assistant.io/t/2022-11-a-heck-of-a-release/483295/59?u=asnnetworks
Okay, I’m lost.
I could create a minimal “No Border” theme as described above; this works.
BUT: I use different themes on different tabs installed via HACS and include those via
frontend:
themes: !include_dir_merge_named themes
I can patch the included themes, but this will be overwritten, when I install an updated for those themes.
But nevertheless: For now the frames are patched away.
Thanks!
And very same is about a design. People who never dealt with themes & styles are not supposed to fix their UI just because of some preferences of some person or a blind following some Materials 3 dogmas. BTW, these changes in styles were not mentioned as a breaking change.
3 Likes