Transparant background behind GIF file

Configuration Frontend
1

i was wondering if i can get the left card have a transparent background

The left card is a gif file but i would like to have a bg transparant aswell:

image
The right card (the title =)

type: custom:mushroom-title-card
title: ⠀Hello, {{ user }}
alignment: start

Full Code:

square: false
type: grid
cards:
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: ''
    picture: /local/icons_docker/iiidefconiii.gif
    fill_container: false
    multiline_secondary: false
    layout: horizontal
    tap_action:
      action: url
      url_path: http://10.3.10.10:3123/
  - type: custom:mushroom-title-card
    title: ⠀Hello, {{ user }}
    alignment: start
columns: 2
2

If you have card-mod installed it’s pretty easy.

square: false
type: grid
cards:
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: ''
    picture: /local/icons_docker/iiidefconiii.gif
    fill_container: false
    multiline_secondary: false
    layout: horizontal
    tap_action:
      action: url
      url_path: http://10.3.10.10:3123/
    card_mod:
     style: |
      ha-card {
       background: none !important;  
       border: none !important;
          }
  - type: custom:mushroom-title-card
    title: ⠀Hello, {{ user }}
    alignment: start
columns: 2

image
image832×178 7.61 KB

1 Like
6

Thank you so much!, really appriciate it! can the middle center text be set just a bit higher because its triggering my OCD xD

7

Hi @LiQuid_cOOled , can i recall on you skills another time?

I tried to mimic the code into the following section but this doesnt give me a transparant bg.

square: false
type: grid
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.corner_light
        show_color_control: true
        show_color_temp_control: false
        use_light_color: true
        show_brightness_control: false
        collapsible_controls: true
        fill_container: false
        name: Corner Left
        icon: mdi:desk-lamp-on
      - shorten_cards: true
        consolidate_entities: false
        child_card: false
        hide_header: true
        show_header_icon: true
        header: ''
        color_wheel: true
        persist_features: false
        brightness: true
        color_temp: true
        white_value: true
        color_picker: false
        speed: true
        intensity: true
        force_features: false
        show_slider_percent: true
        full_width_sliders: true
        brightness_icon: weather-sunny
        white_icon: file-word-box
        temperature_icon: thermometer
        speed_icon: speedometer
        intensity_icon: transit-connection-horizontal
        type: custom:light-entity-card
        entity: light.corner_light
        effects_list: true
        icon: none
    card_mod:
      style: |
        ha-card {
         background: none !important;  
         border: none !important;
            }
columns: 1

image
image1003×1249 49.7 KB

Can you give me another example i think if i have this working i can really pmp my dashboard

8

Like this?

square: false
type: grid
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.corner_light
        show_color_control: true
        show_color_temp_control: false
        use_light_color: true
        show_brightness_control: false
        collapsible_controls: true
        fill_container: false
        name: Corner Left
        icon: mdi:desk-lamp-on
        card_mod:
          style: |
           ha-card {
           background: none !important;  
           border: none !important;
            }
      - shorten_cards: true
        consolidate_entities: false
        child_card: false
        hide_header: true
        show_header_icon: true
        header: ''
        color_wheel: true
        persist_features: false
        brightness: true
        color_temp: true
        white_value: true
        color_picker: false
        speed: true
        intensity: true
        force_features: false
        show_slider_percent: true
        full_width_sliders: true
        brightness_icon: weather-sunny
        white_icon: file-word-box
        temperature_icon: thermometer
        speed_icon: speedometer
        intensity_icon: transit-connection-horizontal
        type: custom:light-entity-card
        entity: light.corner_light
        effects_list: true
        icon: none
        card_mod:
          style: |
           ha-card {
           background: none !important;  
           border: none !important;
            }
columns: 1

image
image916×590 21.1 KB

1 Like
9

This should help with the text. Let me know…

square: false
type: grid
cards:
  - type: custom:mushroom-template-card
    primary: ''
    secondary: ''
    icon: ''
    picture: /local/avatars/IIIdefconIII_V_speed_09_400px.gif
    fill_container: false
    multiline_secondary: false
    layout: horizontal
    tap_action:
      action: url
      url_path: http://10.3.10.10:3123/
    card_mod:
      style: |
        ha-card {
         background: none !important;  
         border: none !important;
            }
  - type: custom:mushroom-title-card
    title: ⠀Hello, {{ user }}
    alignment: start
    card_mod:
     style: |
       ha-card {
         padding-top: 0px !important;
             }
  - type: custom:mushroom-title-card
    title: ︻デ═一 ⠀ ⠀
    alignment: start
    card_mod:
      style: |
        ha-card {
         background: none !important;  
         border: none !important;
         
            }
columns: 3
10

I hate i was in a coma and my brain doesnt function 100% anymore, but wow i was checking the post again till that one message that actually perfect, thanks you so much, i have some thing to do incoming week

image

11

@LiQuid_cOOled
Thank you much, this is the first one, according to your provided yaml code i i think im able to do all then, after ill probable gonne ask how to change the speaker picutre wih the enagled color, i guess i need to make a few more picture with the light on and do some coding about states like if hue speaker light is red, change lovelace picture entity to speaker_red_v1.png or something: SPOILER Alert xD
And like i said before, i really wanne give u some coffees.

image
image1920×783 86.3 KB

12

image
image1920×742 84.1 KB

Think im gonne make it!

1 Like
13

image
image1920×776 83.9 KB

need to grab some sleep do xD

14

@LiQuid_cOOled
Finally understand the trick

image
image1920×769 82 KB

1 Like
15

image
image2080×1329 284 KB

Hope this message receover the one that can asjust this and make it possible to also have the extender card rowking with card mod

Perhaps:

@Alia5
is willing to dive into this

I tried the

card_mod:
  style: |
    ha-card {
     background: none !important;  
     border: none !important;
     }

on both card types

EDIT: Done my whole home assistant al pages, everyhting done but the extended card doesnt accept the card mod values

16

hi @Alia5 Are u on a active duty xD might wanne take a look trough this post above?

17

once more before i close this ticket i wanne thanks you! donty wanne be that guy that comes in join leave a message and leaving without sayin thank you one more time! my dashboard really look freeking nice now i have applied it to almost every card!

1 Like