klogg
(Klogg)
June 25, 2022, 10:17pm
1127
Me too. I tried a really minimal configā¦
(Perhaps someone wouldnāt mind trying it?)
ui-lovelace.yaml
views:
- path: test_view
theme: hall_panel_theme
cards:
- type: entities
entities:
- sun.sun
hall_panel_theme.yaml
hall_panel_theme:
card-mod-theme: hall_panel_theme
card-mod-root-yaml: |
.: |
app-header {
display: none;
}
Also tried these
card-mod-root-yaml: |
.: |
app-toolbar {
display: none;
}
card-mod-root: |
app-header {
display: none;
}
card-mod-root: |
app-toolbar {
display: none;
}
This theme works fine:
cm_minimal:
card-mod-theme: cm_minimal
card-mod-row: |
:host {
display: block;
border: 1px solid green;
}
card-mod-root-yaml: |
.: |
app-header {
display: none;
}
I see an indentation problem here:
And I selected the theme in the UI, not here:
Ildar_Gabdullin:
Code Inspecto
Iāve never done this before, but I checked the code I got from you and Mariusthvdb and changed fromā¦
more-info-light:
$: |
ha-attributes {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
} /* hide attributes dropdown for light cards */
to
more-info-light:
$: |
ha-attributes {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
} /* hide attributes dropdown for light cards */
ha-select {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
} /* hide effect dropdown for light cards */
hr {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
} /* hide ruler above effect dropdown for light cards */
ā¦and it seems to work.
Still to discover if I messed up something else but it works for now
Thanks for pointing me in the right direction!
soo
(soo)
June 30, 2022, 12:56am
1131
Guys, how can i set custom styling for every ha-card elements in order to donāt add custom style to each one? i tried to add these lines to my-theme.yaml
card-mod-card-yaml: |
paper-icon-item {
// my style
}
but it doesnāt work
Pirol62
(Jƶrg Nauen)
June 30, 2022, 5:25am
1132
I did it like this:
orange light modified mobile:
# Card mod theming
card-mod-theme: orange light modified mobile
card-mod-root: |
app-header {
display: none;
}
card-mod-view: |
#view {
min-height: 100vh !important;
}
madelena
(Madelena)
July 6, 2022, 5:28am
1133
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.
madelena:
card-mod-sidebar-yaml
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:
Registered a FR here.
1 Like
Will711990:
Iām playing with card-mod
I cannot see any card_mod in your example. I would suggest to ask in the button-card-thread.
Will711990
(Will711990)
July 14, 2022, 7:59am
1138
Oh sorry, I delete my postā¦ Thnak you !
Moving a right sidebar to the left
card-mod-view-yaml: |
hui-sidebar-view $: |
.container {
flex-direction: row-reverse;
}
mase
August 5, 2022, 8:29pm
1140
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
remmob
August 6, 2022, 5:31am
1142
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 */
Thanks. This also works but still shows a space above where the toolbar was until I refresh my dashboard.