🔹 Card-mod - Super-charge your themes!

[almighty59]

I had to completely EDIT my entire post because I got it working. I was trying to switch the sidebar to the left side, make it smaller, and scroll the main. It works as instructed so I must have been doing something wrong at first. My working code is at the bottom but unfortunately it still doesn’t do everything I would it to.

I’m not sure that this would be the best place to ask this but is there anyway to use the sidebar layout along with the Grid (layout-car) by @thomasloven? I’ve used other sidebar integration’s but there’s a lot of glitches with them. I’d like to have a sidebar on every page which does not change. This sidebar seems to work fine but it doesn’t seem like I could use the Grid (layout-card) with it which is what I’ve have my entire frontend setup with.

If not and besides just dealing with the other glitchy sidebar integrations, I’ve tried using the Grid (layout-card) and the custom:declutter-card to make a sidebar which works but I need to find a way to keep the sidebar fixed in place. Can I use some type of theme or card-mod styling similar to what I have below to freeze the sidebar column in place (one column in the layout-card) and let the rest of everything scroll as normal?

Any suggestions?

side_bar_my_dark_theme:

  card-mod-theme: side_bar_my_dark_theme
  card-mod-view-yaml: |
    hui-sidebar-view $: |
      .container {
        flex-direction: row-reverse;
      }
    hui-sidebar-view:
      $: |
        .container div#main {
          max-height: calc(100vh - var(--header-height) - 4px);
          overflow-y: auto;
        }
        @media (max-width: 760px) {
          .container div#main {
            max-height: unset;
            overflow-y: unset;
          }
        }
        .container div#sidebar {
          max-width: 300px;
          width: -webkit-fill-available;
        }

[almighty59]

Card-mod - Super-charge your themes!

I had to completely EDIT my entire post because I got it working. I was trying to switch the sidebar to the left side, make it smaller, and scroll the main. It works as instructed so I must have been doing something wrong at first. My working code is at the bottom but unfortunately it still doesn’t do everything I would it to. I’m not sure that this would be the best place to ask this but is there anyway to use the sidebar layout along with the Grid (layout-car) by @thomasloven? I’ve used other…

@Ildar_Gabdullin instead of using the sidebar layout or one of the sidebar integrations, is there a way to just style a Grid (layout-card) so the left most column in the grid stays fixed but all of the other columns still scroll? Thanks.

[Ildar_Gabdullin]

I am not a css pro; imho you cannot make only a part of grid scrollable.
P.s. Please do not tag people, this is against rules.

[VietNgoc (Ngoc John)]

Hi everyone, I’m coming to you with a question somehow I can’t figure out why this is happening. I use for custom popup card with browser mod integration and in it I modify styles for css using card-mod.

I have one main theme for the whole system, which contains only basic variables for HA and a small part for card-mod-more-info-yaml configuration, for the dashboard I have another theme separately, which contains its own variables and another card-mod-view-yaml for a specific dashboard view.

Moving on to the problem, lately I’ve been experiencing a little delayed response after opening a custom popup and css styles reload after with lag, depending on how much custom css is used in it. I don’t know if it happened before the card-mod update or after. To find out the cause of the problem in the dev tools where the error is, the cause of the delay is in the use of the card-mod module to modify the css popup content elements.

So I want to ask more experienced people if anyone has encountered and solved a similar problem, or advised how to properly use the css for the popup content with the browser mod without getting an error. Thank you in advance for your answers…

Main theme

Main Theme
  card-mod-theme: Main Theme

  card-mod-more-info-yaml: |

    .: |
      ha-dialog {
        --vertical-align-dialog: var(--tablet-popup-align-dialog) !important;
        --dialog-surface-margin-top: var(--tablet-popup-margin-top) !important;
        --dialog-box-shadow: 0 0px 16px 4px rgba(101,115,134, .15), 0 16px 64px 32px rgba(101,115,134, .5) !important;
        --mdc-theme-surface: rgba(34,38,39,1) !important;
      }



      ha-dialog > div.content > div.container {
        padding: 0 !important;
      }
      @media (max-width: 800px), (max-height: 500px) {
        ha-dialog {
          --mdc-dialog-min-width: 100vw !important;
          --mdc-dialog-min-height: 100vh !important;
          --popup-border-radius: 0 !important;
        }
      }

      ha-dialog > div:focus {
        outline: none;
      }

    $: |
      .mdc-dialog__surface {
        background-color: var(--popup-background-color) !important;
        box-shadow: var(--dialog-box-shadow) !important;
      }

