Mushroom Cards Card Mod Styling/Config Guide

[Faecon (Jo)]

                      - type: custom:mushroom-update-card
                        entity: update.home_assistant_operating_system_update
                        show_buttons_control: true
                        icon: mdi:home-assistant
                        icon_color: |-
                          {% if is_state('update.home_assistant_supervisor_update', 'on') %}
                            red
                          {% else %}
                            {{ states("input_text.kleur_iconen")}}
                          {% endif %}

the icon (background)color when updated is ok, also when update needed it is ok. But when it is in “updating” it is blue, and that does not match my theme

[LiQuid_cOOled]

@Faecon

update.home_assistant

Probably need to add a line for {{ state_attr('update.home_assistant_operating_system_update', 'in_progress')== 'true' }} to the icon_color: template.

[Adrian281701]

Hi
Very new to Home Assistant but learning quickly. I a familar with CSS so some of the styling that can be applied in this set of cards is familar.

I am trying to combine two sets of very simple styling to a Mushroom Cover Card, I want to change the background colour, and the colour of the slider I have followed the code in this great guide, and the card background styles as expected, but the slider does not, what am I missing, I as ure it will be something very simple. My code is:

entity: cover.office
fill_container: true
show_buttons_control: false
show_position_control: true
name: Blinds
layout: horizontal
icon_type: icon
card_mod:
  style: |
    mushroom-cover-position-control$:
      mushroom-slider {
          --main-color: teal !important;
          --bg-color: #d1eced !important;
        }
    ha-card 
    {
      background-color: #470468;
    }

This is what is produced, no matter what I try the slider does not change colour.

Thanks in advance, as I say I am still learning.

Ad.

[Frosty]

I don’t have a cover to test it. but this should work

entity: cover.office
fill_container: true
show_buttons_control: false
show_position_control: true
name: Blinds
layout: horizontal
icon_type: icon
card_mod:
  style: 
    mushroom-cover-position-control$: |
      mushroom-slider {
          --main-color: teal !important;
          --bg-color: #d1eced !important;
        }
    .: |
      ha-card {
        background-color: #470468;
      }
    

[Faecon (Jo)]

this is my code

  - type: custom:mushroom-template-card
    primary: Melding krijgen wanneer er vuilbakken zijn
    icon: >
      {% if is_state("input_boolean.vuilbakken", 'on') %}
      mdi:toggle-switch
      {% else %}
      mdi:toggle-switch-off 
      {% endif %}
    entity: input_boolean.vuilbakken 
    tap_action:
      action: toggle
    fill_container: true
    layout: horizontal
    multiline_secondary: false
    card_mod:
          style:
            mushroom-state-info$: |
              .container {
                margin: -10px;
                }  
              .primary {
                padding: 15px 0px 55px 10px;
                          }
            mushroom-shape-icon$: |
              .shape {
              margin-top: -40px;
              }
            .: |
              ha-state-icon {
                {% if is_state('input_boolean.vuilbakken','on') %}
                animation:  blink 1s infinite, illumination 1s infinite ;{%- endif %}
                }
                @keyframes blink {
                  50% {opacity: 0;}
                      }   
                @keyframes illumination {
                    0%, 100% { clip-path: inset(0 0 0 0); }
                    95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
                          }
              ha-card {
                height: 108px !important;
                  {% if is_state('input_boolean.vuilbakken','on') %}
                  background-color: rgb({{ states("input_text.kleur_iconen")}})
                  {%- else -%}
                  {%- endif %}
                        }

why is there so muche “empty” space below the text ?

[LiQuid_cOOled]

You added it here

type: custom:mushroom-template-card
primary: Melding krijgen wanneer er vuilbakken zijn
icon: >
  {% if is_state("input_boolean.vuilbakken", 'on') %} mdi:toggle-switch {% else
  %} mdi:toggle-switch-off  {% endif %}
entity: input_boolean.vuilbakken
tap_action:
  action: toggle
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
  style: |
      ha-state-icon {
        {% if is_state('input_boolean.vuilbakken','on') %}
        animation:  blink 1s infinite, illumination 1s infinite ;{%- endif %}
        }
        @keyframes blink {
          50% {opacity: 0;}
              }   
        @keyframes illumination {
            0%, 100% { clip-path: inset(0 0 0 0); }
            95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
                  }
      ha-card {
                 {% if is_state('input_boolean.vuilbakken','on') %}
          background-color: rgb({{ states("input_text.kleur_iconen")}})
          {%- else -%}
          {%- endif %}
                }

[Faecon (Jo)]

@LiQuid_cOOled

{{ state_attr('update.home_assistant_operating_system_update', 'in_progress')== 'true' }}

like this ?

                              {% if state_attr("update.home_assistant_operating_system_update",'in_progress') == 'true' %}
                               {{ states("input_text.kleur_iconen")}}
                              {% endif %}

[Adrian281701]

Hi @Frosty
Thanks for the assist, worked perfecty. I had seen the | and .: | characters used but I was not sure what their purpose was and how to use them, could you explain? then I can learn for the future.
Ad.

[Frosty]

no problem glad it worked for you.
if you goto post 1 by @dimitri.landerloos and scroll to the bottom you’ll see

What the $ and .: | symbols do

