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

Share your Projects! Dashboards & Frontend
1126

Hi everybody,

as of now I have single custom:button-cards to change the source of my amp,
which works fine.

image
image866×555 61.3 KB

type: custom:button-card
entity: script.src_htpc
tap_action:
  action: perform-action
  perform_action: script.src_htpc
  target: {}
icon_tap_action:
  action: none
show_entity_picture: false
icon: phu:emby
layout_options:
  grid_columns: 2
  grid_rows: auto
show_state: false
show_name: false
card_mod:
  style: |
    :host {
      {% if is_state_attr('media_player.denon_avr_x2800h', 'source','HTPC') -%}
              --paper-item-icon-color: rgba(140, 20, 252,1) 
      {% else -%}
              --paper-item-icon-color: grey
      {%- endif %}
     }    
    ha-card {
      --ha-card-background: #;
      border-radius: 15px;
      box-shadow: rgba(140, 20, 252,1) 0px 1px 50px;important
    }

Reading up on all those beatiful solutions that have amassed in (Part 1), this one triggered me.
I thought it would be a nice option to cut down on the amount of buttons on the dashboard.

I tried to adapt the given code to my needs but, looks like something that only a mother could love …

image
image529×569 61.3 KB

type: custom:layout-card
layout_type: grid
layout:
  grid-template-columns: 50% 50%
  grid-template-areas: |
    "A1 A2"
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        name: ''
        entity: input_select.denon
        show_state: true
        show_entity_picture: true
        entity_picture: /local/EMBY.png
        styles:
          card:
            - font-size: 2rem
            - font-weight: bold
          icon:
            - height: 4rem
            - width: 4rem
    view_layout:
      grid-area: A1
  - type: horizontal-stack
    view_layout:
      grid-area: A1
    cards:
      - type: custom:mushroom-select-card
        entity: input_select.denon
        secondary_info: none
        icon_type: none
        fill_container: true
        card_mod:
          style:
            mushroom-select-option-control$:
              mushroom-select$: |
                .mdc-select__anchor{
                  background: none !important;
                  border-radius: 20px !important;
                }
                .mdc-line-ripple::before {
                  border-bottom-width: 0px !important;
                }
                .mdc-line-ripple::after {
                  border-bottom-width: 0px !important;
                }
                .mdc-select__selected-text {
                  color: transparent !important;
                }
                .mdc-select__dropdown-icon {
                  fill: transparent !important;  
                }
                .mdc-select {
                  position: absolute !important;
                  width: 100% !important;
                  --select-height: 97px;
                  top: 0%;
                  right: 0%;
                }
            .: |
              ha-card {
               background: none;
              }
layout_options:
  grid_columns: 4
  grid_rows: auto

But I’m scratching my head, will get bloody soon :grin:, about 3 things:

  1. Besides the overall look, I’d like to change the picture per source value, as in the original code with heat, cool…
    Just cant find where the other pictures, or better icons, are hidden in the code ?

  2. When I change the source outside of HA, i.e. Alexa or a remote, the input_select.denon doesn’t seem to acknowledge ? How to change this ?

  3. Why does it write Denon (brand of the amp) into the card ?
    I guess its the friendly_name of my input_select helper, which calls the automations.
    Is there a way to hide those names ?

Maybe someone could give me a push into the right direction, or enlight my nearly bloody head :wink: