You are trying to use this var for the whole card.
It may be used on the row level only.
Start with achieve this with a “just card-mod, no theme” way.
In short - these attributes are wrong.
For themes that contain light and dark modes, does the ‘card-mod-theme:’ go in the dict for the main theme or under each mode? If it goes under each mode, what’s the proper way to modify the theme name (‘My Theme’ in my example) for each?
My Theme:
card-mod-theme: My Theme /*here...*/
modes:
light:
/*...or here...*/
dark:
/*...and here?*/
Not sure if I am 100% right - I use it like this:
My Theme:
card-mod-theme: My Theme
modes:
light:
...
dark:
...
Btw I always wonder what happens if I define a different name for the 2nd place:
My Theme:
card-mod-theme: My Theme_xxxx
...
OK, that’s how I had it. So, now I’m taking a step back and trying to get card-mod working with just a simple (no modes) theme. From the cookbook, this is all I have in my theme:
compact-header:
card-mod-theme: compact-header
header-height: 48px
card-mod-root-yaml: |
paper-tabs$: |
#selectionBar {
bottom: unset !important;
}
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
card-mod-view-yaml: |
.: |
hui-view {
transform: translate3d(0px, -60px, 0px);
}
If I change the header-height, I can see the header height change, so I know the theme is active, but the Header Bar does not move to the bottom even after cleaning my browser cache and refreshing. Any ideas why this first step isn’t working? @Ildar_Gabdullin, is the code in the cookbook still correct for doing this?
This is AMAZING and exactly what I was looking for! Thank you!!!
How can I get the status of this button (Alarm time) moved to the right corner of the button?
I understand I have to use cardmod. Sadly, I am lacking the CSS skills. Can anymore assist me?
show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id: input_boolean.licht_am_morgen
entity: input_datetime.samu_wochentag_aufstehen
show_state: true
icon_height: 30px
name: Licht Morgens
icon: mdi:weather-sunset-up
Anyone, please, help
I also have the problem, that I would like to change the position of two texts. I would like to swap them.
I use atomic-revive calendar and would like to swap the position of the Description and the RelativeTime strings. Can Card-Mod also do such things or will I have to create a new version of the card by myself and swap both variables there ?
Badges
Left-aligned:
Code
card-mod-view-yaml: |
hui-masonry-view $: |
.badges {
display: flex;
justify-content: start;
}
Scrollable:
Code
card-mod-view-yaml: |
hui-masonry-view $: |
.badges {
display: flex;
overflow-x: auto;
overflow-y: clip;
}
Column on the left:
Code
card-mod-view-yaml: |
hui-masonry-view $: |
.badges {
display: flex;
flex-direction: column;
}
.: |
hui-masonry-view {
display: flex;
}
Same, but cards are centrally aligned:
Code
card-mod-view-yaml: |
hui-masonry-view $: |
.badges {
display: flex;
flex-direction: column;
margin-right: auto !important;
}
div#columns {
margin-right: auto;
}
.: |
hui-masonry-view {
display: flex;
justify-content: center;
}
Unfortunately, for views w/o badges it moves all cards to the left(((.
Column on the right:
Code
card-mod-view-yaml: |
hui-masonry-view $: |
.badges {
display: flex;
flex-direction: column;
margin-left: auto !important;
}
.: |
hui-masonry-view {
display: flex;
flex-direction: row-reverse;
justify-content: start;
}
Same, but cards are centrally aligned:
Code
card-mod-view-yaml: |
hui-masonry-view $: |
.badges {
display: flex;
flex-direction: column;
margin-left: auto !important;
}
div#columns {
margin-left: auto;
}
.: |
hui-masonry-view {
display: flex;
flex-direction: row-reverse;
justify-content: start;
}
Unfortunately, for views w/o badges it moves all cards to the right(((.
On the bottom:
Code
card-mod-view-yaml: |
hui-masonry-view $: |
.badges {
margin-top: auto !important;
}
.: |
hui-masonry-view {
display: flex;
flex-direction: column-reverse;
justify-content: start;
}
On the bottom + badges’ area with a border + “sticky” effect:
Code
card-mod-view-yaml: |
hui-masonry-view $: |
.badges {
margin-top: auto !important;
position: sticky;
bottom: 0;
z-index: 999;
background-color: var(--primary-background-color);
border-style: solid;
border-color: var(--ha-card-border-color,var(--divider-color, #e0e0e0));
border-width: var(--ha-card-border-width,1px);
border-radius: var(--ha-card-border-radius,12px);
padding: 8px;
margin-left: 8px !important;
margin-right: 8px !important;
}
.: |
hui-masonry-view {
display: flex;
flex-direction: column-reverse;
justify-content: start;
}
Update: some side effects are here: cards are left-aligned - this I will try to solve a bit later - DONE.
Also, a bottom badges area could be “sticky”; gonna try it later. - DONE
Also, badges currently may only be added to a masonry view (not in panel and sidebar views, not in Thomas’ layout-card view) - so I consider using “hui-masonry-view” selector as a proper one.
5 Likes
Thank you sooooooooooooooo much!
1 Like
I did. Thank you! Working on CSS Grids right now to get everything right where I want them
I posted over in the layout-card page for some help, but I am trying to use this background on a few pages and add your custom elements on top right where they belong. CSS is fighting me lol.
Anyway, here is the beginning of what I’m working to create:
Once I have this first card finally placed where it belongs, I am going to place other cards and buttons all over to animate everything.
I am thinking of using MSD markers as links to pop up other cards or change to other pages. Shuttle Bay for the Garage, Galley for the Kitchen, Engineering for the Basement, Life Support for HVAC, etc…
I already have a red alert automation that flashes about half of the lights in the house red and plays the sound over the speakers. Looking forward to making that button work on here, too! 
2 Likes
playing around with the subview option, Ive noticed not to be able to Not show the card-mod-theme template for the overflow.
This is especially troublesome on mobile where the template is almost overflowing the subview path now…
note this is happening even though I have Kiosk mode (yes the custom plugin) set to Not show the header at all. Apparently, the new subview option is not seeing that, or vice versa.
Ns this leads to the following quest:
how to use card-mod-theme so the template for the overflow is NOT shown when on a subview. Would be very nice if core subview would not behave differently compared to a regular view on that aspect, but since it does, maybe we can use card-mod-theme to fix that?
fwiw, this is my card-mod-theme setting for the overflow (3 dots) template:
/* Optionally set the three-dots transparency,
to allow for a replacement template text. */
ha-button-menu {
color: {{'transparent' if is_state('input_boolean.menu_options_template','on')}}; /*var(--primary-color)*/
}
/* Optionally set a replacement template text. */
ha-button-menu::before {
content: "{{states('sensor.custom_header_template')}}";
color: var(--app-header-text-color);
visibility: visible;
position: relative;
top: 24px;
white-space: nowrap;
}
and the custom_header_template is
template:
- sensor:
- unique_id: custom_header_option_template
name: Custom header template
state: >
{% if is_state('input_boolean.menu_options_template','on') %}
{{states('sensor.buienradar_symbol')}} | {{states('sensor.buienradar_temperature')}} °C
{% endif %}
kiosk mode uses this for mobile:
mobile_settings:
hide_menubutton: true
hide_overflow: true
ignore_entity_settings: true
which should effectively (and does on all regular views) hide the menu item…
Solved…
discovered I had forgotten to enable the kiosk-mode settings in my Subviews dashboard:
button_card_templates: !include_dir_merge_named ../button_card_templates
decluttering_templates: !include_dir_named ../decluttering_templates
# #custom_header: !include lovelace/custom_header/custom_header_data.yaml
kiosk_mode: !include ../kiosk-mode/kiosk-mode.yaml # <---- now enabled
views: #!include_dir_merge_list ui-sub-views
- !include ui-sub-views/subview_energieprijzen.yaml
- !include ui-sub-views/subview_hue_scenes.yaml
- !include ui-sub-views/subview_alle_lampen.yaml
- !include ui-sub-views/subview_computer_netwerk.yaml
- !include ui-sub-views/subview_summary_groups.yaml
- !include ui-sub-views/subview_verlichting.yaml
- !include ui-sub-views/subview_notificatie.yaml
- !include ui-sub-views/subview_zwave.yaml
- !include ui-sub-views/subview_automaten.yaml
- !include ui-sub-views/subview_schakelaars.yaml
- !include ui-sub-views/subview_weblinks.yaml
- !include ui-sub-views/subview_intercom_commands.yaml
- !include ui-sub-views/subview_plattegrond_bijkeuken.yaml
- !include ui-sub-views/subview_plattegrond_keuken.yaml
- !include ui-sub-views/subview_plattegrond_auditorium.yaml
- !include ui-sub-views/subview_plattegrond_eetkamer.yaml
2023.2 brings a mew challenge:
where the demise of the aria-label in the mwc-list-items had already killed the possibility to use
mwc-list-item[aria-label="Ongebruikte entiteiten"] {
{% if is_state('input_boolean.hide_unused_entities','on') %}
display: none;
{% endif %}
}
we now have a new icon in the app-toolbar for the Conversation. It makes this too powerful
/* Hide the quickbar launcher. mdi:magnifier */
app-toolbar > ha-icon-button {
{% if is_state('input_boolean.hide_search','on') %}
display: none;
{% endif %}
}
because that effectively takes the 2 icons out, (magnifier And conversation) and not only the magnifier.
So, cut it short, we need to reset those mods.
for the mwc-items (the items in the menu dropdown can now only be identified by an order number?
but that is difficult, as it changed depending on screen width:
I did try something like
mwc-list-item[2"] {
{% if is_state('input_boolean.hide_unused_entities','on') %}
display: none;
{% endif %}
}
but that does not work. now how can we get to the unique identifier Text for those.
as for the app-toolbar > ha-icon-button, how to reach the individual buttons for
EDIT
separate post with a semi-solution (which is maybe not even that…)
mwc-list-item:nth-child(2) {
{% if is_state('input_boolean.hide_vernieuwen','on') %}
display: none;
{% endif %}
}
mwc-list-item:nth-child(3) {
{% if is_state('input_boolean.hide_unused_entities','on') %}
display: none;
{% endif %}
}
mwc-list-item:nth-child(4) {
{% if is_state('input_boolean.hide_herlaad_bronnen','on') %}
display: none;
{% endif %}
}
mwc-list-item:nth-child(5) {
{% if is_state('input_boolean.hide_edit_dashboard','on') %}
display: none;
{% endif %}
}
does in fact hide/show the named menu dropdown items, but only when not in mobile mode.
If the screen is narrower, the menu items change and the loupe and the conversation are added atop of the list…
so, stilll looking for a way to relate to the text field in the menu items.
which seems to be
/app-header/app-toolbar/ha-button-menu/mwc-list-item[*]/text()
Alternative DROP-DOWN MENU styling
Having got used to node-red, which has a variety of drop-down ‘styles’ I was flummoxed that HA seems to have only one, with little scope for adapting it. It works OK where you have loads of horizontal space, but is awfully limited otherwise, e.g. use in a horizontal-stack (see pics).
Even using card-mod, it’s been impossible to achieve the styling we need.
\/ current drop-down in 4-way horizontal stack
I’m hoping I’ve missed something and look-forward to a more-experienced HA practitioner putting me right. But please, if you think there’s a simpler way, try yourself 1st before posting - being a fairly experienced web-designer, with CSS I thought it was gonna be simple.
After many-hours, I’ve been able to card-mod the existing ‘style’ to ALMOST work for me - please see pics - but it’s a bodge and still not perfect (see the black lines).
The main issues are that I can’t easily get rid of (or tweak): 1. the ICON-space 2. the ‘down-arrow’ space 3. the black-line. I ended up using -ve margins and relying on other buttons hide stuff to solve 1 and 2, 3 not sorted,
In striving to sort this I’ve searched hundreds of posts, many are looking for the same, some who had tried, failed and given up.
Advice appreciated - thanks!
Not sure if this about theming, or styling individual cards/entities?
Anyhow, and without seeing your code, so not remotely sure if it’s what you’re after, I got this:
- type: horizontal-stack
cards:
- type: entities
entities:
- entity: input_select.lms_repeat_mode
<<: &input_select_narrow_card_mod
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
ha-select:
$:
div.mdc-select.mdc-select--filled: |
div.mdc-select__anchor span.mdc-select__dropdown-icon {
margin-top: 8px;
margin-left: -8px;
position: absolute
}
div.mdc-select__anchor span.mdc-line-ripple {
display: none;
}
div.mdc-select__anchor span#label.mdc-floating-label.mdc-floating-label--float-above {
margin-left: 16px;
}
name: "Repeat"
- type: entities
entities:
- entity: input_select.lms_shuffle_mode
<<: *input_select_narrow_card_mod
name: "Shuffle"
That’s two horizontally stacked in a standard lovelace column, so 500px wide all together, each input select just over 200px each. It seemed to work at narrower widths too. But maybe I’m miles off what you’re looking for?
Hey guys, I’m in the same boat… did you figure anything out to create a footer that persists at the bottom of the screen?
Wow thats a great start - many many thanks - still think a more-flexible entity drop-down card would be easier tho 
… I’ll play with that - so far get (drop-down icon misplaced but i’ll work on that
