Can the sidebar be modified and is card-mod-sidebar-yaml valid? I notice that card-mod is injected under ha-sidebar$, but nothing is visible under its <style> element.
Not mentioned in the docs.
But at least card-mod-sidebar works…
And surprisingly it allows to go into shadowRoot:
card-mod-sidebar: |
:host {
background: rgba(255, 0, 0, 0.3) !important;
}
.iron-selected paper-icon-item {
background: yellow;
}
1 Like
…So sad that we cannot edit styles for system pages.
Otherwise I would specify a style for the Dev tools → Template to add scrollbars:
1 Like
I cannot see any card_mod in your example. I would suggest to ask in the button-card-thread.
Moving a right sidebar to the left
card-mod-view-yaml: |
hui-sidebar-view $: |
.container {
flex-direction: row-reverse;
}
1 Like
i´d like to color the background of a vertical or horizontal stack. however i don´t manage to get it working.
got something like this:
- type: horizontal-stack
style:
ha-card {
background-color: white;
}
cards:
anyone knows how to get it colored?
card-mod thread → 1st post → link at the bottom → stack
This is not about themes.
1 Like
In your theme file.
card-mod-view-yaml: |
.: |
hui-vertical-stack-card$: |
#root {
background-color: rgb(0, 0, 0);
}
1 Like
for a test view, Id need the option to easily switch off card-mod-theme, so I tried to insert:
{% if is_state('input_boolean.card_mod_theme','on')%} theme-mods {%- endif %}
into my theme declaration:
theme-mods:
card-mod-theme: theme-mods
and turn that into:
theme-mods:
card-mod-theme: |
{% if is_state('input_boolean.card_mod_theme','on')%} theme-mods {%- endif %}
unfortunately this doesnt work.
I now resort to commenting the theme-mod reference in my actual themes, and reload themes.
cant this be done by means of a toggle?
please have look for me, thanks!
btw, experimenting wit this a bit more, Ive just seem to have discovered we dont need the actual line anymore? Opposed to what is stated here:https://github.com/thomasloven/lovelace-card-mod/blob/06140ff020e94a20f7eec9f51c18ad04aef0e8f1/README-themes.md#card-mod-theme
theme-mods:
# card-mod-theme: theme-mods
works just as well?
This works fine but leaves a space at the top of the page, is there anything i can do to crop this if the boolean is on?
### Card Mod Theme ###
card-mod-theme: minimalist-mobile
card-mod-root: |
app-toolbar {
display: {{'none' if is_state('input_boolean.hide_app_toolbar','on')}};
} /* hide app toolbar */
app-header
1 Like
Thanks. This also works but still shows a space above where the toolbar was until I refresh my dashboard.
Do not confirm.
Any change you can share your code, for me it not seems to work. Thx
Probably because the code is wrong from the beginning.
card-mod-root-yaml: |
.: | ----------- this !!!!
app-header {
display: none;
}
At least these types of errors you may do:
- wrong value is selected for a property (like “color: 12px”);
- correct value for a property is not set - “!important” is needed;
- wrong attribute is selected (like “colr: red”);
- wrong element is selected;
- wrong path is specified - so none element is selected;
- smth else.
And use Code Inspector to check a possible reason.
Like i said it works fine in all the 3 ways i tested. If i switch the boolean on the header/toolbar dissapear but the margin don’t changes so it leaves a empry space at the top of the page…
Remove everything from you theme file and leave this only:
card-mod-root-yaml: |
.: |
app-header {
display: none;
}
Does it work?
Next step - check with input_boolean.
1 Like
Sorry for the question, I’m a bit newbie…Where should I put this code?
I have created a new theme “left_sidebar.yaml” in themes folder:
Left_sidebar:
card-mod-view-yaml: |
hui-sidebar-view $: |
.container {
flex-direction: row-reverse;
}
I can see the new theme “left_sidebar” when I edit my dashboard view, I select it but nothing happens (of course I have Card-mod installed)
Thank you in advance!
Try this:
Left_sidebar:
card-mod-theme: Left_sidebar
card-mod-view-yaml: |
...