make that
data:
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.
Thanks, I tried Kiosk mode but thatās not working
so moved here
I have folowing card-mode style for cards:
- type: custom:mushroom-select-card
entity: input_select.battmgmt_timeplan_po5
fill_container: false
layout: vertical
icon_type: none
name: '5'
secondary_info: none
card_mod:
style:
mushroom-select-option-control$:
mushroom-select$: |
.mdc-select__selected-text {
font-size: 12px !important;
}
.mdc-select__anchor{
background: black !important;
border: 3px !important;
border-style: solid !important;
border-color: black !important;
padding: 3px !important;
}
.mdc-select__dropdown-icon {
display: none !important;
}
mwc-menu {
--mdc-menu-item-height: 16px;
}
.: |
ha-card {
padding: 0px !important;
margin: 0px !important;
}
.actions {
padding: 0px !important;
}
mushroom-state-info$: |
.container {
--card-primary-color: blue;
align-items: middle;
}
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?
Hi,
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 ?
Thanks,
dont think so noā¦ cant even decipher the screenshot.
set the background of what exactly? give us the yaml and we might be able to help
https://matt8707.github.io/card-mod-helper/
Also seems like youāre not asking about themes. This is the theme topic. You might be better off asking on the general topic.
That should help, although I think my knowledge is still a bit primitive, especially as it doesnāt seem to know which card-mod-thing to use:
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.
Thanks again.
not sure what you are trying to achieve but this just works:
card-mod-view: |
hui-sections-view {
background:
{% set dark = is_state('binary_sensor.donker_thema','on') %}
{% set extension = '_dark' if dark else '' %}
{{"center/cover no-repeat url('/local/wallpapers/map"~extension~".png') fixed"}};
}
Thanks,
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ā¦
card-mod-root: |
#view {
{{ states('sensor.energy_solar_theme_background') }}
}
I did it by accident and it works full screen. This is the value of the sensor:
background: center / cover no-repeat url('/local/solax/background-04.jpg') fixed !important;
that would be great, and stop us having to define that template for every view layout type ā¦
however
cant make that happen just yet, please show the complete card-mod, and how you set in in the view?
Please bear in mind that I have no idea what Iām talking about as I only started with card-mod, themes and css a few days ago.
Here is my test theme:
Solar:
modes:
dark:
app-header-background-color: "#000000"
my-card-back-color: 'rgb(0,0,0,0.9)'
my-card-border-color: 'solid rgb(0,0,0) 5px'
vertical-stack-card-gap: '2px'
light:
app-header-background-color: "#222222"
my-card-back-color: 'rgb(255,255,255,0.9)'
my-card-border-color: 'solid rgb(255,255,255) 5px'
vertical-stack-card-gap: '2px'
card-mod-theme: Solar
card-mod-root: |
#view {
{{ states('sensor.energy_solar_theme_background') }}
}
This is the template sensor:
sensor.energy_solar_theme_background
and it has this state
background: center / cover no-repeat url('/local/solax/background-04.jpg') fixed !important;
which just concatenates the path/image, etc from a mushroom select card in my settings view:
and when I choose a different background, it changes the full sections view:
There is no theme set in the user profile:
Or in the view settings or background tab of the sections view:
It does, however, change the background on all views at the same time, which is ok for me, but may not be desirable.
Thanks.
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.
looking to control the margin-bottom under the badges in a section view,
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges {
margin-bottom: 100px;
}
nothing happeningā¦ what am I missing here?
The flex direction column works as hoped for in sections view with that mod, but I must have cut the wrong bit if the Dom path now.
I am not using sections)))
You have a missing ā|ā. Could be a reason.
you mean this?
card-mod-view-yaml:
hui-sections-view: |
$: |
hui-view-badges {
margin-bottom: 100px;
}
I tried that but it does not work.
this is the dom path:
and the margin-bottom: 0 is set there in Inspector is the correct spot, and working in the browser
card-mod-view-yaml: |
hui-sections-view:
$: |
hui-view-badges {
margin-bottom: 100px;
}
Did you try this? (I think that is maybe what Ildar meant)
Or perhaps this?:
card-mod-view-yaml: |
hui-sections-view $: |
hui-view-badges {
margin-bottom: 100px;
}
Like Ildar, I donāt use sections so havenāt tested any of thisā¦
yeah, I did, and thanks btw.
neither work though.
also, be careful with these, I had a full meltdown of the Frontend after having made a syntax error and restartingā¦