Is it possible to replace the 3 dots menu icon thatās on the navbar with just the assist icon?
please allow me a post crossing 2 repoāsā¦
browser-mod just was updated by Thomas to 2.2.2, and it in fact brings back our sidebar naming, and several other fixes that were reported.
However, it seems to somehow have made our card-mod-theme mods on the sidebar even harder to show up.
ever since HA 2023.4, Iāve had to refresh cache and reload the view several times to make these changes show.
This is my yaml, and it should show like this:
as I posted in the Browser-mod issue, I can only get Chrome to show this with some effort, Safari remains like:
I would appreciate some extra eyes on the matter?
Please confirm if you experience the same?
thx!
PS
I admit still using card-mod 3.1.4, albeit a modified version. Newer card-mod versions have trouble changing the icon (--card-mod-icon) in menus, and with the 3.1.4, all of my menu mods in card-mod-theme still work.
because of HA 2023.4, we had to hack this:
t.querySelector("app-drawer-layout partial-panel-resolver, mwc-drawer partial-panel-resolver")```
in the card-mod resource.
given the fact browser-mod 's current change was: Fix sidebar title Ā· thomasloven/hass-browser_mod@f957fe1 Ā· GitHub
so change the
"home-assistant $ home-assistant-main $ app-drawer-layout app-drawer ha-sidebar $ .title"
to
"home-assistant $ home-assistant-main $ ha-drawer ha-sidebar $ .title"
I suspect that to be the reason?
Update
changing that to ha-drawer seems to be better indeed, I can āforceā the side-bar mods to show in Safari now. But still need to do just that, āforceā it by refreshing cache and reload the view regularly
when I press a button the icon has to blink until a binairy sensor value is āonā, then it has to be green constantly. how do I do this ?
This works to get rid of the space at the top.
But when moving the navbar to the bottom, Iām still getting the bottom of my dashboard being hidden underneath it.
Figured it out. Had to add padding to the bottom under div#view
div#view{
transform: initial;
padding: 0 !important;
margin: 0 !important;
width: 100%;
padding-bottom: var(--header-height) !important;
}
1 Like
This is awesome. Do you think itās possible to add a tap action to the paper-tab icon?
For example, I currently have a views tab of just the button card that navigates to /config/dashboard.
Itās a three-step process at the moment, but Iād like to make it so that if I tap the cog icon at the header, it navigates straight to /config/dashboard.
I used to have lovelace-header-card but it caused too many issues and the support is non-existent so I rolled backed to the analog way.
Thanks in advance.
My post you answered was about displaying a badge for an existing viewās icon.
This is a CSS change and it is not possible to redirect tap_action.
1 Like
Currently using this mushroom chip back arrow on some pages to wellā¦ go back to the previous page, I have it in card_mod so that way it stays on top of other cards but I noticed today it also goes above the light popups which doesnāt look good, I assume this is because of the āz-indexā.
Anyone know what I could change the number to make it go above all cards except the light popups in HA? Thanks
My code:
type: custom:mod-card
card_mod:
style: |
:host {
position: fixed !important;
position: -webkit-fixed !important;
bottom: 70px !important;
z-index: 999 !important;
}
card:
type: custom:mushroom-chips-card
chips:
- type: back
icon: mdi:arrow-left
icon_color: red
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-orange), 0.5);
margin: 10px
}
card_mod:
style: |
.chip-container * {
bottom: 0px;
position: sticky;
}
Looking for some help styling the default more-info popup.
Iām using the following in themes.yaml which changes the background of the popup:
card-mod-more-info-yaml: |
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
background-color: rgba(0, 0, 0, 0.2) !important;
}
I would like to also add a border to the popup, but cannot seem to find the correct tags. I do have the following in themes.yaml which correctly sets the border of any browser-mod popups, but doesnāt change the default more-info one:
popup-border-color: '#eee'
popup-border-width: '1px'
Any assistance would be hugely appreciated!
Should be the same div, shouldnāt it? Have a look in dev tools of your browser and just add CSS there and afterwards (if working and when you find he right node) via card-mod.
For now, just try the above.
1 Like
If have the following in my themes.yaml
card-mod-view-yaml: |
.: |
hui-view {
background: none !important;
}
@media screen and (max-width: 500px){
hui-view {
margin-bottom: -15px;
}
}
grid-layout$hui-vertical-stack-card$: |
#root {
top: 0px;
left: 0px;
margin-top: -5px;
padding-left: 30px;
background-color: rgb(0, 0, 0) !important;
border-radius: 0;
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
min-height: 100vh;
}
@media screen and (max-width: 1080px){
#root {
padding-top:20px;
}
}
@media screen and (max-width: 810px){
#root {
padding-top: 20px;
}
}
@media screen and (max-width: 740px) {
#root {
margin-right: 2px;
padding-top: 20px;
}
}
@media screen and (max-width: 500px) {
#root {
display: none !important;
}
}
Since the 2023.3.x update the side bar background styles are not applied anymore at first visit of the page.
Only after page refresh or switching between views the style is applied correct.
Before refresh
And correct after page refresh or switching between views.
anybody any idea why this is happening?
Did you try out this
grid-layout:
$:
hui-vertical-stack-card:
$: |
as it is more resilient in case of differnet timings during loading of the elements.
Changed it to:
grid-layout:
$:
hui-vertical-stack-card:
$: |
#root {
top: 0px;
left: 0px;
margin-top: -5px;
padding-left: 30px;
background-color: rgb(0, 0, 0) !important;
border-radius: 0;
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
min-height: 100vh;
}
@media screen and (max-width: 1080px){
#root {
padding-top:20px;
}
}
@media screen and (max-width: 810px){
#root {
padding-top: 20px;
}
}
@media screen and (max-width: 740px) {
#root {
margin-right: 2px;
padding-top: 20px;
}
}
@media screen and (max-width: 500px) {
#root {
display: none !important;
}
}
This renders a invalid config
Error log:
Invalid config for [frontend]: value should be a string for dictionary value @ data['frontend']['themes']['witbol']['grid-layout']. Got {'$': {'hui-vertical-stack-card': {'$': '#root {\n top: 0px;\n left: 0px;\n margin-top: -5px;\n padding-left: 30px;\n background-color: rgb(0, 0, 0) !important;\n border-radius: 0;\n border-right: 0.1vw solid rgba(58, 69, 73, 0.2);\n min-height: 100vh;\n} \n@media screen and (max-width: 1080px){\n #root {\n padding-top:20px;\n }\n}\n@media screen and (max-width: 810px){\n #root {\n padding-top: 20px;\n }\n}\n@media screen and (max-width: 740px) {\n #root {\n margin-right: .... (See /config/configuration.yaml, line 15).
Did you really change only the above and/or can you post the new complete themes-section of card-mod-view-yaml? It should work and here it doesnāt show such an error.
Here is the changed card mod section:
####################################################
# #
# CARD-MOD Styles #
# #
####################################################
#set card mod theme
card-mod-theme: witbol
card-mod-card: |
ha-card {
/* CSS for all cards */
/*background-color: rgb(28, 28, 28)*/
}
card-mod-root: |
#view {
background: url('/local/Images/backgrounds/witbolstraat_blur.png');
background-size: cover;
margin-left: -10px;
}
card-mod-view-yaml: |
.: |
hui-view {
background: none !important;
}
@media screen and (max-width: 500px){
hui-view {
margin-bottom: -15px;
}
}
grid-layout:
$:
hui-vertical-stack-card:
$: |
#root {
top: 0px;
left: 0px;
margin-top: -5px;
padding-left: 30px;
background-color: rgb(0, 0, 0) !important;
border-radius: 0;
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
min-height: 100vh;
}
@media screen and (max-width: 1080px){
#root {
padding-top:20px;
}
}
@media screen and (max-width: 810px){
#root {
padding-top: 20px;
}
}
@media screen and (max-width: 740px) {
#root {
margin-right: 2px;
padding-top: 20px;
}
}
@media screen and (max-width: 500px) {
#root {
display: none !important;
}
}
grid-layout$hui-horizontal-stack-card:nth-child(2):
$: |
#root {
background-color: rgb(0, 0, 0);
border-radius: 0;
margin: -5px -63px 0px -60px;
}
@media screen and (max-width: 1080px) {
#root {
margin: -7px -22px 0px -20px;
}
}
@media screen and (max-width: 810px) {
#root {
margin: -7px -22px 0px -20px;
}
}
@media screen and (max-width: 740px) {
#root {
margin: -5px -6px 0px -7px;
}
}
@media screen and (max-width: 500px) {
#root {
margin: -5px -7px 0px -7px;
}
}
grid-layout$hui-horizontal-stack-card:nth-child(2)$custom-button-card: |
#root{
background-color: red;
}
grid-layout$hui-horizontal-stack-card:nth-child(18):
$: |
#root {
background-color: rgb(0, 0, 0);
border-radius: 0;
margin: 0px -63px -5px -60px;
}
@media screen and (max-width: 1080px) {
#root {
margin: 0px -22px -7px -20px;
}
}
@media screen and (max-width: 810px) {
#root {
margin: 0px -22px 0px -20px;
}
}
@media screen and (max-width: 740px) {
#root {
margin: 0px -6px 0px -7px;
}
}
@media screen and (max-width: 500px) {
#root {
margin: 15px -7px -15px -7px;
}
}
grid-layout$hui-horizontal-stack-card:nth-child(4):
$: |
#root {
background-color: rgb(0, 0, 0);
border-radius: 0;
margin: 0px -63px -5px -60px;
}
@media screen and (max-width: 1080px) {
#root {
margin: 0px -22px -7px -20px;
}
}
@media screen and (max-width: 810px) {
#root {
margin: 0px -22px 0px -20px;
}
}
@media screen and (max-width: 740px) {
#root {
margin: 0px -6px 0px -7px;
}
}
@media screen and (max-width: 500px) {
#root {
margin: 15px -7px -15px -7px;
}
}
grid-layout$hui-horizontal-stack-card:nth-child(19):
$: |
#root {
background-color: rgb(0, 0, 0);
border-radius: 0;
margin: 0px -63px -5px -60px;
}
@media screen and (max-width: 1080px) {
#root {
margin: 0px -22px -7px -20px;
}
}
@media screen and (max-width: 810px) {
#root {
margin: 0px -22px 0px -20px;
}
}
@media screen and (max-width: 740px) {
#root {
margin: 0px -6px 0px -7px;
}
}
@media screen and (max-width: 500px) {
#root {
margin: 15px -7px -15px -7px;
}
}
Exactly. You changed not only the thing I showed, but now have a wrong indentation.
Compare before:
card-mod-view-yaml: |
grid-layout$hui-vertical-stack-card$: |
with now (wrong changed)
card-mod-view-yaml: |
grid-layout:
1 Like
Thank you, exactly what I was looking for!
Thanks, itās working.
The change of the indentation or an improvement of the loading behavior (root problem) as well?
I need a bit of help here. Since upgrading to Home Assistant 2023.6.x, my tweak to hide the more-info header doesnāt work.
I read something about changing āha-header-barā to āha-dialog-headerā, but changing that in the code below does not work.
My old code (I guess the first part is not relevant, I just didnāt want to leave anything out):
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
}
.: |
{% if user == 'test' %}
.heading ha-header-bar {
display: {{'none' if is_state('input_boolean.hide_more_info_header','on')}};
}
{% else %}
.heading ha-header-bar {
display: {{'none'}};
}
{% endif %}
Any suggestions?
Also, I am still missing the times when we could open a camera in āfull screenā more-info.
Any one found a solution for that?
Thanks
Edit:
It works again after changing to
{% if user == 'test' %}
ha-dialog > ha-dialog-header {
display: {{'none' if is_state('input_boolean.hide_more_info_header','on')}};
}
Both, after the loading behavior fix I had the wrong indentation.
fixed that and know itās working.
On to the next issue (after the 2023.6.x the popup titles are not correct styled any more) but that another forum (browser_mod)