Hi all, spent 30 mins getting to where I’m at and 4 hours not being able to work out how to set the right most card (3rd in the horizontal stack - entities) to minimise/explicitly set the width of the innercard. I’ve tried card_mod and layout_card with neither being successful. Any guidance would be very appreciated.
type: custom:mod-card
style: |
ha-card {
border: 2px solid grey;
height: 186px !important;
}
hui-horizontal-stack-card:
$: |
#root > button-card {
margin: 0;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
styles:
card:
- height: 180px
- width: 190px
- border-radius: 20px
- font-size: 25px
- padding-bottom: 30px
- padding-top: 0px
- padding-right: 0px
entity: input_boolean.theatre_room_target_temperature
name: Theatre Room
icon: mdi:theater
show_icon: true
tap_action:
action: toggle
- type: vertical-stack
cards:
- type: custom:numberbox-card
border: true
entity: input_number.theatre_room_min_target_temperature
name: false
card_mod:
style: >
ha-card {
height: 85px !important;
padding-top: 15px !important;
} ha-card .cur-num { font-size: 20px;
color: red
} ha-card .cur-num { font-size: 25px; }
.body{display:block!important}
.body::after{text-align:center;font-size:15px;content:"Min
Temp";display:block!important}
- type: custom:numberbox-card
border: true
entity: input_number.theatre_room_max_target_temperature
name: false
card_mod:
style: >
ha-card {
height: 85px !important;
padding-top: 15px !important;
} ha-card .cur-num {
font-size: 20px;
color: blue
} ha-card .cur-num {
font-size: 25px;
} .body{display:block!important}
.body::after{text-align:center;font-size:15px;content:"Max
Temp";display:block!important}
- entities:
- entity: sensor.theatre_room_temperature
direction: up
height: 60px
width: 20px
min: 0
max: 40
stack: horizontal
type: custom:bar-card
positions:
name: 'off'
icon: 'off'
value: inside
card_mod:
style: >
ha-card .value-direction-up {
font-size: 14px;
color: white;
writing-mode: vertical-rl;
text-orentation: upright;
margin-bottom: 70px
} ha-card .cur-num {
font-size: 25px;
} .body{display:block!important}
.body::after{text-align:center;font-size:15px;content:"Max
Temp";display:block!important}
Layout card allows you to define the column widths when using the grid layout
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
grid-template-columns: 1fr 1fr 1fr will also accept percentages.
grid-template-columns: 30% 30% 40%
You most likely do not need to use the card-mod card
I swapped some card types. I don’t have custom:numberbox-card
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:button-card
styles:
card:
- height: 100%
- border-radius: 20px
- font-size: 15px
- padding-bottom: 30px
- padding-top: 0px
- padding-right: 0px
entity: input_boolean.test
name: Theatre Room
icon: mdi:theater
show_icon: true
tap_action:
action: toggle
- type: vertical-stack
cards:
- type: custom:button-card
border: true
entity: input_number.test3
- type: custom:button-card
border: true
entity: input_number.test3
name: false
- entities:
- entity: sensor.basement_sensor
direction: up
height: 60px
width: 20px
min: 0
max: 40
stack: horizontal
type: custom:bar-card
positions:
name: 'off'
icon: 'off'
value: inside
Thanks; the reason I’m using card-mod was to do the border as there will be other “groups” on the page so I use this to differentiate between them. I have tried with the grid but cannot get it to work (perhaps it’s a conflict with card-mod)?
On another note - I see that there’s percentages and this is probably another thing I’m confused about/run into issues. I’m looking to set a static pixel width rather than a percentage width. Do you know if this is possible?
Adding the card-mod card does not conflict
type: custom:mod-card
card_mod:
style: |
ha-card {
border: 2px solid grey;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- type: custom:button-card
styles:
card:
- height: 100%
- border-radius: 20px
- font-size: 15px
- padding-bottom: 30px
- padding-top: 0px
- padding-right: 0px
entity: input_boolean.test
name: Theatre Room
icon: mdi:theater
show_icon: true
tap_action:
action: toggle
- type: vertical-stack
cards:
- type: custom:button-card
border: true
entity: input_number.test3
- type: custom:button-card
border: true
entity: input_number.test3
name: false
- entities:
- entity: sensor.basement_sensor
direction: up
height: 60px
width: 20px
min: 0
max: 40
stack: horizontal
type: custom:bar-card
positions:
name: 'off'
icon: 'off'
value: inside
Oh excellent thanks so much I’m almost there! I think I had the grid placed in the wrong area
The last thing is removing the padding (top/bottom/left/right) that seemingly the right most temperature has. I looked in element inspector and can’t for the life of me see any references to override.
type: custom:mod-card
card_mod:
style: |
ha-card {
border: 2px solid grey;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 200px auto 30px
margin: 0px 0px 0px 0px
cards:
- type: custom:button-card
styles:
card:
- height: 100%
- border-radius: 20px
- font-size: 25px
- padding-bottom: 30px
- padding-top: 0px
- padding-right: 0px
entity: input_boolean.theatre_room_target_temperature
name: Theatre Room
icon: mdi:theater
show_icon: true
tap_action:
action: toggle
- type: vertical-stack
cards:
- type: custom:numberbox-card
border: true
entity: input_number.theatre_room_min_target_temperature
name: false
card_mod:
style: >
ha-card {
height: 85px !important;
padding-top: 15px !important;
} ha-card .cur-num { font-size: 20px;
color: red
} ha-card .cur-num { font-size: 25px; }
.body{display:block!important}
.body::after{text-align:center;font-size:15px;content:"Min
Temp";display:block!important}
- type: custom:numberbox-card
border: true
entity: input_number.theatre_room_max_target_temperature
name: false
card_mod:
style: >
ha-card {
height: 85px !important;
padding-top: 15px !important;
} ha-card .cur-num {
font-size: 20px;
color: blue
} ha-card .cur-num {
font-size: 25px;
} .body{display:block!important}
.body::after{text-align:center;font-size:15px;content:"Max
Temp";display:block!important}
- entities:
- entity: sensor.theatre_room_temperature
direction: up
height: 90px
width: 20px
min: 0
max: 40
stack: horizontal
type: custom:bar-card
positions:
name: 'off'
icon: 'off'
value: inside
card_mod:
style: |
ha-card .value-direction-up {
font-size: 14px;
color: white;
writing-mode: vertical-rl;
text-orentation: upright;
margin-bottom: 70px
} ha-card .cur-num {
font-size: 25px;
}
card_mod:
style: |
.card-content {
margin-left: -16px;
}
.value-direction-up {
font-size: 14px;
color: white;
writing-mode: vertical-rl;
text-orentation: upright;
margin-bottom: 70px;
}
.cur-num {
font-size: 25px;
}
Adjusted it a bit, but it should get you going in the right direction.
1 Like
Brilliant, thank you so much really appreciate it have been going crazy trying to get it all to work together.
Happy to assist!
As a quick note for future use. If you have ha-card as a pre-fix, you can generally remove it. You can always test it removing it with little to no harm.
ha-card .cur-num { font-size: 25px; } will work as .cur-num { font-size: 25px;}
1 Like
