Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

There is a blinds card (Those are Ikea blinds)

ksnip_20220726-145223

1 Like

Thank you, I didnt see that when I tried to update my cards. Is that a standard card or a custom card? I didn’t see that either on the wiki for this design system.

custom:mushroom-cover-card

That particular card is :

type: vertical-stack
cards:
  - type: custom:mushroom-cover-card
    entity: cover.left_blind
    name: Left Bedroom Blind
    show_position_control: true
    show_buttons_control: true
  - type: custom:mushroom-cover-card
    entity: cover.right_blind
    name: Right Bedroom Blind
    show_position_control: true
    show_buttons_control: true
theme: Mushroom
card_mod:
  style: |
    ha-card {
      opacity: 0.2;
      padding-left: 25px;
      padding-right: 25px;
      padding-bottom: 25px;
    }

1 Like

Thank you I will implement this.

It seems I did not, thought I just did and still no luck but there is a change. The secondary text on the left is black (I was the same than the right before) after applying the format code.

Sin título

Try setting the secondary text color like this:

Aircon Secondary Text color

type: custom:mushroom-climate-card
entity: climate.air_conditioner
card_mod:
  style: |
    ha-card {
      --secondary-text-color:  {{ 'rgb(var(--rgb-green))' if not is_state('climate.air_conditioner', 'off') else 'rgb(var(--rgb-disabled))' }};
    }
4 Likes

It works!! Thanks!!!

1 Like

So my individual light color wheel page is also complete.

it is also greyed out when turned off.

The light can be turned on and off with a simple click to the picture.

12 Likes

Am starting to think about a tablet dashboard inspired by Mushroom and Minimalist, keen to see everyones creations for tablets so far :slight_smile:

looking good!

Do you mind sharing your code?

Question/Request concerning the climate card:
Is it yet possible to change the steps of + and - to 0,5 instead of 0,1 ?

Edit: Nevermind, just had to set ‘precision: 0.5’ in the climate.yaml

Sure

type: custom:layout-card
layout_type: masonry
layout: {}
cards:
  - type: custom:stack-in-card
    cards:
      - type: vertical-stack
        cards:
          - type: picture-entity
            show_name: false
            show_state: false
            camera_view: auto
            entity: light.extended_color_light_1_2
            image: local/png2/spot3.png
            tap_action:
              action: toggle
            double_tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.browser_mode_pop_up_close
          - type: custom:mushroom-template-card
            primary: Tavan Sol
            entity: light.extended_color_light_1_2
            secondary: Salon
            picture: /local/png/colorbulb15.png
            tap_action:
              action: toggle
            card_mod:
              style: |
                :host([dark-mode]) {
                  background: rgba(var(--rgb-primary-background-color), 0.2);
                } 
                :host {
                  background: rgba(var(--rgb-primary-text-color), 0.025);
                  --mush-icon-size: 43px;
                  height: 66px;
                  margin-left: -5px !important;
                }
                ha-card {
                  padding: 1px;
                  background: rgba(var(--rgb-primary-background-color), 0.1);
                    }     
          - type: custom:light-entity-card
            shorten_cards: false
            consolidate_entities: true
            child_card: false
            hide_header: true
            header: ''
            color_wheel: true
            persist_features: true
            brightness: true
            color_temp: true
            white_value: false
            color_picker: true
            smooth_color_wheel: true
            speed: false
            intensity: false
            force_features: true
            show_slider_percent: true
            full_width_sliders: false
            brightness_icon: weather-sunny
            white_icon: file-word-box
            temperature_icon: thermometer
            speed_icon: speedometer
            intensity_icon: transit-connection-horizontal
            entity: light.extended_color_light_1_2
            effects_list: false
            card_mod:
              style: |
                ha-card {
                  padding: -15px;
                  background: rgba(var(--rgb-primary-background-color), 0.1);
                  }
    card_mod:
      style: |
        ha-card {
          background: rgba(var(--rgb-primary-background-color), 0.1);
          --paper-item-icon-active-color: #2196f3;
          --paper-item-icon-color: #6f6f6f;
        }
        :host {
          --ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);

        }

You have to install Light entity card from Hacs for the color wheel.

3 Likes

Does the lamp get always the color you select?

thank you very much! fixed doing to tabs left :slight_smile:

nope. It is just an image. But it can be done with a template I guess.

How are you greying out the picture when it’s off?

It is a picture entity card with a png on it. Picture entity card has greying option natively. When the state of the light turns into off, the picture is also turned into black and white. But using picture entity card is not your only option. You can also use card-mod to make the picture black and white during off state.

1 Like

How can i get this kind of icons?
Icon Pop Up

This is from the climate mushroom card: Cooling - Idle - Heating - Off

I want to use them on a template mushroom card… but i will love to be able to use them as any convination that i want…

Your question is very vague. You can achieve the same result by setting the badge.

Do you know how to do that with card mod?