🔹 Card-mod - Super-charge your themes!

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?

Have no idea… I even do not remember when I checked Cookbook last time. Since HA is changing - probably some styles may stop working.

It stands for an element which may be different for a masonry view, panel view etc.

1 Like

I checked your version, there is a gap anyway above cards.

Also, in the “edit” mode no underlines are displayed for selected views.

i moved my navbar to the bottom using this:

  card-mod-root: |
    app-toolbar {
      display: none;
    }
  header-height: "58px"
  card-mod-view-yaml: |
    "*:first-child$": |
      #columns .column > * {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
      }
  # Move navbar
  card-mod-root-yaml: |
    ha-tabs$: |
      #tabsContent {
        width: 97%;
      }
    .: |
      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, ha-menu-button, [main-title] {
          display: none !important;
        }
        app-toolbar {
          padding-right: 0px;
          padding-left: 0px;
        }
      }
      ha-app-layout{
        transform: initial;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        height: 100% !important;
      }
      app-header {
        top: auto;
        bottom: 0;
        box-shadow: var(--footer-shadow);
        position: fixed;
        height: var(--header-height) !important;
      }
      app-toolbar {
        height: var(--header-height) !important;
        padding: 10px 10px !important;
        background: var( --ha-card-background, var(--card-background-color) );
      }
      #view {
        margin-top: calc(-1 * var(--header-height)) !important;
        padding-bottom: var(--header-height) !important;
      }
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--header-tab-indicator-color) !important;
        --mdc-icon-size: 24px;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        margin-top: 15px;
        height:var(--header-height) !important;
      }
      paper-tab[aria-selected=true] {
        color: var(--google-blue); 
      }
      paper-tab {
        color: var(--header-all-tabs-color);
        border-radius: 5px;
        height: 32px;
        padding: 0 20px;
      }

giving me this:

however the backbutton of a subview doesn´t match the other icons. is there a way to move it?

had a bit of a back-and-forth between elements, to style a notification badge in the menu items:

      a[data-panel='ui-familie'] paper-icon-item:after {
              {% set count = states('sensor.family_home') %}
              content: "{{count}}";
              font-size: 11px;
              padding: 0px 3px;
              font-weight: bold;
              left: calc(var(--app-drawer-width) - 42px);
              position: absolute;
              min-width: 20px;
              box-sizing: border-box;
              border-radius: 50%;
              border: 1px solid var(--text-color-on);
              background-color: {{states('sensor.presence_color')}};
              color: var(--text-color-off);
              line-height: 18px;
              text-align: center;
      }

is what I finally settled for, to have the same styling as my regular button-card notification balloons do:

styles_cf_notification:
  styles:
    custom_fields:
      notification:
        - border: 1px solid var(--text-color-on)
        - border-radius: 12px #50%
        - font-size: 11px
        - font-weight: bold
        - height: 18px
        - line-height: 18px
        - min-width: 12px
        - padding: 0px 3px
        - position: absolute
        - right: 5%
        - top: 10%

there are some subtle differences, and most experimenting took the border I set, (and which Ildars example above does not). Apparently the 1 px border throws all balance off, and needs fixing by setting the line-height as in my button-cards. If I also add the height, it goes haywire again.

anyways, this is what I have now:

also tried to set an image on a notification with:

      a[data-panel='ui-overzicht'] paper-icon-item:after {
              left: calc(var(--app-drawer-width) - 42px);
              position: absolute;
              min-width: 20px;
              box-sizing: border-box;
              border-radius: 50%;
              border: 1px solid var(--text-color-on);
              background-image: "{{state_attr('sensor.activity_summary','entity_picture')}}";
      }

but that doesn’t work… maybe that is using too much from card-mod-theme :wink:

now see the notification in the sidebar should not be styled according to the buttons in the dashboard, but to the core notifications styling…

Scherm­afbeelding 2023-03-01 om 07.34.56

o well, some experimenting ahead, lets find the resource for that.

update

core notification:

so went back to a borderless badge after all. Note the --paper-item-min-height: 40px; under paper-icon-item. I tried that, but it stretched the notification vertically completely out of proportion. SO left it out, to get back to

      a[data-panel='ui-familie'] paper-icon-item:after {
              content: "{{states('sensor.family_home')}}";
              left: calc(var(--app-drawer-width) - 42px);
              position: absolute;
              min-width: 20px;
              box-sizing: border-box;
              border-radius: 50%;
              font-weight: 400;
              background-color: {{states('sensor.presence_color')}}; /*var(--accent-color);*/
              line-height: 20px;
              text-align: center;
              padding: 0px 6px;
              color: {{'saddlebrown' if states('sensor.presence_color') == 'gold' else 'ivory'}}; /*var(--text-accent-color, var(--text-primary-color));*/
              font-size: 14px;
      }

which now seems much better:

Scherm­afbeelding 2023-03-01 om 08.21.37