Popup dialog

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: MBPro Server
    card_mod:
      style:
        ha-dialog$: |
          :host {
              --ha-card-border-width: 0 !important;
              --ha-card-border-radius: 0px !important;
              --ha-card-border-color: none !important;
              --bar-card-border-radius: 12px !important;
              --ha-card-box-shadow: none !important;
              --ha-card-background: none !important;
              --mdc-theme-surface: rgba(34,38,39,1) !important;
          }
          .mdc-dialog__surface {
            background-color: var(--popup-background-color) !important;
          }
        layout-card:
          $grid-layout$:
            # card divider border
            .: |
              #root > * {
                margin: 0px !important;
              }
              @media (max-width: 450px), (max-height: 500px) {
                #root {
                  display: block !important;
                }
              }
            hui-entities-card:
              $: |
                ha-card {
                  border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
                  border-radius: 0;
                  transition: none;
                }
                /* portrait */
                @media screen and (max-width: 800px) {
                  ha-card {
                    border-right: none;
                    border-bottom: 0.1vw solid rgba(58, 69, 73, 0.2);
                  }
                }
              $hui-horizontal-stack-card:
                $: |
                  #root {
                    justify-content: space-evenly;
                    margin-top: 1.7em;
                  }
            hui-entities-card:last-child:
              $: |
                ha-card {
                  border: none;
                }
    content:
      type: custom:layout-card
      layout_type: custom:grid-layout
      layout: !include ../../snippets/popup_footer_layout.yaml
      cards:

whole popop yaml codes

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: MBPro Server
    card_mod:
      style:
        ha-dialog$: |
          :host {
              --ha-card-border-width: 0 !important;
              --ha-card-border-radius: 0px !important;
              --ha-card-border-color: none !important;
              --bar-card-border-radius: 12px !important;
              --ha-card-box-shadow: none !important;
              --ha-card-background: none !important;
              --mdc-theme-surface: rgba(34,38,39,1) !important;
          }
          .mdc-dialog__surface {
            background-color: var(--popup-background-color) !important;
          }
        layout-card:
          $grid-layout$:
            # card divider border
            .: |
              #root > * {
                margin: 0px !important;
              }
              @media (max-width: 450px), (max-height: 500px) {
                #root {
                  display: block !important;
                }
              }
            hui-entities-card:
              $: |
                ha-card {
                  border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
                  border-radius: 0;
                  transition: none;
                }
                /* portrait */
                @media screen and (max-width: 800px) {
                  ha-card {
                    border-right: none;
                    border-bottom: 0.1vw solid rgba(58, 69, 73, 0.2);
                  }
                }
              $hui-horizontal-stack-card:
                $: |
                  #root {
                    justify-content: space-evenly;
                    margin-top: 1.7em;
                  }
            hui-entities-card:last-child:
              $: |
                ha-card {
                  border: none;
                }
    content:
      type: custom:layout-card
      layout_type: custom:grid-layout
      layout: !include ../../snippets/popup_footer_layout.yaml
      cards:
        #################################################
        #                                               #
        #                HOME ASSISTANT                 #
        #                                               #
        #################################################
        - type: entities
          title: ' '
          show_header_toggle: false
          card_mod:
            class: header
          entities:
            - entity: binary_sensor.macbookpro
              name: Active
              state_color: true
            - entity: sensor.mbproserver_connection_type
              name: Connection
            - entity: sensor.mbpro_uptime_usage
              name: Uptime
            - type: custom:bar-card
              width: 55%
              height: 2em
              decimal: 0
              unit_of_measurement: '%'
              positions: &bar_card_positions
                icon: outside
                indicator: 'off'
                name: outside
              severity: &bar_card_severity
                - color: '#9da0a2'
                  from: 0
                  to: 59
                - color: '#9da0a2'
                  from: 60
                  to: 100
              entity_row: true
              entities:
                - entity: sensor.mbpro_cpu_usage
                  name: Processor
                - entity: sensor.mbpro_memory_usage
                  name: Memory
            - type: custom:hui-horizontal-stack-card
              cards:
                - type: custom:button-card
                  name: Lock
                  icon: mdi:lock
                  tap_action:
                    action: call-service
                    service: shell_command.lock_mbpro
                  template: icon_name
                - type: custom:button-card
                  name: Sleep
                  icon: mdi:power-sleep
                  tap_action:
                    action: call-service
                    service: shell_command.sleep_mbpro
                  template: icon_name
          footer:
            type: custom:mini-graph-card
            # name: Speedtest
            tap_action:
              action: call-service
              service: homeassistant.update_entity
              service_data:
                entity_id: sensor.mbpro_cpu_usage
            entities:
              - entity: sensor.mbpro_cpu_usage
                name: Processor
                color: '#00bb33'
              - entity: sensor.mbpro_memory_usage
                name: Memory
                show_state: false
                color: '#2196f3'
                y_axis: secondary
            hours_to_show: 48
            hour24: true
            line_width: 3
            animate: true
            # upper_bound_secondary: 100
            show:
              name: false
              icon: false
              state: false
              legend: false
              fill: fade
              labels: true
              labels_secondary: false
              average: false
              extrema: false
              points: hover

[almighty59]

You might not be a pro but you do have a lot more experience and knowledge about bout it than me. If I get stuck trying to style something, I always check to see what you say first because your below post on using the card_mod: has some of the best examples.

@Ildar_Gabdullin

Here all my posts which may be useful:

And I apologize for tagging you but the majority of the time that’s how I begin my replies. I also never heard anyone say it was against the rules. The only thing I’ve heard people say is not to tag someone in a topic that they’ve never posted on because it sounds like you’re summoning them…

