Is there a way to get the smaller cards under each other?
I can’t help unless you share the code you used to get the half height cards
Sorry, my bad.
I just created a template with another aspec_ratio
button_card_templates.yaml
waschmaschine:
aspect_ratio: 2/1
ui-lovelace.yaml
- type: custom:button-card
entity: input_select.waschmaschinenstatus
name: Waschmaschine
show_state: true
state:
- value: "Läuft"
styles:
card: [background-color: "rgba(255, 255, 255, 0.8)"]
name: [color: "rgba(0, 0, 0, 0.6)"]
state: [color: "rgba(0, 0, 0, 0.6)"]
- value: "Finishing"
styles:
card: [background-color: "rgba(229, 154, 24, 0.8)"]
name: [color: "rgba(0, 0, 0, 0.6)"]
state: [color: "rgba(0, 0, 0, 0.6)"]
- value: "Fertig"
styles:
card: [background-color: "rgba(0, 136, 0, 0.7)"]
name: [color: "rgba(0, 0, 0, 0.6)"]
state: [color: "rgba(0, 0, 0, 0.6)"]
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.waschmaschinenstatus
option: Idle
hold_action:
action: none
custom_fields:
icon: >
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 424.166 424.166" style="enable-background:new 0 0 424.166 424.166;" xml:space="preserve">
<g>
<path d="M360.083,0h-296c-17.645,0-32,14.355-32,32v384.166c0,4.418,3.582,8,8,8h344c4.418,0,8-3.582,8-8V32 C392.083,14.355,377.728,0,360.083,0z M48.083,408.166V80H320.25c4.418,0,8-3.582,8-8s-3.582-8-8-8H48.083V32 c0-8.822,7.178-16,16-16h296c8.822,0,16,7.178,16,16v32h-23.75c-4.418,0-8,3.582-8,8s3.582,8,8,8h23.75v328.166H48.083z"/>
<path d="M212.083,112.005c-72.966,0-132.329,59.362-132.329,132.328s59.362,132.328,132.329,132.328 c72.966,0,132.328-59.362,132.328-132.328S285.049,112.005,212.083,112.005z M212.083,360.661 c-64.144,0-116.329-52.185-116.329-116.328s52.185-116.328,116.329-116.328c48.707,0,90.511,30.094,107.815,72.661h-7.315 c-3.419,0-6.712,0.545-9.803,1.542c-16.255-34.945-51.646-57.87-90.697-57.87c-55.138,0-99.995,44.857-99.995,99.995 s44.857,99.995,99.995,99.995c39.052,0,74.442-22.925,90.697-57.87c3.091,0.997,6.384,1.542,9.803,1.542h7.315 C302.594,330.567,260.79,360.661,212.083,360.661z M303.671,269.28c-0.152-0.123-0.311-0.239-0.473-0.35 c-3.999-2.911-6.614-7.615-6.614-12.93v-23.334c0-5.314,2.615-10.018,6.614-12.93c0.162-0.112,0.321-0.228,0.473-0.35 c2.549-1.716,5.615-2.72,8.912-2.72h12.495c2.172,8.871,3.333,18.135,3.333,27.667s-1.161,18.796-3.333,27.667h-12.495 C309.286,272,306.219,270.996,303.671,269.28z M289.15,277.761c-13.224,30.451-43.539,50.567-77.067,50.567 c-46.315,0-83.995-37.68-83.995-83.995s37.68-83.995,83.995-83.995c33.528,0,63.843,20.116,77.067,50.567 c-5.311,5.715-8.567,13.363-8.567,21.761V256C280.583,264.398,283.839,272.046,289.15,277.761z"/>
<path d="M344.083,40.083c0-8.776-7.141-15.917-15.917-15.917s-15.916,7.141-15.916,15.917S319.39,56,328.166,56 S344.083,48.859,344.083,40.083z"/>
<path d="M280.5,24.166c-8.776,0-15.917,7.141-15.917,15.917S271.724,56,280.5,56s15.916-7.141,15.916-15.917 S289.276,24.166,280.5,24.166z"/>
<path d="M152.416,32.083h-72c-4.418,0-8,3.582-8,8s3.582,8,8,8h72c4.418,0,8-3.582,8-8S156.834,32.083,152.416,32.083z"/>
<path d="M199.75,32.083h-15.417c-4.418,0-8,3.582-8,8s3.582,8,8,8h15.417c4.418,0,8-3.582,8-8S204.168,32.083,199.75,32.083z"/>
<path d="M212.083,176.005c-37.677,0-68.329,30.652-68.329,68.328c0,4.418,3.582,8,8,8s8-3.582,8-8 c0-28.854,23.475-52.328,52.329-52.328c4.418,0,8-3.582,8-8S216.501,176.005,212.083,176.005z"/>
</g>
styles:
card: [transition: all 0.3s ease-out]
custom_fields:
icon:
[
top: 10%,
left: 10.1%,
width: 35%,
position: absolute,
fill: "[[[ return entity.state === 'on' ? '#516d82' : '#9da0a2'; ]]]",
]
template:
- base
- waschmaschine
# ################################################
# #
# BEWOHNER UNTEN RECHTS #
# #
# ################################################
- type: custom:button-card
entity: input_select.trocknerstatus
name: Trockner
show_state: true
state:
- value: "Läuft"
styles:
card: [background-color: "rgba(255, 255, 255, 0.8)"]
name: [color: "rgba(0, 0, 0, 0.6)"]
state: [color: "rgba(0, 0, 0, 0.6)"]
- value: "Finishing"
styles:
card: [background-color: "rgba(229, 154, 24, 0.8)"]
name: [color: "rgba(0, 0, 0, 0.6)"]
state: [color: "rgba(0, 0, 0, 0.6)"]
- value: "Fertig"
styles:
card: [background-color: "rgba(0, 136, 0, 0.7)"]
name: [color: "rgba(0, 0, 0, 0.6)"]
state: [color: "rgba(0, 0, 0, 0.6)"]
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.trocknerstatus
option: Idle
hold_action:
action: none
custom_fields:
icon: >
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 44.143 44.143" style="enable-background:new 0 0 44.143 44.143;" xml:space="preserve">
<g>
<g>
<path d="M40.726,0.176H3.416C1.532,0.176,0,1.708,0,3.592V40.55c0,1.885,1.532,3.416,3.416,3.416h37.311
c1.884,0,3.416-1.531,3.416-3.416V3.592C44.142,1.708,42.61,0.176,40.726,0.176z M2,3.592C2,2.81,2.635,2.175,3.416,2.175h12.018
C9.025,4.319,3.982,9.463,2,15.943V3.592z M3.416,41.967C2.635,41.967,2,41.331,2,40.549v-12.35
c1.982,6.479,7.025,11.623,13.434,13.768C15.434,41.967,3.416,41.967,3.416,41.967z M3.082,22.071
c0-10.47,8.518-18.988,18.99-18.988c10.471,0,18.988,8.519,18.988,18.988s-8.52,18.988-18.988,18.988
C11.6,41.059,3.082,32.542,3.082,22.071z M42.142,40.551c0,0.78-0.635,1.416-1.416,1.416H28.709
c6.408-2.145,11.451-7.287,13.434-13.768L42.142,40.551L42.142,40.551z M42.142,15.943C40.16,9.464,35.117,4.32,28.707,2.176
h12.019c0.781-0.001,1.416,0.634,1.416,1.416V15.943z"/>
<circle cx="17.01" cy="22.071" r="3"/>
<circle cx="27.133" cy="22.071" r="3"/>
</g>
</g>
styles:
card: [transition: all 0.3s ease-out]
custom_fields:
icon:
[
top: 10%,
left: 10.1%,
width: 35%,
position: absolute,
fill: "[[[ return entity.state === 'on' ? '#516d82' : '#9da0a2'; ]]]",
]
template:
- base
- waschmaschine
thanks,
short answer yes:
long answer yes but needs lots of work,
I added the half size cards to a vertical stack, with no additional work that’s what you get on the right.
the stacked cards on the left are with some margin added but as you can see they are not alined with the other cards,
this is a simple math issue, lets say a normal cards is 10 units by 10 units, but the grid of all 4 cards is not 20units by 20 units is 22 by 22, and the remaining space in the grid gap, when you use aspect_ratio: 2/1 you are saying the half size card is 5 units by 10 units, when you have 2 of them in the 10 by 10 space there is nothing left for the gap.
this is not impossible but will take a lot of work to get right.
The code
- type: custom:button-card
name: TV
template:
- base
- icon_tv
- loader_hold
- type: custom:button-card
entity: climate.climate_master
name: Master
double_tap_action:
!include ../popup/climate/master_climate.yaml
template:
- icon_fan2
- climate
- type: vertical-stack
cards:
- type: custom:button-card
name: Master
aspect_ratio: 2/1
entity: light.master_bedroom_lights
template:
- light
- icon_down_light
- type: custom:button-card
name: Ensuite
aspect_ratio: 2/1
entity: light.master_ensuite_lights
template:
- light
- state_select
- icon_down_light
- type: vertical-stack
style:
hui-vertical-stack-card:
$: |
hui-horizontal-stack-card {
padding: 0em 2em 2.3em 2em;
}
cards:
- type: custom:button-card
name: Master
aspect_ratio: 2/1
entity: light.master_bedroom_lights
template:
- light
- icon_down_light
- type: custom:button-card
name: Ensuite
aspect_ratio: 2/1
entity: light.master_ensuite_lights
template:
- light
- state_select
- icon_down_light
After update to browser_mod 2. popup are not working anymore. anybody have the same problem?
After update to browser_mod 2. popup are not working anymore. anybody have the same problem?
Found it.
action: fire-dom-event
browser_mod:
command: popup
title: My title
card:
type: ...etc...
to
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: My title
content:
type: ...etc...
Only 40 popup left to do…
Thank you. But I see the edges are not perfect. But this is a good first hint. Will do some research.
I have updated browser_mod and popups now appear but they are transparent and all squished up.
Here is my code if anyone can help
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: HOME MODES
style:
.: |
:host {
--mdc-theme-surface: var(--primary-background-color);
--secondary-background-color: var(--primary-background-color);
}
:host .content {
width: 90vw;
height 100vh;
}
#################################################
# #
# MODES #
# #
#################################################
content:
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-rows: auto
grid-gap: 0px 0px
justify-items: stretch
mediaquery:
"(max-width: 800px)":
grid-template-columns: 1fr 1fr 1fr
"(max-width: 1200px)":
grid-template-columns: 1fr 1fr 1fr 1fr 1fr
cards:
- type: custom:button-card
and here is how the popup appears
theme.yaml update
Thanks!
I took the browser_mod part from themes.yaml and that helped with the transparency problem but the popup still appears very small and squished not like before
Your style is not correct anymore, style is only for css variables
card_mod was added in 2.1.1, so you can do any modification you want
That did the trick.
Thanks!
Hmm, with this new card_mod 2.0 , how can i use the hide-header: true to not show the pop-up header?
Like the example:
Before the 2.0 there was a hide-header: true to use on po-ups, now, aparentally can be used just on a global scope.
remove title in data
Thank you @Mattias_Persson . This solve one of my problems. Can you gimme 1 more help?
Im trying to solve the alignment of the “Find my phone” (Achar meu telefone) now:
When im using the card-mod-helper shows this:
And my code looks like that:
- type: custom:button-card
name: Achar meu telefone
card_mod:
style:
hui-vertical-stack-card$: |
#root {
justify-content: space-evenly !important;
padding: 150px;
}
icon: mdi:volume-high
template: icon_name
tap_action:
action: call-service
service: notify.mobile_app_xiaomi_celular
service_data:
title: Encontre meu telefone
message: Estou aqui!
data:
ttl: 0
priority: high
channel: alarm_stream_max
Where im losing this?
Note: the padding 150px it was just for testing purposes.
Yes, that bug is called “user error”
service: browser_mod.popup