Is it possible to apply a theme to the contents of a custom:mod-card?

Background:
I have a horizontal stack that I have set as a custom:mod-card so I can apply a class to the card as a whole, giving me this solid color bar on the left side. Without the custom:mod-card, I have to add the class to each card in the stack, giving me multiple little bars with gaps between them vertically and a large blank space at the bottom (since the right card in this horizontal stack is taller than the left)

I have a default theme set on the lovelace view, and I am using different themes on many of the other cards within. They are all just variations on the main color scheme. Because of another factor, I need to have V1 as the default theme for the whole view and modify some of the cards within.

Issue:
For the life of me, I cannot figure out how to force anything other than the default, background-selected theme to work on this custom:mod-card.

Thomas warned us… I even checked “I know what I’m doing” to see the custom:mod-card instructions :rofl:

type: vertical-stack
cards:
  - type: markdown
    content: '# Captain''s Quarters'
    theme: LCARS Lower Decks Var 3
    card_mod:
      class: header
### This is the card in question:
  - type: custom:mod-card
    card:
      type: horizontal-stack
      cards:
        - type: vertical-stack
          cards:
            - type: custom:gap-card
              height: 8
            - type: custom:mushroom-light-card
              entity: light.duane_s_lamp_top
              fill_container: false
              show_brightness_control: true
              show_color_control: true
              collapsible_controls: true
              layout: horizontal
              use_light_color: true
              secondary_info: last-updated
              card_mod:
                class: middle-blank
            ### etc...
        - type: vertical-stack
          cards:
            - type: entities
              entities:
                - entity: input_boolean.adaptive_lighting_bedroom
                  name: Adaptive Lighting
                  icon: none
                - entity: scene.bedroom_read
                  icon: none
                ### etc...
              show_header_toggle: false
              theme: LCARS Lower Decks Var 3
              card_mod:
                class: middle-blank
    theme: LCARS Lower Decks Var 3 ### I have tried this here, in the style, and everywhere else in this card's yaml without any success. ###
    card_mod:
      style: |
        ha-card {
          class: middle
        }
### End questionable card.
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: call-service
      service: input_select.select_option
      data:
        option: None
      target:
        entity_id: input_select.gui_lights
    show_state: false
    name: Close
    icon: mdi:close
    theme: LCARS Lower Decks Var 3
    icon_height: 40px
    card_mod:
      class: middle
  - type: markdown
    content: '## &nbsp;'
    theme: LCARS Lower Decks Var 3
    card_mod:
      class: footer

As always, I appreciate any insight and advice. Thanks!!!

With HA 2023.3 front end code changes my little theme modification of more info dialog size doesn’t work correctly anymore.
I had set 760px width for more info dialogs and 1280px if they are camera views. But now also the camera view opens in 760px and I can’t figure out how to make it work again. Please help.

  card-mod-more-info-yaml: |
    .: |
      ha-dialog[data-domain="camera"] {
        --mdc-dialog-min-width: 1280px !important;
      }
      ha-dialog {
        --mdc-dialog-min-width: 760px !important;
      }


2 Likes

I was searching for exact same thing…
Seems like data-domain=“camera” attribute is gone on ha-dialog

trying to put some styles in themes yaml.

But cant get this to work:

home_schmitz:

  modes:

#Light
    light:
      background-image: 'center / cover no-repeat url("/local/images/lovelace/backgrounds/background-light.jpg") fixed'
      primary-text-color: "#2c3b4b"
      ha-card-border-color: "#d9d9d9"

      ## Custom values ##
      --my-barcard-font-color: "black"
      --my-customfield-info-border-color: "white"


# Dark
    dark:
      background-image: 'center / cover no-repeat url("/local/images/lovelace/backgrounds/background-night.png") fixed'
      ha-card-border-color: "#454545"

      ## Custom values ##
      --my-barcard-font-color: "white"
      --my-customfield-info-border-color: rgb(217, 217, 217)




## Card Mod ##
  card-mod-theme: home_schmitz
  card-mod-card: |

    ha-card.popup-head {
      --name-font-size: 18px !important;
      background-color: transparant !important;
      box-shadow: none;
      border: 0px;
      --ha-card-border-width: 0px;
    }

    ha-card.popup-content {
      font-size: 14px !important;
      background-color: transparant !important;
      box-shadow: none;
      border: 0px;
      --ha-card-border-width: 0px;
    }
    
    ha-card.popup-custom-field-info {
      box-shadow: none;
      font-size: 14px !important;
      border-color: var(--my-customfield-info-border-color) !important;
    }

    bar-card-contentbar {
      color: var(--my-barcard-font-color);
    }

the
–my-barcard-font-color: “black” Does work.

the
–my-customfield-info-border-color: “white” Does not work > is not defined…
I dont understand why.

Must be without underscores.
Font color does not work too - it becomes black by default.

1 Like