I can confirm I see the correct border-radius on iOS app also.
Iāve just checked Firefox latest browser, and that also does not apply the mod, and shows rounded cornersā¦
even if I use
border-radius: 0px !important;
they dont apply border-radius
note they DO apply the border, so the path to the element is correct
Chrome does have some other issues, in showing the view tab icons correctlyā¦
where both Safari and Firefox (and the iOS app) correctly show this:
but that was not the reason to post thisā¦
Create a test theme and copy / paste my code - if it works?
uhm, not sure what you mean?
I have the exact same code? (besides the border-radius obviously )
I mean - with only this style (just in case).
Waitā¦
hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip {
border: 1px solid green;
border-radius: var(--ha-card-border-radius) !important;
}
this does work after allā¦!important, I had refreshed the view, in stead of reloading the themeā¦
doing so now shows me the squared corners!
So, Safari does not require the !important, nor does the iOS App (which essentially is a Safari browser), but Chrome and Firefox doā¦
since weāre on this button footer moddingā¦
itās all about these
footer:
type: buttons
entities:
- entity: input_boolean.loop_sound_bite
name: Loop Soundbite
- entity: script.play_sound_bite
name: Speel soundbite
icon: mdi:play
and, I really want to change the icon based in state of the config.entity.
when I used custom:button-card, I used:
icon: >
[[[ return (entity.state === 'on') ? 'mdi:stop' : 'mdi:play' ]]]
so I tried to set that mod on host
card_mod:
style: |
:host {
--card-mod-icon:
{% if states(config.entity) == 'on' %} mdi:stop
{% else %} mdi:play
{% endif %};
but see no change. Is there some undocumented option to change those entity (script) icons in a footer button?
Mariusthvdb:
config.entity
Cannot be used here.
type: entities
title: footer
entities:
- input_boolean.test_boolean
footer:
type: buttons
entities:
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: input_boolean.test_boolean
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
card_mod:
style:
hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar:
ha-chip:
$: |
.mdc-chip {
border: 1px solid red !important;
border-radius: 4px !important;
}
.: |
ha-chip:nth-child(3) {
{% if is_state('input_boolean.test_boolean','on') %}
--ha-chip-background-color: lightgreen;
{% else %}
--ha-chip-background-color: cyan;
{% endif %}
}
Actually, this is a bit an off-topic here, not exactly related to themeing.
indeed, moving to card-mod please
if you use thumbing like:
DONT UPDATE TO 2023.4 beta, because it will render
o and, btw, on button-card, see: Lovelace: Button card - #6829 by Mariusthvdb
Editing the header bar to semi transparent is failing now, too. Even with the new 3.2.1 update.
card-mod-root: |
app-header {
background: var(--ha-card-background) !important;
}
app-toolbar {
background: transparent !important;
}
This worked for ages now. So I hope itās correct ^^
Ah and this for more understanding of my doing:
ha-card-background: "rgba(0, 0, 0, 0.5)"
the new card-mod did fix the main issue probably, but the mods on the card-mod-sidebar-yaml: no longer work.
update
well, they do card-mod-sidebar-yaml no longer works Ā· Issue #264 Ā· thomasloven/lovelace-card-mod Ā· GitHub
but things changed in HA see:
so, for the regular notification badge, we need to add a default ,248px like:
a[data-panel='ui-familie'] paper-icon-item:after {
content: "{{states('sensor.family_home')}}";
left: calc(var(--app-drawer-width,248px) - 44px);
position: absolute;
min-width: 20px;
box-sizing: border-box;
border-radius: 50%;
font-weight: 400;
background-color: {{states('sensor.presence_color')}}; /*var(--accent-color);*/
line-height: 20px;
text-align: center;
padding: 0px 6px;
color: {{'saddlebrown' if states('sensor.presence_color') == 'gold' else 'ivory'}};
/*var(--text-accent-color, var(--text-primary-color));*/
font-size: 14px;
}
and that brings back the notifications:
however, collapsing the menu changes css to a fixed 26px as you can see in the Inspector screenshot, and Iāve not found a way yet to mimic that in the mod. Or find a conditional on the menu being collapsed or not
Hi , something verry simple, i used before Kios Mode, to hide the top bar, but it doesnt work anymore on 2023.4, seems card mod can do it too . i use google dark theme mod, i did this ā¦
Google Dark Theme:
card-mod-theme: Google Dark Theme
card-mod-root: |
app-header {
display: none;
}
ha-card-border-color: rgba(0,0,0,0) ## transparent
# Header:
app-header-background-color: rgb(23, 23, 23)
app-header-text-color: rgb(198, 203, 210)
app-header-selection-bar-color: var(--primary-color)
app-header-edit-background-color: rgb(136, 136, 136)
# Main Interface Colors
....
But i still have the top bar? what am i missing? i added that card-mod-root to it above
pepe59
April 5, 2023, 9:09pm
1337
I had the header moved to the bottom, but after todayās HA 2023.4 update, the header moved back to the top.
I had my fun with transparency for quite some time now. Until 2023.4.0b0 in this case.
First some material I use right now: GitHub - dreimer1986/yourname_card_mod: Home Assistant theme - A dark, electric blue theme that reminds the movie Your Name.
This is a modified yourname theme for use with CardMod and Vilhelmās Animated Backgrounds (with some 2023.4.0 fixes I hacked together here WARNING: 2023.4.0b0 or newer break Animated Background Ā· Issue #56 Ā· Villhellm/lovelace-animated-background Ā· GitHub )
I am open for any kind of suggestion of course. (But better over there on Github as I donāt wanna hijack this thread)
Look closely on the animated pics I added. You can see the sidebar is a mixture of darker transparent buttons and a less transparent rest. This is the goal I want backā¦
As CardMod seems to have broken down quite a bit, I decided to get some stuff fixed with a style JS: https://raw.githubusercontent.com/dreimer1986/yourname_card_mod/master/www/styles.js
Header and Lovelace background are fine again, but sidebar is still funny. I got a suggestion from BramKragten how to fix it and it indeed does SOMETHING, just not what I want. The fix in the script casues one layer to vanish as the whole sidebar gets lighter. But there is one layer I cannot find and it is NOT transparent. This can be seen fine when the site loads up after Cache wipe. Sidebar has some dark color and the rest is way lighter. Sadly I cannot make a pic @ home as my PC is too fast, I saw this at workā¦ Thus the current result is:
Here for comparison the same without setProperty("āmdc-theme-surface", ātransparentā)
Itās darker.
Now to the final partā¦ HELP!!! What did I miss in all my mess? Why is this thing not transparent? What layer did CardMod make vanish here and now fails to do?
Does Compact-Header still work on HA 2023.4.0?
This following code in my theme.yaml doesnāt do jackshit
ios-dark-mode:
# Global
card-mod-theme: ios-dark-mode
card-mod-root-yaml: |
.: |
ha-menu-button {
display: none !important;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-right"] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-left"] {
display: none;
}
}
I was able to fix that, using above suggestion for replacing āapp-headerā with ā.headerā, āapp-toolbarā with ā.toolbarā, and some more adjustments.
Here is my full theme configuration, in case anyone want to compare.
thanks for noticing that, I hadnāt, because my existing theme mods on those app-header and app-toolbar still work. which is remarkable?
/* Set the toolbar background. */
app-header, app-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);
}
ive check and moved to:
/* 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);
}
and yes, that works also
need to check if the main settings also have changed:
app-header-background-color:
app-header-text-color:
app-header-edit-background-color:
for that matterā¦ no, they havent: frontend/src/resources/styles.ts at 81ebdf1448ab25689736ad59e5c9012e971280d1 Ā· home-assistant/frontend Ā· GitHub
but, also see this :
app-header and app-toolbar are still very much alive
If someone stumbles upon these for 2023.4.0 let me know:
card-mod-sidebar: |
:host {
background: var(--ha-card-background) !important;
}
div.menu {
background: transparent !important;
}
paper-icon-item[role=option], paper-icon-item[aria-role=option] {
background: var(--ha-card-background) !important;
}
.iron-selected paper-icon-item {
background: var(--ha-card-background) !important;
}
How do I change the color of the entire header?
Iāve tried a handful of variations on this:
card-mod-root-yaml: |
.: |
app-header {
color: black !important;
}
mase
April 6, 2023, 10:32pm
1343
anyone knows how to move the back-arrow of a subview up?
.mdc-icon-button {
padding-bottom: 10px;
}
doesnĀ“t work for me
moving the title up worked with
.main-title {
padding-bottom: 10px;
}
danm89
April 6, 2023, 11:04pm
1344
Try this.
card-mod-root-yaml: |
.: |
.header {
color: black;
}
Thanks, but I couldnāt get that to work.
I did find the HA built-in variable app-header-background-color: that seems to do what I need except that I currently have that variable set to different colors for light and dark mode. For most of my devices, I want to keep the header background color intact for light and dark modes, but I need to turn it black based on a specific @media query selector on a specific device regardless of light/dark mode. I think the right way to do this is to place the media query in both light/dark mode sections, but cannot seem to figure out the right syntax for media queries in those sections.
modes:
light:
@media (orientation: landscape) and (min-width: 950px) {
.header {
--app-header-background-color: black;
}
So, hereās a new question:
