I there,
I have a dashboard with 3 lines and 3 columns which looks like this :
It is defined with a grid-layout like this :
views:
- title: Home
type: custom:grid-layout
layout:
grid-template-rows: 75px 650px 75px
grid-template-columns: 420px 500px 420px
grid-template-areas: |
"head1 head2 head3"
"col1 col2 col3"
"foot1 foot1 foot1"`Preformatted text`
As you can see, columns have width of 420px, 500 px and 420px
At the bottom of the first column, I would like to make the picture smaller and the text on the right bigger, like 1/5 - 4/5 … the picture is just supposed to be an icon.
How Can I do that ?
- Change my grid layout (I find it a lot just to adapt a picture size …) ?
- Use a card_mod styling for the picture card (I could not find any example working …
- Any other idea ?
My code for this section :
- type: vertical-stack
cards:
- type: custom:mushroom-climate-card
card_mod:
style: |
ha-card {
background: transparent;
border: 0px;
}
entity: climate.chbre_alessio
name: Chbre Alessio
show_temperature_control: true
layout: horizontal
fill_container: false
- type: custom:mushroom-climate-card
card_mod:
style: |
ha-card {
background: transparent;
border: 0px;
}
entity: climate.chbre_flavia
name: Chambre Flavia
fill_container: false
show_temperature_control: true
layout: horizontal
- type: custom:mushroom-climate-card
card_mod:
style: |
ha-card {
background: transparent;
border: 0px;
}
entity: climate.chbre_ines
name: Chambre Inès
fill_container: false
show_temperature_control: true
layout: horizontal
- type: custom:mushroom-climate-card
card_mod:
style: |
ha-card {
background: transparent;
border: 0px;
}
entity: climate.chbre_parents
name: Chambre Parents
fill_container: false
show_temperature_control: true
layout: horizontal
collapsible_controls: false
hvac_modes: []
- type: custom:mushroom-climate-card
entity: climate.chambre_2eme
name: Airco Chambre 2ème
fill_container: false
show_temperature_control: true
icon: mdi:air-conditioner
layout: horizontal
hvac_modes:
- heat
- cool
- dry
collapsible_controls: true
card_mod:
style: |
ha-card {
background: transparent;
border: 0px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: |-
{% if states('counter.nombre_d_appels_manques') | int > 0 %}
{{ states("counter.nombre_d_appels_manques") }} appels manqués
{% else %}
Pas d'appels manqués
{% endif %}
secondary: ''
icon: mdi:phone-missed
entity: counter.nombre_d_appels_manques
icon_color: yellow
badge_icon: ''
tap_action:
action: call-service
service: counter.set_value
target:
entity_id:
- counter.nombre_d_appels_manques
data:
value: 0
fill_container: true
card_mod:
style: |
ha-card {
background: white;
border-radius: 15px;
}
- type: custom:multiple-logbook-card
entities:
- entity: input_text.dernier_appelant_fritzbox
hours_to_show: 12
card_mod:
style: |
ha-card {
background: white;
border-radius: 15px;
}
card_mod:
style: |
ha-card {
background: blue;
border-radius-border: 15px;
}
title: Appels manqués
- type: horizontal-stack
cards:
- show_state: false
show_name: true
camera_view: live
type: picture-entity
entity: camera.192_168_1_110
aspect_ratio: '1.2'
- type: custom:mushroom-template-card
secondary: '{{ states("input_text.generative_ai_doorbel") }}'
icon: ''
entity: input_text.generative_ai_doorbel
fill_container: true
multiline_secondary: true
tap_action:
action: navigate
navigation_path: /smartphone-cameras/0
card_mod:
style: |
ha-card {
background: white;
border-radius: 15px;
}
icon_color: ''
primary: ''
title: Portier
card_mod:
style: |
ha-card {
background: blue;
border-radius-border: 15px;
}
view_layout:
grid-area: col1
Any suggestion is welcome, many Thanks in advance !