that should explain. I cant use developer tools in a browser myself so it goes abit over my head. I do have a rough idea of how there used if you need further help there’s always someone willing to help.

[Dan010 (Dan)]

Dimitri,

Aligning text in a chip seems to work with text-align: <start|center|end> under ha-card:

ha-card {
    background-color: 
      {% if states(config.entity) == 'on' %}
        rgba(var(--rgb-green),0.2) !important;
      {% else %}
        rgba(var(--rgb-grey),0.2) !important;
      {% endif %}
    box-shadow: none !important;
    margin-left: 5px;
    margin-top: -60px;
    padding: 5px;
    text-align: end;
    width: 100px !important;
    --chip-icon-size: 30px;
    --chip-font-weight: none;
    --chip-font-size: 12px !important;
  }

[LiQuid_cOOled]

@Dan010 Can you provide a chip card example with this working?

Below is an example of what you are describing, but the text does not adjust to the end.

You can adjust the chip text alignment via this method

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: light.pc_lights
    content_info: name
    name: CENTER
card_mod:
  style:
    mushroom-entity-chip:nth-child(1)$: |
      span {
      width: 100px !important;
      color: red !important;
      text-align: center !important;
          }

[LioBoul (Lionel Boulanger)]

Hi ! I’ve the same problem than Abhi for the mushroom-person and the “photos-icon” size.
Have you got the solution plz ?

[LiQuid_cOOled]

Just a heads up, It’s recommended to limit tagging folks. See #16

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with eve…

Dimitri may reach out and I’ll take a look as well.

Can you post your card code?

[Dan010 (Dan)]

I added text-align on the level of the custom:mushroom-chips-card

And below the definition:

type: vertical-stack
cards:
  - type: thermostat
    entity: climate.incomfort_1
    show_current_as_primary: true
    name: ' Thermostaat Woonkamer'
    theme: Mushroom
  - type: custom:mushroom-chips-card
    card_mod:
      style: |
        ha-card {
          margin-top: -350px !important;
          text-align: end;
          box-shadow: none !important;
          --chip-icon-size: 30px;
          --chip-font-weight: none;
          --chip-font-size: 12px !important;
          
        }
    alignment: justify
    chips:
      - type: template
        icon_color: |
          {% if states(entity) == 'on' %}
            green
          {% else %}
            grey
          {% endif %}
        entity: input_boolean.eco_temperatuur
        content: Eco 15°C
        icon: mdi:leaf
        card_mod:
          style: |
            ha-card {
              background-color: 
                {% if states(config.entity) == 'on' %}
                  rgba(var(--rgb-green),0.2) !important;
                {% else %}
                  rgba(var(--rgb-grey),0.2) !important;
                {% endif %}
              margin-left: 5px;
              padding: 5px;
              width: 100px !important;
            }
      - type: template
        icon_color: |
          {% if states(entity) == 'on' %}
            orange
          {% else %}
            grey
          {% endif %}
        entity: input_boolean.comfort_temperatuur
        content: Comfort 18°C
        icon: mdi:thermometer-check
        card_mod:
          style: |
            ha-card {
              background-color:
                {% if states(config.entity) == 'on' %}
                  rgba(var(--rgb-orange),0.2) !important;
                {% else %}
                  rgba(var(--rgb-grey),0.2) !important;
                {% endif %}
              margin-right: 5px;
              padding: 5px;
              width: 100px !important;
            }

[Dan010 (Dan)]

Apologies, didn’t mean to offend anyone. Still relatively new to HA and this was my first forum post.

[LiQuid_cOOled]

@Dan010

input_boolean.eco_temperatuur

No not at all, it’s another approach. I just can’t get it to work with certain scenarios. I appreciate the example!

The break in the content: initiates a second line when the width of the span is taken up and the card width is limited to 100px. If the content: is consecutive it will not adjust based off text-align: end

content: Eco15°C

content: Eco 15°C

[Thomas-Webster]

Hello,

how to move the remaining time section to the left?
Or the
move the time bar and remaining time section to the left?

type: custom:stack-in-card
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-fan-card
        entity: fan.paraelszivo_zuhanyzo_switch_0
        name: Páraelszívó
        icon_animation: true
        fill_container: false
        collapsible_controls: true
        tap_action:
          action: toggle
        layout: horizontal
        primary_info: null
        secondary_info: none
        card_mod:
          style: |
            ha-card {
              border: none;
            }
            ha-state-icon {
              color: dodgerblue;
              --icon-symbol-size: 40px;
            }
      - type: custom:timer-bar-card
        entity: fan.paraelszivo_zuhanyzo_switch_0
        layout: full_row
        duration:
          fixed: '00:15:00'
        text_width: 60px
        invert: true
        bar_direction: rtl
        bar_width: 60%
        tap_action:
          action: toggle

[Frosty]

@Thomas-Webster

how to move the remaining time section to the left?
Or the
move the time bar and remaining time section to the left?

do you mean… move the bar and time, left so it’s closer to the fan card
or move the time on the bar to the left side of the bar (flip it’s direction)

[Adrian281701]

Thanks @Frosty, will do, and thanks again for the first bit

Ad.

[Thomas-Webster]

@Frosty

do you mean… move the bar and time, left so it’s closer to the fan card
or move the time on the bar to the left side of the bar (flip it’s direction)

Move the bar and time to the left a few px. Don’t be on edge.