Please help, cannot hide the map zoom controls, just can control the card height
card_mod:
class: middle-right
style: |
ha-card {
height: 380px !important;
}
ha-map$: |
.leaflet-control-attribution {
display:none !important;
}
.leaflet-control-zoom {
display:none !important;
}
ha-icon-button$: |
mwc-icon-button{display:none !important}
Try thisā¦
card_mod:
style:
ha-map$: |
.leaflet-control-attribution {
display:none !important;
}
.leaflet-control-zoom {
display:none !important;
}
ha-icon-button$: |
mwc-icon-button{display:none !important}
.: |
ha-card {
height: 380px !important;
}
You may be able to get away with
card_mod:
style:
ha-map$: |
.leaflet-control-zoom {
display:none !important;
}
ha-icon-button$: |
mwc-icon-button{display:none !important}
.: |
ha-card {
height: 380px !important;
}
ā¦And welcome to the forum. 
312 / 5 000
Hello, I would like to ask for help. (Maybe Iām writing in the wrong place.) There is a custom: button-card configuration, in which I use ālockā mode. Until now it worked on PC and mobile view. Recently, it still works in PC view, but in mobile view, the ālockā does not appear and it does not work. What could be the problem?
square: false
type: grid
cards:
- type: custom:button-card
entity: binary_sensor.door_sensor_gate_opener_nagy_contact
lock:
enabled: '[[[ return entity.state === "off"; ]]]'
duration: 10
name: Kapu nagy
show_state: false
show_label: true
styles:
lock:
- justify-content: flex-end
- align-items: null
- color: red
card:
- width: null
- height: 100px
- border: solid 1.5px rgba(129,216,208)
- transform: scale(1)
state:
- value: 'on'
label: nyitva
color: red
icon: mdi:gate-arrow-left
- value: 'off'
label: zƔrva
color: grey
icon: mdi:gate
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.gate_opener_nagy_trigger
- type: custom:button-card
entity: switch.kiskapu_switch_0
icon: mdi:door
color: auto
color_type: card
lock:
enabled: true
name: Kiskapu
show_label: true
styles:
lock:
- justify-content: flex-end
- align-items: null
- color: red
card:
- width: null
- height: 100px
- border: solid 1.5px rgba(129,216,208)
- transform: scale(1)
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.kiskapu_switch_0
- type: custom:button-card
entity: binary_sensor.door_sensor_gate_opener_kicsi_contact
lock:
enabled: '[[[ return entity.state === "off"; ]]]'
duration: 10
name: Kapu kicsi
show_state: false
show_label: true
styles:
lock:
- justify-content: flex-end
- align-items: null
- color: red
card:
- width: null
- height: 100px
- border: solid 1.5px rgba(129,216,208)
- transform: scale(1)
state:
- value: 'on'
label: nyitva
color: red
icon: mdi:gate-arrow-right
- value: 'off'
label: zƔrva
color: grey
icon: mdi:gate
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.gate_opener_kicsi_trigger
PC view:
mobil view long time ago:
mobil view now:
Thanks for the suggestion and sorry for asking in the wrong place.
Can ālockā mode be implemented with card mode?
No worries, just a tip for future reference. I need to look into your lock question.
What is your phone platform?
Platform: Apple iOS
thereās no need for that, as its a native functionality on the button-card.
see what Liquid says here:
I worded it incorrectly.
Can the ālockā mode be implemented with card mode on a mushroom card?
Ok, no problem.
I cant help you with the mushroom I am afraid (there are quite a few dedicated threads about that though), but I did something like this on a core tile card:
its a bit complex though as it also uses the decluttering card (I have a few of these), mod-card, config-template-card and restriction card for the popupsā¦
card:
type: custom:config-template-card
entities:
- '[[entity]]'
variables:
id: states[ '[[entity]]' ].attributes.friendly_name
card:
type: custom:mod-card
card_mod:
style:
.: |
ha-card {
--restriction-lock-icon-size: 14px;
--restriction-regular-lock-color: var(--background-color-on);
--restriction-success-lock-color: var(--ok-color);
--restriction-lock-opacity: 0.8;
}
restriction-card$: |
ha-icon {
display: flex;
position: absolute;
top: 8px;
left: 40px;
background: red;
border-radius: 50%;
}
card:
type: custom:restriction-card
restrictions:
confirm:
text: ${'Wil je ' + id + ' schakelen?'}
card:
type: '[[type]]'
entity: '[[entity]]'
name: '[[name]]'
tap_action:
action: toggle
and the card in the dashboard then uses:
- type: custom:decluttering-card
template: badge_mod
variables:
- type: tile
- entity: switch.espresso_keuken
- name: Espresso
add some padding if you want then icon to not touch the background border
card_mod:
style:
.: |
ha-card {
--restriction-lock-icon-size: 13px;
--restriction-regular-lock-color: var(--background-color-on);
--restriction-success-lock-color: var(--ok-color);
--restriction-lock-opacity: 0.8;
}
restriction-card$: |
ha-icon {
display: flex;
position: absolute;
padding: 2px;
top: 8px;
left: 40px;
background: var(--alert-color);
border-radius: 50%;
}
Does anyone know how to make card mod load faster? Now this is NOT a big deal and Iām being super picky. But when my HA card loads the card mod adjustments load about 10ms after that.
So another words, itās not a big deal at all, but I can technically see it happening. So if I adjust the margin or padding, for example it almost looks like a really quick animation when the card loads.
I was just wondering if there was a way for it to load at the exact same time as the HA card or this is just a super minor limitation
Hi,
Was asked to bring this topic over here. Having trouble adjusting the font size of the title in this config-template-card.
type: custom:config-template-card
variables:
STATE: states['sensor.ups_modelname_2'].state
entities:
- sensor.ups_modelname_2
card:
style:
.header:
font-size: 20px;
type: entities
title: ${"CyberPower " + STATE + " - LR "}
entities:
- entity: sensor.ups_serialno_2
name: Serial Number
- entity: sensor.ups_status_2
name: Status
- entity: sensor.ups_load_2
name: Load
- entity: sensor.ups_timeleft_2
name: Time Left
- entity: sensor.ups_nominv_2
name: Nominal Input Voltage
- entity: sensor.ups_nompower_2
name: Nominal Output Power
Produces this:
**
**
Changing font size to 10px does not do anything. Tried moving the styling code to top. Does not work. Help would be appreciated.
This is a wrong syntax.
Check 1st post ā link at the bottom as it was suggested.
And get rid of config-template-card in this example, it is about styling the Entities card.
Either I read something incorrectly or someone told me I need to use a template-card. This is will be a struggle ā you can probably can I guess I donāt know yaml well. if before going to back to your suggestion which I thought I looked at right as soon as I change the card to entities the rest of the yaml code goes haywire. So to start I want to be following this example?
I can help you with the syntax for card_mod.
card_mod:
style: |
honestly read through his guide thereās alot to take in but well worth it. I reference his post all the time.
have another go and we can take it from there.
CTC is a card on a higher level than the inner Entities card.
If you need to style Entities card - no need to know anything about CTC.
type: ctc
....
card:
type: entities
card_mod:
style: .......
entities:
- sun.sun
Yes, the right link.
(besides, I already suggested you NOT to use CTC in other thread)
Hello! Would anyone be able to help me with the code to style the color of the speaker icon in Mini Media Player?
It has a different color when the card is expandedā¦
ā¦and when itās collapsed
It seems the clue should be in here, but I cannot get the syntax right.
I am trying the entity card as was suggested, but the one thing that doesnāt work is the title now. I can control the font size of the title. I am just hoping adjusting the title via variable will work.
type: entities
variables:
STATE: states['sensor.ups_modelname_2'].state
title: ${"CyberPower " + STATE + " - LR "}
entities:
- entity: sensor.ups_serialno_2
name: Serial Number
card_mod:
style: |
ha-card .card-header {
font-size: 20px;
}