Faecon
June 4, 2024, 5:34pm
6566
- type: custom:mushroom-template-card
primary: Alles uit
icon: mdi:lightbulb
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Weet je het zeker ?
icon: mdi:help
card_mod:
style: |
ha-card {
pointer-events: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Ja
tap_action:
action: call-service
service: script.verlichting_allesuit
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 0px 0px 0px 40px;
}
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
}
- type: custom:mushroom-template-card
primary: Neen
tap_action:
action: call-service
service: script.verlichting_allesuit
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 0px 0px 0px 40px;
}
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
}
2 questions
how can I make my template cards smaller (width) ?
edit :
card_mod:
style: |
ha-dialog {
--mdc-dialog-min-width: 180px !important;
--mdc-dialog-max-width: 180px !important;
}
.content {
width: auto !important;
}
how can I center (vertically and horizontally) the popup card to the center of my screen ?
Start with this…
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |-
--popup-min-width: 100px;
card_mod:
style:
ha-dialog$: |
div.mdc-dialog div.mdc-dialog__scrim {
background: rgba(0, 100, 100, 0.4);
}
div.mdc-dialog__container {
--vertical-align-dialog: center !important;
}
.: |
ha-dialog {
--dialog-backdrop-filter: blur(0.8em);
}
content:
1 Like
Faecon
June 5, 2024, 5:44am
6568
LiQuid_cOOled:
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |-
--popup-min-width: 100px;
card_mod:
style:
ha-dialog$: |
div.mdc-dialog div.mdc-dialog__scrim {
background: rgba(0, 100, 100, 0.4);
}
div.mdc-dialog__container {
--vertical-align-dialog: center !important;
}
.: |
ha-dialog {
--dialog-backdrop-filter: blur(0.8em);
}
content:
gives me an error. I move the second style one space, but then content gave me bad indentation
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: |-
--popup-min-width: 100px;
card_mod:
style:
ha-dialog$: |
div.mdc-dialog div.mdc-dialog__scrim {
background: rgba(0, 100, 100, 0.4);
}
div.mdc-dialog__container {
--vertical-align-dialog: center !important;
}
.: |
ha-dialog {
--dialog-backdrop-filter: blur(0.8em);
}
content:
Does the entire card give the same error?
type: custom:mushroom-template-card
primary: Alles uit
icon: mdi:lightbulb
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: '--popup-min-width: 100px; '
card_mod:
style:
ha-dialog$: |
div.mdc-dialog div.mdc-dialog__scrim {
background: rgba(0, 100, 100, 0.4);
}
div.mdc-dialog__container {
--vertical-align-dialog: center !important;
}
.: |
ha-dialog {
--dialog-backdrop-filter: blur(0.8em);
}
content:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Weet je het zeker ?
icon: mdi:help
card_mod:
style: |
ha-card {
pointer-events: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Ja
tap_action:
action: call-service
service: script.verlichting_allesuit
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 0px 0px 0px 40px;
}
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
}
- type: custom:mushroom-template-card
primary: Neen
tap_action:
action: call-service
service: script.verlichting_allesuit
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
}
.primary {
padding: 0px 0px 0px 40px;
}
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
}
1 Like
Faecon
June 5, 2024, 5:57am
6571
On my mobile still not what i want
Hi, thanks for this but seems to not work with me. I am just using the ootb ‘icons’ that show on a location but with or without the code, the whole icon remains shown. Has something changed over time ( I am on 2024.5.3) ? Or do I need to supply different images?
EDIT: to be clear this is map CARD
Reunion974
June 5, 2024, 10:12am
6573
I have to confess, I’m not a CSS guru, but I spent an hour inspecting the code without finding the solution.
→ I’m trying to remove the border all arround the screen.
I could modify all the other spaces using:
in the theme:
#ha-view-sections-column-gap: 3px
# Grid gap customization using card-mod
grid-card-gap: 0px
#grid-view-card-margin: 0px 0px 0px
#masonry-view-card-margin: 0px 0px 0px
(commented lines are useless trials)
card_mod:
style: |
:host {
--masonry-view-card-margin: 0px;
--layout-margin: 0px 0px 0px 0px;
--layout-padding: 0px 0px 0px 0px;
--fc-daygrid-event-dot-width: 0px;
--fc-list-event-dot-width: 0px;
}
Any help will be more than welcome
Can you share the yaml of the card/view? Simplified where possible.
alexsaas
June 5, 2024, 12:11pm
6575
Hello there. May I politely ask if there is something wrong with my way of asking? Or am I asking the wrong questions, or in the wrong topic?
If so, please give me a hint. So that I can do better.
I just want to bring me back on topic
Sure
I’m trying to remove the space all arround the screen like shown in my picture above.
kiosk_mode:
user_settings:
- users:
- Tablette
kiosk: true
hide_header: true
hide_sidebar: true
hide_menu_button: true
hide_overflow: true
views:
- type: custom:grid-layout
layout:
grid-template-columns: 55% 45%
grid-template-rows: auto
grid-template-areas: |
"left right_top"
"left right_bottom"
cards:
- type: picture-elements
card_mod:
style: |
:host {
--masonry-view-card-margin: 0px;
--layout-margin: 0px 0px 0px 0px;
--layout-padding: 0px 0px 0px 0px;
--fc-daygrid-event-dot-width: 0px;
--fc-list-event-dot-width: 0px;
}
view_layout:
grid-area: left
grid-column-gap: 1px
image: >-
/local/floorplan_tab_general/base.png?version=F4ED6B0DDAC70718DAE5EF702B4CD66F
elements:
- type: conditional
conditions:
- entity: light.inter_cuisine_lumiere
state: 'on'
elements:
- type: image
tap_action:
action: none
hold_action:
action: none
entity:
- light.inter_cuisine_lumiere
image: >-
/local/floorplan_tab_general/light.inter_cuisine_lumiere.png?version=7CCC77B704BCD0222A788DAA5639650C
filter: none
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
- type: horizontal-stack
cards:
- type: custom:button-card
view_layout:
grid-area: right_top
name: Eclairage
entity: input_boolean.affichage_tablette_eclairage
icon: mdi:lightbulb
color: rgb(28, 128, 199)
show_state: false
tap_action:
action: toggle
state:
- icon: mdi:lightbulb-outline
value: 'off'
color_type: card
color: gray
styles:
card:
- width: 120px
- border-radius: 14px
- padding-top: 10px
- padding-bottom: 10px
- margin-bottom: 20px
name:
- color: gray
- align-self: middle
- padding-bottom: 10px
- padding-top: 20px
- icon: mdi:lightbulb
value: 'on'
color_type: card
color: yellow
styles:
card:
- width: 120px
- border-radius: 14px
- padding-top: 10px
- padding-bottom: 10px
- margin-bottom: 20px
name:
- font-size: 18px
- align-self: middle
- padding-top: 20px
- padding-bottom: 10px
- type: custom:button-card
name: Liens
entity: input_boolean.affichage_tablette_liens
icon: mdi:lightbulb
color: rgb(28, 128, 199)
show_state: false
tap_action:
action: toggle
state:
- icon: mdi:page-next-outline
value: 'off'
color_type: card
color: gray
styles:
card:
- width: 120px
- border-radius: 14px
- padding-top: 10px
- padding-bottom: 10px
- margin-bottom: 20px
name:
- color: gray
- align-self: middle
- padding-bottom: 10px
- padding-top: 20px
- icon: mdi:page-next
value: 'on'
color_type: card
color: yellow
styles:
card:
- width: 120px
- border-radius: 14px
- padding-top: 10px
- padding-bottom: 10px
- margin-bottom: 20px
name:
- font-size: 18px
- align-self: middle
- padding-top: 20px
- padding-bottom: 10px
- type: custom:button-card
name: Brasseurs
entity: input_boolean.affichage_tablette_brasseurs
icon: mdi:fan
color: rgb(28, 128, 199)
show_state: false
tap_action:
action: toggle
state:
- icon: mdi:fan
value: 'off'
color_type: card
color: gray
styles:
card:
- width: 120px
- border-radius: 14px
- padding-top: 10px
- padding-bottom: 10px
- margin-bottom: 20px
name:
- color: gray
- align-self: middle
- padding-bottom: 10px
- padding-top: 20px
- icon: mdi:fan
value: 'on'
color_type: card
color: yellow
styles:
card:
- width: 120px
- border-radius: 14px
- padding-top: 10px
- padding-bottom: 10px
- margin-bottom: 20px
name:
- font-size: 18px
- align-self: middle
- padding-top: 20px
- padding-bottom: 10px
- type: picture-elements
view_layout:
grid-area: right_bottom
image: >-
/local/floorplan_mezzanine2/base.png?version=892A4B8A41043903E4E1ABB298DADF
elements:
- type: conditional
conditions:
- entity: light.fan_mezzanine2
state: 'on'
elements:
- type: image
tap_action:
action: none
hold_action:
action: none
entity:
- light.fan_mezzanine2
image: >-
/local/floorplan_mezzanine2/light.fan_mezzanine2.png?version=FA68F0122F3ED0BE82DD17A0297E22A2
filter: none
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
theme: Mushroom Square
alexsaas
June 5, 2024, 2:44pm
6577
Hey @Chaoscontrol
Thank you in advance.
2 Likes
Can someone help me figure out how to remove the weird min-height used in the new sections on a card level?
I was using some negative margins before on the ha-card, but they are now overruled with this --row-height. It’s driving me nuts all that blank space.
@alexsaas Sure, here you go.
type: custom:mushroom-template-card
primary: Living room
secondary: '{{ states(''sensor.wiser_lts_temperature_living_room'', with_unit=True) }}'
icon: mdi:light-recessed
entity: light.living_room_lights
multiline_secondary: false
fill_container: false
icon_color: '{{ iif(is_state(entity, ''on''), ''orange'', '''') }}'
badge_icon: mdi:motion-sensor
badge_color: >-
{{ iif(is_state('binary_sensor.presence_sensor_living_room_presence', 'on'),
'blue', '') }}
card_mod:
style: |
mushroom-badge-icon:after {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 32px;
line-height:0;
{% if states('sensor.wiser_lts_heating_demand_living_room') | float(0) > 0 %}
background: rgb(var(--rgb-red));
content: url('https://api.iconify.design/mdi/heater.svg?color=white&width=12');
{% else %}
background: rgb(var(--rgb-grey));
content: url('https://api.iconify.design/mdi/heater-disabled.svg?color=white&width=12');
{% endif %}
width: var(--mush-badge-size, 16px);
height: var(--mush-badge-size, 16px);
border-radius: var(--mush-badge-border-radius, 50%);
}
mushroom-badge-icon:before {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: 32px;
line-height:0;
{% if is_state('binary_sensor.living_room_door_contact','on') %}
background: rgb(var(--rgb-blue));
content: url('https://api.iconify.design/mdi/door-open.svg?color=white&width=12');
{% else %}
background: rgb(var(--rgb-grey));
content: url('https://api.iconify.design/mdi/door-closed.svg?color=white&width=12');
{% endif %}
width: var(--mush-badge-size, 16px);
height: var(--mush-badge-size, 16px);
border-radius: var(--mush-badge-border-radius, 50%);
}
2 Likes
grid-template-columns: 55% 45%
grid-template-rows: auto
grid-template-areas: |
"left right_top"
"left right_bottom"
margin: 0px
Already this?
alexsaas
June 5, 2024, 4:23pm
6580
@Chaoscontrol Thank you very much. This means that with :after and :before you can add a maximum of 2 more badges in addition to the standard badge. Did I understand correctly, didn’t I?
Yes. I didn’t need to add more than 3 total badges. Maybe there’d be a way to add a 4th too.
1 Like
Waouh! @arganto you are amazing! almost full success on the first try!!
The space was 1mm big, and now it’s really reduced there is just 1 or 2 pixels on the tablet that display full screen kiosk mode:
On the computer (dark mode), the space seem even smaller as you can see:
That’s a really nice result! But maybe you have an idea of where it’s coming from?
Thank you so much
Can you zoom and show, what you exactly mean? Here is not a single pixel.
I think you’re right once again: on google chrome with HA interface, I think there is no space. Certainly not on the top. Maybe 1px on the left. This is the view:
The problem appear on fully kiosk browser that I use on my wall tablet.
And if I scroll down, the top border disapear, letting left border more visible:
sgoffman
June 6, 2024, 6:19pm
6585
How can I remove the “state” text in an Entities card to free up some space? They’re all in divs of class “state”; I would like to either replace the text with “” or force the width to 0px, but I think I’m running up against the #shadow-root …
(Note: Making the text the same color as the bg doesn’t help, because the text is still there consuming space.)
