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
forgive ignorance - what does the <<: &input_select_narrow_card_mod do?
&input_select_narrow_card_mod do? ā¦ aha - a reference that can be re-used within a card - like a template - brilliant thanks
Seems you answered your own question, but just in case, thereās more here courtesy of Thomas LovĆ©n, whoās behind card_mod and several other custom cards:
Hi Chris thanks so far ā¦ nearly there but Iām unused to shadow-root ~ shadow-dom selectors and the way you have (successfully) used selectors is not the way Iāve done it before in card-mod - I tend to use the browser inspect - copy the selector ā¦ which has failed me in this case
so to help, how would you mod the padding of the container (green) in which the input_select (yellow) is shown - mine is 16px atm - and Iād like 0px - many thanks
Apologies for the delay in getting back to you on this - without seeing your yaml code, Iām guessing thatās the padding that comes from the entities card which is the parent of the input select. If thatās the case, then you would add card_mod styles to the entities card as well as the input select.
Maybe something like this:
- type: horizontal-stack
cards:
- type: entities
card_mod:
style: |
div#states.card-content {
padding: 0px;
}
entities:
- entity: input_select.<your_input_select>
<your card_mod for the input select>
Can you please move your discussion to the card_mod thread. This one is about card_mod theme styling.
Thanks Chris - finally there !! my main confusion was missing STYLE for āentites:ā vs STYLE for ā-enitityā (indented) ā¦ hope this helps others other HA nubees ā¦ final result is perfect:
For others the final yaml is:
type: custom:mod-card
card:
type: grid
columns: 8
square: false
show_title: false
cards:
- type: entities
entities:
- entity: input_select.room_mode
name: room
style:
ha-select:
$:
div.mdc-select.mdc-select--filled: |
div.mdc-select__anchor span.mdc-select__dropdown-icon {
margin-top: -20px !important ;
margin-left: 50px;
position: absolute;
} span.mdc-floating-label--float-above {
max-width: 100px !important;}
div.mdc-select__anchor span.mdc-line-ripple {
display: none;}
style: |
ha-card {
margin: 0px -39px 0px 0px !important;
padding: 0px !important;
height: 40px !important;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0,0.2), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !important;
}
div#states.card-content
{
padding: 0px !important;
margin: -12px -30px 0px -52px !important;
--card-mod-icon: none !important;
}
For some reason, Iām unable to get the header bar to unset to the bottom even after following the theme cookbook. Would someone who has successfully moved their header to the bottom please share their theme with me so I can rule in/out my .yaml config? Thanks in advance.
@GoodyGizmos
Try this style to move a header to the bottom:
Updated 19.08.23
card-mod-root-yaml: |
.: |
.header {
top: calc(100vh - 60px) !important;
transform: unset !important;
}
.edit-mode .header {
top: calc(100vh - 104px) !important;
}
card-mod-view-yaml: |
:first-child $: |
ha-fab {
bottom: calc(16px + env(safe-area-inset-bottom) + 40px) !important;
}
.: |
hui-view {
transform: translate3d(0px,-56px,0px);
}
does not work at least in 2023.8
card-mod-root-yaml: |
.: |
app-header {
top: calc(100vh - 60px) !important;
transform: unset !important;
}
app-header:has(.edit-mode) {
top: calc(100vh - 104px) !important;
}
card-mod-view-yaml: |
:first-child $: |
ha-fab {
bottom: calc(16px + env(safe-area-inset-bottom) + 40px) !important;
}
.: |
hui-view {
transform: translate3d(0px,-56px,0px);
}
Not the most perfect solution - note a gap above cards in āeditā mode:
Thank you so much! This is working well for me in view and edit modes (no gap):
header-height: 48px
card-mod-root-yaml: |
.: |
app-header {
top: calc(100vh - 48px) !important;
transform: unset !important;
}
app-header:has(.edit-mode) {
top: calc(100vh - 94px) !important;
}
card-mod-view-yaml: |
:first-child $: |
ha-fab {
bottom: calc(16px + env(safe-area-inset-bottom) + 40px) !important;
}
.: |
hui-view {
transform: translate3d(0px,-48px,0px);
}
Iāve made sense of most of it except the first-child rule. What does that do?
Any idea why the cookbook method would no longer work for me?