🔹 Card-mod - Add css styles to any lovelace card

Please post the entire card’s code. Simple things like misplaced code, typos and column errors can cause the issues you are describing.

Link to pastebin

So I understand, what section are you trying to make clear. Where the red is?

When you tap it , the color comes back correct?

No, when you tap on a section, a lighter rectangle is formed around the icon, like this:

Then if I tap another section, the lighter rectangle moves to the other section. if I then tap on any other part of the dashboard the lighter rectangle disappears, like this:

I wish that rectangle wasn’t there

We are saying the same thing, so I see what you are looking for.

Try this:

type: custom:mod-card
card_mod:
  style: |
    tabbed-card {
      --mdc-ripple-color: transparent;
    }
card:
  type: custom:tabbed-card
  ...

or w/o card-mod:

type: custom:tabbed-card
styles:
  '--mdc-ripple-color': transparent
...
1 Like

Now it work, thanks!

So I have an issue, I tinkered with the code for a few days and got it to work. I accidentally deleted the card a few days later and for some reason my HA did not back up the card. So I went to create the new card, and now for some reason the slider disable option will not work. Any ideas why? I know I had to move some stuff arround but got it to work, and now I can’t figure it out. Code below

Thanks.

type: thermostat
entity: climate.thermostat
name: ' '
card_mod:
  style: |
    :host {
      --state-climate-cool-color: green;
      --state-climate-heat-color: red;
    }
    .more-info {
      width: 0;
    }
    ha-state-control-climate-temperature$:
      ha-control-circular-slider$: |
        g#interaction {
          display: none !important;
        }

fighting with this…

this works:

  - type: custom:multiple-entity-row
    entity: sensor.studenten_hygro_temp_temperature
    card_mod: !include /config/dashboard/card_mods/temp_binnen_color.yaml

but how do I get that card_mod to work using the decluttering template:

card:
  type: custom:multiple-entity-row
  entity: sensor.[[id]]_hygro_temp_temperature
  hide_unavailable: true
  state_header: Temp
  name: '[[name]]'
  card_mod: '[[mod]]'
  entities:
    - entity: sensor.[[id]]_hygro_temp_humidity
      name: Vocht
    - entity: sensor.[[id]]_hygro_temp_battery
      name: Battery
  secondary_info:
    entity: sensor.[[id]]_hygro_temp_signal_strength
    name: Signal

and

  - type: custom:decluttering-card
    template: temp_humid_multiple_entity
    variables:
      - id: master_bedroom
      - name: Master Bedroom
      - mod: !include /config/dashboard/card_mods/temp_binnen_color.yaml

dont get how I should pass, or even need to, that mod from the card to the template and back again… cant we set the card_mod inside the decluttering and have it applied to all using that template?

even the example set by Ildar does not work so I suppose this is deprecated functionality…

really too bad, I would have loved to use the card

just adding to the above:

im not trying to have each listed entity use an individual mod. I need all entities to use the same mod (for temp icon color).
so, I figured to have that in the decluttering-template. it always works on all cards I have. decluttering was created to do this, prevent multiple copies of the exact same code, as Anchors do.

so the mod working on my top example should just work…on all of them… but it doesnt
wonder if we can somehow inspect the yaml all of these cards together make in the end to feed the dashboard. maybe its just not doing that correctly and we have a bug

it seems that the custom:mod-card uses a margin.
it is in a custom:layout-card which holds a grid (with mod-card) which was created from auto entities.

i hide empty auto entities but the margin of the mod card still shows.
how do i get rid of this margin?


image

my code is:

type: custom:layout-card
layout_type: grid
layout:
  grid-template-columns: 100%
  grid-template-rows: min-content 1fr
  grid-template-areas: |
    "lights"
    "vacuum"    
    "media"
    "climate"
    "switch"
    "sensor"
    "binary" 
    "fan"
    "select"
    "boolean"       
