🔹 Card-mod - Super-charge your themes!

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

THANK YOU for this.

I’ve been trying to make closing the more-info popups easier on mobile instead of reaching to the top-left X (any ideas out there??), and with your sample I’ve made them more of a popup where I can click on the sides/bottom (outside) to close it:

They also adjust height automatically based on the content.

  card-mod-more-info-yaml: |
    .: |
      @media (max-width: 450px) {
        ha-dialog {
            --mdc-dialog-min-width: calc(95vw)!important;
            --mdc-dialog-min-height: 0!important;
            --mdc-dialog-max-height: 90%!important;
            --dialog-surface-margin-top: 20px!important;
            --ha-dialog-border-radius: 20px!important;
        }
      }
    ha-more-info-info:
      $: |
        @media (max-width: 450px) {
          .container {
            min-height: auto!important;
          }
        }

I also tried making a border-radius on bottom-right, but although clicking the radius area works (closes the popup) on desktop, it doesn’t display (nor tapping it works) on iOS HA app (although it does in the screenshot for some reason). On Chrome iOS, it displays but doesn’t close the popup.

I’m not very good with card-mod (understanding the $, .:, |, etc.)

1 Like

I don’t have black as default so need to set it back to black in the bar only.

i don’t have underscores? :stuck_out_tongue:

Edit: the minus -
It works now, Thanks!

Yes, I meant hyphens, not underscores)

1 Like

Need a little help with classes…

I’m trying to establish different classes that I can use to style certain domains of card, for example:

type: tile
entity: light.sofa_lights
card_mod:
  class: light

or

type: tile
entity: switch.coffee_machine
card_mod:
  class: switch

Here is my theme file:

test:
  card-mod-theme: test
  card-mod-card-yaml: |
      .: |
        @keyframes fadeIn {
          0% { opacity: 0; }
          100% { opacity: 1; }
        }
        
        ha-card {
          height: 60px !important;
          width: 180px !important;
          animation: fadeIn 1s ease;
          border-radius: 15px;
          border-color: transparent;
          box-shadow: 0px 0px 0px 0px;
          background:
            {% if is_state(config.entity, 'on') %} white
            {% else %} rgba(0,0,0,0.3) {% endif %}
        }

        .icon-container {
          position: absolute !important;
          margin-left: -20px !important;
          margin-top: -20px !important;
          left: 30px !important;
          top: 50% !important
        }
      
        ha-card.light ha-tile-icon {
          --tile-icon-color:
            {% if is_state(config.entity, 'on') %} var(--tile-color)
            {% else %} gold {% endif %} !important
        }

        ha-card.switch ha-tile-icon {
          --tile-icon-color:
            {% if is_state(config.entity, 'on') %} var(--tile-color)
            {% else %} palegreen {% endif %} !important
        }

        ha-card.automation ha-tile-icon {
          --tile-icon-color:
            {% if is_state(config.entity, 'on') %} var(--tile-color)
            {% else %} lightgrey {% endif %} !important
        }

        ha-tile-info {
          position: absolute !important;
          padding: 0% !important;
          margin-top: -20px;
          left: 60px;
          top: 50%;
          max-width: 110px
        }
      
      ha-tile-icon$: |
        div.shape::before {
          background-color:
            {% if is_state(config.entity, 'on') %} var(--tile-icon-color)
            {% else %} rgba(0,0,0,0.6) {% endif %}
          }
          
      ha-tile-info$: |
        span.primary {
          color:
            {% if is_state(config.entity, 'on') %} black
            {% else %} white {% endif %};
          }
          
        span.secondary {
          color:
            {% if is_state(config.entity, 'on') %} grey
            {% else %} lightgrey {% endif %};
          font-size: 14px
          }

As you can see, I have specified class-specific elements in the .: section (for example,
ha-card.light ha-tile-icon
and these work fine. However I can’t seem to get the code right for shadowDOM elements (like
ha-tile-icon$
) - any ideas how I need to format it?