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%;
}
2 Likes
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;
}
this will be sufficient:
.card-header {
(fixed examples here)
This is wrong, mixed code for Entities card & CTC. (unrelated to card-mod)
I think it was the other guy who suggested CTC to get the card title the way I wanted. If there is a way to code this chances are I wonāt stumble across it for a while. Coding a card within card as I think you mentioned is going to be way over my head.
in stead of simply saying the fellow member is wrong, or posting unrelated stuff, we could also just help him outā¦
@Briandr73 , try this please:
- type: custom:config-template-card
entities:
- sensor.ups_modelname_2 # this is the entity that c-t-c card needs to track changes
variables:
ups: states['sensor.ups_modelname_2'].state # this set the state of that entity to a var
card:
type: entities
title: ${"CyberPower " + ups + " - LR "} # this uses the var set in tha variables section
entities:
- abc
- def
this specific section might not be related to card-mod, but the rest of his card was.
Helping someone is easy.
Already was done in another place, thanks a LOT )) 
.
Guys,
I appreciate the help and if some of this goes over my head my apologies. I donāt know all of this in and out like alot of guys who could do it in their sleep.
You were already provided the working code in another thread. (and also I suggested there not to use CTC and provided another example w/o CTC)
And here I explained you that using card-mod should be done on Entities level, not on CTC level (same as w/o using CTC).
Your code should be like (if you decide to use CTC)
type: custom:config-template-card
variables:
...
entities:
...
card:
type: entities
title: ${...}
entities:
- ...
card_mod:
style: |
.card-header {
font-size: 20px;
}Anyone else getting this error after the new update to HA?:
This used to work:
card_mod:
style:
hui-generic-entity-row:
$: |
.text-content:not(.info) {
color:
{% if states(config.entity,'Good') %}
automatic
{% eif states(config.entity,'Moderate') %}
yellow
{% elif states(config.entity,'Poor') %}
orange
{% elif states(config.entity,'Very Poor') %}
red
{% elif states(config.entity,'Severe') %}
purple
{% elif states(config.entity,'Hazardous') %}
red
{% endif %}
;
}