cards:
  - type: custom:mod-card
    view_layout:
      show:
        mediaquery: '(min-width: 800px)'
      grid-area: lights
    card_mod:
      style:
        hui-grid-card:
          $: |
            .card-header {
              color: #9b9b9b !important;
              margin: 0px !important;
              font-size: 1em !important;
              font-weight: 600 !important;
              padding: 0px !important;
            } 
    card:
      type: custom:auto-entities
      show_empty: false
      card:
        type: grid
        square: false
        columns: 4
        title: Lichter
      card_param: cards
      filter:
        template: >-
          {%- set entity_filter = '' %}  {%- set domains = states.light |
          selectattr('entity_id', 'in',area_entities('Wohnzimmer')) |
          map(attribute='domain')   | unique | list -%}   {%- for domain in
          domains  -%}        {% set entities = states   |
          selectattr('entity_id', 'in',area_entities('Wohnzimmer'))  |
          selectattr('domain', 'eq', domain)  | rejectattr('entity_id', 'in',
          entity_filter) | list -%}                
             {%- for entity in entities  -%}
                  {{{ 'type': 'custom:mushroom-light-card', 
                      'entity': entity.entity_id,
                      'use_light_color': 'true',
                      'show_brightness_control': 'true',
                      'show_color_control': 'true',
                      'collapsible_controls': 'true',
                      'show_color_temp_control': 'true', }}},
             {%- endfor %}{%- endfor %}                 
  - type: custom:mod-card
    view_layout:
      show:
        mediaquery: '(min-width: 800px)'
      grid-area: vacuum
    card_mod:
      style:
        hui-grid-card:
          $: |
            .card-header {
              color: #9b9b9b !important;
              margin: 0px !important;
              font-size: 1em !important;
              font-weight: 600 !important;
              padding: 0px !important;
            }  
    card:
      type: custom:auto-entities
      show_empty: false
      card:
        type: grid
        square: false
        columns: 4
        title: Media
      card_param: cards
      filter:
        template: >-
          {%- set entity_filter = '' %}  {%- set domains = states.vacuum |
          selectattr('entity_id', 'in',area_entities('Wohnzimmer')) |
          map(attribute='domain')   | unique | list -%}   {%- for domain in
          domains  -%}        {% set entities = states   |
          selectattr('entity_id', 'in',area_entities('Wohnzimmer'))  |
          selectattr('domain', 'eq', domain)  | rejectattr('entity_id', 'in',
          entity_filter) | list -%}                
             {%- for entity in entities  -%}
                  {{{ 'type': 'custom:mushroom-light-card', 
                      'entity': entity.entity_id,
                      'use_light_color': 'true',
                      'show_brightness_control': 'true',
                      'show_color_control': 'true',
                      'collapsible_controls': 'true',
                      'show_color_temp_control': 'true', }}},
             {%- endfor %}{%- endfor %}    
  - type: custom:mod-card
    view_layout:
      show:
        mediaquery: '(min-width: 800px)'
      grid-area: media
    card_mod:
      style:
        hui-grid-card:
          $: |
            .card-header {
              color: #9b9b9b !important;
              margin: 0px !important;
              font-size: 1em !important;
              font-weight: 600 !important;
              padding: 0px !important;
            }            
    card:
      type: custom:auto-entities
      show_empty: false
      card:
        type: grid
        square: false
        columns: 4
        title: Media
      card_param: cards
      filter:
        template: >-
          {%- set entity_filter = '' %}  {%- set domains = states.light |
          selectattr('entity_id', 'in',area_entities('Wohnzimmer')) |
          map(attribute='domain')   | unique | list -%}   {%- for domain in
          domains  -%}        {% set entities = states   |
          selectattr('entity_id', 'in',area_entities('Wohnzimmer'))  |
          selectattr('domain', 'eq', domain)  | rejectattr('entity_id', 'in',
          entity_filter) | list -%}                
             {%- for entity in entities  -%}
                  {{{ 'type': 'custom:mushroom-light-card', 
                      'entity': entity.entity_id,
                      'use_light_color': 'true',
                      'show_brightness_control': 'true',
                      'show_color_control': 'true',
                      'collapsible_controls': 'true',
                      'show_color_temp_control': 'true', }}},
             {%- endfor %}{%- endfor %} 

change area_entities(‘Wohnzimmer’)) to area_entities(‘your_area_room’)) if you want to try it

EDIT: just had to add

          card_mod:
            style:
              hui-grid-card:
                $: |
                  .card-header {
                    color: #9b9b9b !important;
                    margin: 0px !important;
                    font-size: 1em !important;
                    font-weight: 600 !important;
                    padding: 0px !important;
                  }        
              .: |
                :host {margin: 0px !important;}  

Hey guys, does anybody know, how to hide the attribute of my humidifier?


type: entities
entities:
  - entity: humidifier.vocolinc_vhi_1fc973_humidifier


Wondering if anyone can help… I have spent hours trying to work out why this isn’t working…

I am trying to get a mushroom-number-card to be right justified with a small width value control (see pics) and everything is working except setting mushroom-state-item$ .container.horizontal {flex: unset!important;}

1st pic shows page on load and 2nd pic shows flex attribute unchecked (set to unset gives same results) with the mushroom number card in the 2 positions…


