šŸ”¹ Card-mod - Super-charge your themes!

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! :rofl:

Red Alert Animation

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:
SchermĀ­afbeelding 2023-01-26 om 10.35.04

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

SchermĀ­afbeelding 2023-01-26 om 10.41.26

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

image

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!
image

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 :slight_smile: ā€¦ Iā€™ll play with that - so far get (drop-down icon misplaced but iā€™ll work on that
image

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:

https://github.com/thomasloven/hass-config/wiki/Misc-tricks

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
image

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:
image
image

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?