So I just checked the rules and tagging is allowed, they just say to be polite and respectful when you do it. They only suggest not to do it because of the same reason that I just stated above. Either way, I’ll make sure not to do it when it comes to your posts since you obviously don’t like it. Have a great day…

Should I tag people?

Generally, no.

It comes across as bad manners, you’re demanding somebody answers you. It’s different if you’re thanking somebody, obviously.

If you do tag somebody keep it polite and respectful. Remember that everybody is a volunteer, and nobody has to help you.

[Ildar_Gabdullin]

You are always welcome to ask! If I can, if I am home, if my HA test machine is on - will try helping.

@almighty59

is there a way to just style a Grid (layout-card) so the left most column in the grid stays fixed but all of the other columns still scroll?

A possible way:
– layout card: a grid with 2 columns: vertical-stack + layout-card,
– the 2nd layout-card has a grid layout + card-mod for scrolling

[frnak (Frank Cassata)]

I’m trying to use the theme features to reuse CSS for a mod-card that I’m using to wrap many of my cards that otherwise start with vertical stacks. The class attribute does not seem to be applied to the card. This is the yaml, and the markdown ha-card gets the class applied, but not the mod-card. Should I be using something other than a mod-card?

type: custom:mod-card
card_mod:
  class: mod-card-wrapper
card:
  type: vertical-stack
  cards:
    - type: markdown
      content: Lampar
      card_mod:
        class: card-header

Edit: Trying to move this from mod-card to entities, but type: hui-markdown-card is not working.

Edit2: I just skipped the markdown card since all it was doing was acting as a title. Just used the entities card title instead and styled it the same.

[Ildar_Gabdullin]

@frnak

The class attribute does not seem to be applied to the card

Because “class” does not work for mod-card.

[Imygaf]

I have the following code to make a card blink. It fades in, is it possible to make it blink without fading so just on/off.

card:
            type: custom:mushroom-entity-card
            entity: sensor.blue_bin
            icon_type: entity-picture
            card_mod:
              style: |
                ha-card {
                  border: solid 3px red;
                  box-shadow: none;
                  animation:
                    {% if state_attr('sensor.blue_bin', 'daysTo') < 3 %} 
                      blink 2s linear infinite;
                    {% else -%} none
                    {% endif %}
                }
                  @keyframes blink {
                  from {opacity: 100;}
                  to {opacity: 0;}
                  from {opacity: 0;}
                  to {opacity: 100;}
                }

Thanks

[Ildar_Gabdullin]

Wrong thread. Go to a card-mod thread, this one is for themes.

[remmob]

I’m trying to remove the margin of a grid template area.
I can not figure out how to do this.
so far I have:

card-mod-theme: witbol
card-mod-view-yaml: |
  grid-layout:
    $: |
      div#root {
        margin: 0;
       }

This removes the margin, outside the grid. which I want.
and also want to remove the margin from the template area.

Here is a image where I added the margin: 0 in the chrome developer tools.
and gives the result I need.

[Faecon (Jo)]

                card_mod:
                  style: |
                    mushroom-shape-icon$: |
                      ha-icon {
                        {% if is_state('media_player.woonkamer', 'playing') %}
                        --icon-animation: music 2s ease-in-out infinite alternate;
                        transform-origin: 50% 100}
                      }
                      .shape {
                        perspective: 7px;
                      }
                      @keyframes music {
                        0%, 100% { transform: translateY(0px) scaleX(1); }
                        20% { transform: translateY(2px) scaleX(0.9); }
                        40% { transform: rotateY(10deg) rotateZ(-10deg); }
                        60% { transform: translateY(-4px) scaleX(1.1); }
                        80% { transform: rotateY(-10deg) rotateZ(10deg); }
                      }
                    .: |  
                      ha-card {
                        --chip-background: transparent;
                        border: none !important;
                        box-shadow: none !important;
                      }

my chip does not get transparent. what am I doing wrong ?

[remmob]

Try background: transparent without --chip-

[flequi19]

How can I change the color not only of the icon but also of the outside roundel?

card_mod:
  style: |
    :host {
      --card-mod-icon:
        {% if states(config.entity) == 'high' %} mdi:battery
        {% else %} 
         {% if states(config.entity) == 'middle' %} mdi:battery-50
         {% else %}
         mdi:battery-20
        {% endif %}
        {% endif %};
      --card-mod-icon-color:
        {% if states(config.entity) == 'high' %} green
        {% else %} 
        {% if states(config.entity) == 'middle' %} yellow
        {% else %}
         red
        {% endif %}
        {% endif %};

[Ildar_Gabdullin]

1. This a themes thread. Ask in a card-mod thread.
2. Consider using “elif” instead of “else if”.

[Dreg (Gerd)]

Hey Guys,

is it possible to mod the mushroom theme so that every icon has no background?
Like this

[sanket]

did you find any solution to this?

i am looking for same

[Dreg (Gerd)]

actually not! very disappointing……

[Ildar_Gabdullin]

Try adding an “after” pseudo class after a title and define a background. Then show/hide this element conditionally

[Dreg (Gerd)]

Ok sounds good….how can i implement that?
Can you please give me an example?