Collapsible card with markup

Configuration Frontend
21

I am trying to figure out how it is possible to remve the little gap between the dropdown card and the cards in it. I tried it with margins, but there is a grey highlight when I click on it. Furthermore the shadow on the top of the Card is also kind of annoying. Does anybody know how I can remove the gray highlit after I clicked the button or the shadow?
image

type: custom:collapsable-cards
title_card:
  type: custom:mushroom-template-card
  primary: McFit
  secondary: '{{ states(''sensor.mcfit'') }} %'
  icon: mdi:dumbbell
  icon_color: yellow
cards:
  - type: custom:stack-in-card
    style: |
      ha-card { margin: -10px 0px 0px 0px; }
    cards:
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.mcfit
            name: McFit
            color: yellow
            unit: '%'
        smoothing: true
        hours_to_show: 12
        line_width: 3
        font_size: 50
        animate: false
        lower_bound: 0
        upper_bound: 100
        points_per_hour: 2
        show:
          name: true
          icon: false
          state: true
          legend: false
          fill: fade
buttonStyle: 'background-color: var(--card-background-color);'
style:
  button {padding:0;0;0;0}
22

I am a first time Yaml code user so bear with me if I am making obvious mistakes.

What I am trying to achieve is have a top card with the mushroom light card for all lights downstairs (beneden) and if you expand the card you get to control all individual lights.
I did get it working that the lights in the dropdown menu work as expected but the “top” card stays really small and unusable, here is an example of what the expandable version looks like vs a normal Mushroom light card:

image

Basicly I have 2 questions:

  1. How do I get the title card to be a full custom mushroom light card?
  2. if I click on the mushroom controls the card is immediatly expanded, but I only want it to expand if I click on the arrow to the right. Is this possible?

I have Card Mod installed,
this is my code so far:

type: custom:collapsable-cards
title_card:
  type: custom:mushroom-light-card
  entity: light.beneden
  fill_container: true
  use_light_color: true
  show_brightness_control: true
  show_color_temp_control: true
  show_color_control: true
  collapsible_controls: true
  icon: mdi:sofa
cards:
  - type: custom:mushroom-light-card
    entity: light.glass_orb
    fill_container: false
    use_light_color: true
    show_brightness_control: true
    show_color_temp_control: true
    show_color_control: true
    collapsible_controls: true
    icon: mdi:sofa
  - type: custom:mushroom-light-card
    entity: light.hoeklamp_boven
    fill_container: false
    use_light_color: true
    show_brightness_control: true
    show_color_temp_control: true
    show_color_control: true
    collapsible_controls: true
    icon: mdi:sofa
  - type: custom:mushroom-light-card
    entity: light.hoeklamp_onder
    fill_container: false
    use_light_color: true
    show_brightness_control: true
    show_color_temp_control: true
    show_color_control: true
    collapsible_controls: true
    icon: mdi:sofa
  - type: custom:mushroom-light-card
    entity: light.ikea_houten_lamp
    fill_container: false
    use_light_color: true
    show_brightness_control: true
    show_color_temp_control: true
    show_color_control: true
    collapsible_controls: true
    icon: mdi:sofa
style: button {padding:0;} hui-markdown-card {width:100%}

Would really appreciate the help :slight_smile:

23

Old but this is the style that applies it.

		  .toggle-button-${this.id}:focus {
			outline: none;
			background-color: var(--divider-color);
		  }

So overwriting the var(–divider-color) or the style itself.

24

So I’m going to post what took me a few hours to trap down just to help others. This is a comprehensive collapsable-cards card_mod layout. I’m putting this in my template so I can reuse it in 10 different sections with ease but the gist is as follows. the Collapse Template card_mod is to turn off the focus highlighting when you toggle the expander. You could alternatively simply change those colors to whatever you want if you like highlighting or just want the background to be a certain color.

The card_mod on the mushroom card is more complicated because of the way the toggleButton for the expander is styled. You can access those styles with the buttonStyles on the collapsable but I was already working in card_mod so I did not. The padding underneath the font-size is to keep the card from cutting off the text when I made it bigger. the ha-card section is to make it look seamless with the toggleButton and animate it if you choose. NOTE: If you don’t have an entity assigned to mushroom-template-card you have to remove the if line. It’ll throw an error and stop all styling.

Finally the :host section is what makes sure whatever card you use (and this will work on any card you use in the title-card area will fill the width. Without this, title-cards look wonky in my opinion.

  card_mod:
    style: |
      :host {
        width: 90%;
      }
      button {
        padding: 0;
      }
    elements:
      - hui-markdown-card