Mushroom Cards Card Mod Styling/Config Guide

[alp-by (alp)]

@LiQuid_cOOled

Please post your code.

Here is the code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Room1
    card_mod:
      style: |
        ha-card {
           --title-font-size: 1.2rem;
           --primary-text-color: gray;
           --title-spacing: 0rem;
           --title-padding: 0.5rem;
        } 
  - type: custom:stack-in-card
    mode: vertical
    cards:
      - type: custom:mushroom-number-card
        entity: input_number.heating_u1_ch1_temperature
        display_mode: buttons
        layout: horizontal
        card_mod:
          style: |
            ha-card {
              border-width: 0px;    
              --control-width: 130px;
            }   
            mushroom-state-info {
               
               text-align: start;
               width: fit-content;
            }   

    card_mod:
      style: |
        ha-card {
          border-width: 1px;        
          border-radius: 10px;
          box-shadow: none;
          height: 68px;
          }
          
         
card_mod:
  style: |
    ha-card {
      padding: 10px;
      border-width: 1px; 
      background: rgba(var(--rgb-primary-text-color), 0.01);
    }

[Mariusthvdb (Marius)]

now where is that Tile guide, I cant find it and I have a very pressing question

suppose its safe to post here too, because Mushroom also uses more-info like anything in HA, especially this Tile.

it was not, sorry, moved over here

[LiQuid_cOOled]

Your code doesn’t really match your pic, but this example may help you…

yours…

after edits…

type: custom:stack-in-card
cards:
  - type: custom:mushroom-title-card
    title: Room1
    card_mod:
      style: |
        ha-card {
           --title-font-size: 1.2rem;
           --primary-text-color: gray;
           --title-spacing: 0rem;
           --title-padding: 0.5rem;
        } 
  - type: custom:stack-in-card
    mode: vertical
    cards:
      - type: custom:mushroom-number-card
        entity: input_number.test_level_1
        display_mode: buttons
        layout: horizontal
        card_mod:
         style:
           mushroom-state-info$: |
            .container {
            flex-direction: row !important;
            align-items: baseline;
              }
            .primary {
            position: relative;
            flex-shrink:2;
            flex-grow: 2;
            white-space: normal !important;
                     }
    card_mod:
      style: |
        ha-card {
          border-width: 1px;        
          border-radius: 10px;
          box-shadow: none;
          height: 68px;
          }
          
         
card_mod:
  style: |
    ha-card {
      padding: 10px;
      border-width: 1px; 
      background: rgba(var(--rgb-primary-text-color), 0.01);
    }

[LiQuid_cOOled]

I’d review this guide and post here if you need assistance. Best to keep this thread Mushroom related.

[Mariusthvdb (Marius)]

yep, I do believe I crossed a line rereading it now… sorry.
do you have the link for the Tile guide (I truly cant find it), so I can move it there.

[LiQuid_cOOled]

Card-mod for Tile card: icon & tile color

@boheme61 In the morning I think you are right. May be I should have been more patient and explain with details in the very beginning. Please accept my apologize if I was rude. For the record: Tile card has nice default features: – icon’s color depends on a domain & state; – card’s background gets the same color (with transparency) on hover. So there are possible ways to style this behaviour. Disclaimer: I am not an expert on the Tile card, so more possible ways of styling could be pos…

[Mariusthvdb (Marius)]

hmm, thats not what I ws trying to reach, aware of that one (I was there…).

No, I meant the one from Dimitri, didnt he write that?

[LiQuid_cOOled]

This?

Card-mod - Add css styles to any lovelace card

Hi its been a little bit, but since i am working on a guide for styling the tile card with card mod i figured i would give you a response. it is unfortunately not possible to change the icons for most of the tile cards (any that have a feature) as they all use svg icons. card mod cant change these as far as i know @Ildar_Gabdullin may be able to confirm, or provide some insight on this. i have certainly been unable to do this. you can however change the colors of the states like this (of cour…

[dimitri.landerloos]

I havent had time to finish it just yet. Ive been very busy at work recently. Hence why ive also been a bit absent with replying to people.

[LiQuid_cOOled]

@dimitri.landerloos may have more info. I use his Mushroom guide and for the most part Mushroom is based off the tile card, but I’m sure you know that based off your profile #s and time here…

Mushroom Cards Card Mod Styling/Config Guide

This topic is technically a cross post from a reply to the Mushroom Card Topic found here: Part 1. But it was suggested in a comment to post it here as a guide instead. Below info is true as of Mushroom Version 3.2.2 and Card Mod Version 3.4.1 (you can also optionally use a theme like i do. i use Minimalist Version 1.3.7). links to each post: Alarm Control Panel Card Chips Card Climate Card Cover Card Entity Card Fan Card Humidifier Card Number Card Lock Card Light Card Media Card …

[Mngsps]

@dimitri.landerloos

card_mod:
  style:
    mushroom-state-info$: |
      .container {
        --primary-text-color: blue;
        --secondary-text-color: orange;
      }

Textcolor in the template crad stopped working for me since a few weeks. Was white and turned into black. Any idea?

My code:

      - type: custom:mushroom-template-card
        primary: >-
          {% set monat = ["Januar", "Februar", "März", "April", "Mai", "Juni",
          "Juli", "August", "September", "Oktober", "November", "Dezember"] %}

          {% set monat =
          monat[as_timestamp(states('sensor.google_photos_familie_creation_timestamp'))|
          timestamp_custom('%m')| int -1] %}

          {{ monat ~ ' ' ~
          as_timestamp(states('sensor.google_photos_familie_creation_timestamp'))|
          timestamp_custom('%Y') }}
        card_mod:
          style:
            mushroom-state-info$: |
              .container {
                --primary-text-color: white;
                text-shadow: 1px 1px 3px black
              }
            .: |
              ha-card {
                --card-primary-font-size: 16px;
                --card-primary-font-weight: normal;
                background: none;
                border: none;
              }

This was working but changed…

Thanky you, a lot, for helping!

[dimitri.landerloos]

take a look here:

Mushroom Cards Card Mod Styling/Config Guide

yes. --primary-text-color and --secondary-text-color have changed in version 3.4.1 to --card-primary-color and --card-secondary-color. this is to keep mushroom in line with the standard tile cards. i havent updated this guide to 3.4.1 just yet as i have seen a few more open bugs still that i am waiting a bit to see if they will get squashed. but it will be updated to reflect this change soon

Ive been quite busy so havent had to the time to make the updates yet.

[Mngsps]

Thank you!!

[Mariusthvdb (Marius)]

updated it, as with my current install of HA 2023.4 dev, these stopped working. Maybe even before, but I hadn’t noticed

check Style Tile: more-info - #3 by Mariusthvdb

Tile Fan nicely colored and animated according to speed and state

[joaopequeno (João)]

Hello all,

I’m using the

type: custom:mushroom-chips-card

On a card in the dashboard i use this code to change the icon based on severall entities states.:

        variables:
          t2: switch.portao_garagem_portao_fechado
          t3: switch.portao_garagem_portao_aberto
        icon: |
          [[[
            var t2 = states[variables.t2].state;
            var t3 = states[variables.t3].state;
            if (t2 == 'on' && t3 == 'off') return 'mdi:garage-variant-lock';
            if (t2 == 'off' && t3 == 'on') return 'mdi:garage-open-variant';
            if (t2 == 'off' && t3 == 'off') return 'mdi:garage-alert-variant';
            return 'mdi:help';
          ]]]
        styles:
          icon:
            - color: |
                [[[
                  var t2 = states[variables.t2].state;
                  var t3 = states[variables.t3].state;
                  if (t2 == 'on' && t3 == 'off') return 'rgb(50, 205, 50)';
                  return 'rgb(205, 50, 50)';
                ]]]
            - animation: |
                [[[
                  var t2 = states[variables.t2].state;
                  var t3 = states[variables.t3].state;
                  if (t2 == 'off' && t3 == 'off') return 'blink 1s ease infinite'
                  return 'none';
                ]]]

How can i do it on the type: custom:mushroom-chips-card, and for cover entities for value above 2?

Basically i whant that the icon is shutter closed if all shutter at home are closed, or shutter open if any of the shutter are open.

Thanks

[LiQuid_cOOled]

You can do something like this with your entities of course

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:mushroom
    primary: Fan
    icon_color: |
      {% set k =  states('sensor.basement_door_battery')| int (0) %}
      {% set d = states('switch.server_fan') %} 
      {% if (k >= 20 and d == 'off') %}
       red
      {% elif (d  == 'off')  %} yellow
      {% else %}
       grey 
      {% endif %}

[joaopequeno (João)]

Hello @LiQuid_cOOled,

I’m doing like this, but i thing i got the variables wrong or some wrong sintax.
Basically i have 8 shutter’s and if all of them are closed the icon is one, if any of them is open the icon will be shutter open.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:window-shutter
    triggers_update:
      - cover.persiana_cozinha
      - cover.persiana_escritorio
      - cover.persiana_quarto_camila
      - cover.persiana_quarto_j_s
      - cover.persiana_quarto_matilde
      - cover.persiana_quarto_sonia
      - cover.persiana_sala_eside
      - cover.persiana_sala_lside
    variables:
      t1: cover.persiana_escritorio
      t2: cover.persiana_cozinha
      t3: cover.persiana_quarto_camila
      t4: cover.persiana_quarto_j_s
      t5: cover.persiana_quarto_matilde
      t6: cover.persiana_quarto_sonia
      t7: cover.persiana_sala_eside
      t8: cover.persiana_sala_lside
    content: Persianas
    card_mod:
      style: |
        ha-card {
         --chip-background: rgb(0, 0, 0) !important;
         --chip-height: 80px !important;
         }
      icon: |
        [[[
          var t1 = states[variables.t1].state;
          var t2 = states[variables.t2].state;
          var t3 = states[variables.t3].state;
          var t4 = states[variables.t4].state;
          var t5 = states[variables.t5].state;
          var t6 = states[variables.t6].state;
          var t7 = states[variables.t7].state;
          var t8 = states[variables.t8].state;
          if (t1 >= 1 OR t2 >= 1 OR t3 >= 1 OR t4 >= 1 OR t5 >= 1 OR t6 >= 1 OR t7 >= 1 OR t8 >= 1) return 'mdi:window-shutter-open';
          if (t1 = 0 && t2 = 0 && t3 = 0 && t4 = 0 && t5 = 0 && t6 = 0 && t7 = 0 && t8 = 0) return 'mdi:window-shutter';
          return 'mdi:help';
        ]]]

What i’m doing wrong?

Thanks

[LiQuid_cOOled]

Are you using Mushroom or Button-card with this code? Based on your icon code it looks like Button Card.

[joaopequeno (João)]

I use a similar code in a button card, and was trying to use a similar on a muchroom.
Its diferente how to apply?

[LiQuid_cOOled]

Unfortunately it’s 100% different between the two, but you can achieve the same results in Mushroom with a little more code.