Here is my code:

          - type: custom:mushroom-number-card
            entity: input_number.energy_hours
            layout: horizontal
            display_mode: buttons
            icon: none
            icon_type: none
            # icon_color: primary
            fill_container: false
            primary_info: name
            secondary_info: none
            name: "Hours:"
            card_mod:
              style:
                mushroom-card$: |
                  .container {
                    justify-content: right !important;
                  }
                mushroom-state-item$: |
                  .container.horizontal {
                    flex: unset!important;
                  }
                mushroom-state-info$: |
                  .container {
                    align-items: end;
                    margin: 6px -6px 0px 0px;
                    justify-content: right;
                    flex: unset !important;
                  }
                mushroom-number-value-control$: |
                  mushroom-input-number {
                    --bg-color: transparent !important;
                    # --bg-color: red !important;
                    width: 90px;
                    display: block;
                    flex: unset !important;
                  }
                .: |
                  ha-card {
                    # width: 200px;
                    background: none!important;
                    # border: none!important;
                    # box-shadow: none!important;
                    # height: 20px!important;
                    margin: -4px -4px 0px 0px!important;
                    padding: 4px 0px 0px 0px!important;
                    --control-height: 32px;
                    # align-items: justify;!important
                    align-self: end;!important
                    # flex: unset !important;
                    }

Add these lines under your ha-card { You should also be able to delete some of you other mod settings.

                  ha-card {
                    position: relative;
                    float: right;

This is probably closer to what you are trying to achieve, but @Ildar_Gabdullin may be able to offer advice on streamlining the code.

type: custom:mushroom-number-card
entity: input_number.test_level_1
layout: horizontal
display_mode: buttons
icon: none
icon_type: none
icon_color: none
fill_container: false
primary_info: name
secondary_info: none
name: "Hours:"
card_mod:
              style:
                mushroom-card$: |
                  .container {
                    justify-content: right !important;
                  }
                mushroom-state-item$: |
                  .container.horizontal {
                    flex: unset; 
                  }
                mushroom-state-info$: |
                  .container {
                    align-items: end;
                    margin: 6px -6px 0px 0px;
                    justify-content: right;
                    flex: unset !important;
                  }
                mushroom-number-value-control$: |
                  mushroom-input-number {
                    --bg-color: transparent !important;
                    --bg-color: red !important;
                    display: block;
                   }
                .: |
                  ha-card {
                    position: relative;
                    float: right;
                    width: 250px;
                    background: none !important;
                    border: none !important;
                    box-shadow: none !important;
                    height: 20px !important;
                    margin: -4px -4px 0px 0px important;
                    padding: 4px 0px 0px 0px important;
                    --control-height: 32px;
                         }

An unrelated remark:
since the whole “ha-card” part is a string (with line-breaks to look nice in a code) - you cannot comment it’s parts by using “#”.
I.e. this is wrong:

ha_card {
  #color: xxx;
  color: red;
}

Use “/* */” instead:

ha_card {
  /* color: xxx; */
  color: red;
}
1 Like

There are semi-colons in-between !important too. I was still working on the code realizing it wasn’t right. Feel free to jump in.

1 Like

Yes, we should point a user at these errors, let him/her correct them. Allowing to learn is better than giving a ready solution)

1 Like

I 100% agree. I didn’t see them at first, was answering via my phone.

"Give a man a fish, and you feed him for a day; teach a man to fish and you feed him for a lifetime.

2 Likes

No, not using mushrooms (((

1 Like

Many thanks @LiQuid_cOOled and others for your help and tutelage! Only 2nd week after finding out about HA and I can’t get enough!

Here is the solution that gives me the card I was looking for (feel free to continue pointing out optimizations… and errors!)…

            - type: custom:mushroom-number-card
              entity: input_number.energy_hours
              layout: horizontal
              display_mode: buttons
              icon: none
              icon_type: none
              # icon_color: primary
              fill_container: false
              primary_info: name
              secondary_info: none
              name: "Hours:"
              card_mod:
                style:
                  mushroom-state-info$: |
                    .container {
                      align-items: end;
                      margin: 2px 6px 0px 0px;
                    }
                  mushroom-number-value-control$: |
                    mushroom-input-number {
                      --bg-color: transparent !important;
                      # --bg-color: red !important;
                      }
                  .: |
                    ha-card {
                      position: relative;
                      float: right;
                      width: 250px;
                      background: none !important;
                      border: none !important;
                      height: 20px !important;
                      --control-height: 26px;
                      padding: 0px !important;
                      }