Hi, is there a way to change colors of a view header (a.k.a. app-header/app-toolbar) when a theme is assigned in the definition of the view?
view
- title: Test
path: overview-test
theme: my_attempt
theme
my_attempt:
# both variables work only if theme is set in user settings
app-header-background-color: "#963484"
app-header-text-color: "#EFD6D2"
# card_mod theme also works only if theme is set in user settings
card-mod-theme: my_attempt
card-mod-root-yaml: |
.: |
app-header {
--app-header-background-color: "#963484" !important;
background-color: "#963484" !important;
}
{% set kerst = is_state('input_select.theme','Kerst') %}
overflow: {{'hidden' if is_state('input_boolean.hide_card_overflow','on')}};
background: {{'repeat url("/local/season/kerst_smurfen.png")' if kerst}};
maybe start experimenting with a subset (the minimal you want to customize) and then build from there
Now need to make the browser_mod and card-mod to work ( the reason I came to this thread), so that I can enable and disable side and topbars by injecting the code within the Bubble theme.
Once Iām all done will document this for everyone on a separate thread for inexperience users before they dive into more complicate experiments.
the following isnāt working yet.
- action: browser_mod.set_theme
data:
dark: dark
theme: auto
yeah these changes have always been like that, no news there.
Still not sure what you are trying to use card-mod theming for. Ofc, I dont have Bubble theme, but for the hiding of the sidebar, you can easily use Kiosk-mode plugin. No need for theming at all, just flip the toggle and youāre set.
Because there are a lot of those cards with same style setting, Iād like to set this style in theme.
Can you help me, how to set this style in the theme style setting?
My CSS skills are somewhat lacking, I just canāt seem to understand how to get from the inspector to the card mod syntax. Iām trying to set the background underlined in red in the image below, I donāt suppose somebody could give me an example of the card mod syntax ?
I didnāt know I could spend 3 days researching HA/jinja2/css/card-mod to have full dynamic background images set in a sections view, but such is life! It seems that all the older methods are not applicable anymore due to the new sections view.
I posted it in themes as it is to put in the themes file to set the section view background image with an input select entity on a card. If I could set the --lovelace-background var in the themes file using jinja2, that would be another satisfactory solution as that seems to do exactly what Iām looking for.
Iāve done that before, but it only covers the part of the view that has cards on it, the rest of the screen remains black. If I set the background image from the sections view/edit interface in HA (new feature), it shows full screen, hence Iām trying to trace which css value to change to emulate this, and put it in the themes file.
yes that is a bummer indeed.
ive moved to sections where I can, but, because of this, I didnt do that for those views I have a background ā¦
dont think there is any css that can fix that, it is a imitation of the sections view.
as a matter of fact, it is the reason I filed a FR to give us 1 column masonry views (and not require custom: vertical-view from layout-card), so we can keep that background full viewā¦
right, that would be it, and is why I asked you to expose how you managed
I used my example per view, like
title: Tijd
path: tijd
subview: true
theme: seizoen-background
and have that seizoen-background defined as:
seizoen-background:
card-mod-theme: seizoen-background
<<: *card-mod-card-yaml # paste a whole bunch of other settings here
card-mod-view: |
vertical-layout {
{% set seizoen = states('sensor.season_astronomical') %}
background: repeat url('/local/season/{{seizoen}}_2.png');
}
hui-sections-view {
{% set seizoen = states('sensor.season_astronomical') %}
background: repeat url('/local/season/{{seizoen}}_2.png');
}
and as you can see, I have that background defined on the 2 layouts.
