You should probably enable panel mode instead of using card-mod.
Panel mode is enabled:
- icon: 'mdi:currency-eur'
panel: true
badges: []
cards:
- type: 'custom:config-template-card'
entities:
- sensor.metabaseuri
card:
type: iframe
style: |
#root {
height: calc(100vh - 48.5px);
padding-top: 0 !important;
}
url: '${states[''sensor.metabaseuri''].state}'
Hello,
I have this simple card:
Itās possible:
- change the color of the state?
- blink the state?
thks
Blinking is a more advanced part. Try taking the w3schools CSS course (look for keyframes), and combine it with this. I would rather teach you how to use card-mod than tell you how to use card-mod. Hereās a simple implementation of changing the color:
type: entities
entities:
- entity: sensor.time
style: |
.text-content {
color: red;
}
Thanks KTibow,
This way, it does what I want
type: entities
entities:
- entity: sensor.esc_janela
style: |
.text-content {
color: var(--my-font01-color);
animation: var(--my-animation);
}
@keyframes blink {
50% {
background: white;
opacity: 0.0;
}
style: |
ha-card {
--my-font01-color: {% if states('sensor.esc_janela') == 'Aberta' %} red {% else %} black {% endif %};
--my-animation: {% if states('sensor.esc_janela') == 'Aberta' %} blink 2s ease infinite {% endif %};
}
The latest update of āconfig-template-cardā allows to use the card as a single row in āEntities cardā.
But I cannot apply styles to the row.
Please check this card:
type: entities
entities:
- type: 'custom:config-template-card'
entities:
- sun.sun
row:
entity: sun.sun
style: |
:host .text-content {
color: red;
}
- entity: sun.sun
style: |
:host .text-content {
color: red;
}
The card:
In both cases I am expecting values of red color.
But it does not work with config-template-card.
Any ideas?
Update:
May be the 2nd problem is about the same.
There is a decluttering card:
decluttering_templates:
decl_test_entity_row:
card:
type: 'custom:multiple-entity-row'
entity: '[[SENSOR]]'
style: |
:host {
color: red;
}
It is used here:
type: entities
entities:
- type: 'custom:multiple-entity-row'
entity: sun.sun
style: |
:host {
color: red;
}
- type: 'custom:decluttering-card'
template: decl_test_entity_row
variables:
- SENSOR: sun.sun
And what we see:
I wonder why the 2nd row is not red?
Hey. Im trying to modify a div inside a shadow-root but itās not grabbing what Im saying. I might be doing it wrong.
Here is my style:
style:
top: 5%
left: 10%
width: 20%
min-width: 350px
height: 90%
transform: 'translate(0, 0)'
.: |
ha-card{
height: 100%
}
ha-card > div {
height: 100%
}
ha-card > div > hui-vertical-stack-card:
$:
div{
height:100%;
}
and here is a print of the element Im trying to modify. I also need to change the divs that are above but they work as intended
That isnāt valid CSS. Youāre mixing YAML and CSS. Is there a place that you got this code from?
Itās a picture elements card - for which card-mod does not work, apparently.
Probably because it already has the āstyleā key.
Iām pretty familliar with css as well as controling them with JS. Existing of style property shoildnāt be any obstacle.
Is there a document over here which explain how card-mod work and why it is so complex task to style HA pages? Why there are cards which cannot be styled by card-mod while those are obviously stylable (as anyone can confirm using browser devtool).
Because of shadow roots and HA limitations. Try yourself to use the browser console to style a card.
Iām using the Card-mod code below to select which elements are āblurredā using the addon popup-backdrop-filter.
Example:
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
background: rgba(0,0,0,0.0);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 1em;
}
It does a great job with popups. However, I canāt figure out how to also blur the background when the card editor is open (see below screenshot). Could someone please assist me to also blur the card editorās background? I havenāt been successful in finding the right element(s) to add to the code above.
This is what the card editor looks like currently:
Thanks in advance for your time.
Mind asking over here instead?
This might be not possible yet, so I would encourage you to raise an issue over at card-mod, and possibly mention thomasloven (from what I can see theyāve unwatched the repo).
Thanks for pointing me in the right direction to get help.
Is there a way to use card-mod in the following to reduce the font size for the name in last 4 buttons?
type: 'custom:vertical-stack-in-card'
cards:
- type: thermostat
entity: climate.living_room
style: |
ha-card {
color: white;
box-shadow: none;
background:
{% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
#EB6D00
{% endif %} ;
background:
{% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
blue
{% endif %} ;
background:
{% if is_state_attr('climate.living_room', 'hvac_action', 'off') %}
#373F48
{% endif %} ;
}
theme: iOS Dark Mode
- type: entities
entities:
- entity: sensor.living_room_humidity
name: Inside Humidity
icon: 'hass:none'
- entity: sensor.openweathermap_temperature
name: Outside Temp.
icon: 'hass:none'
style: |
ha-card {
color: white;
box-shadow: none;
background:
{% if is_state_attr('climate.living_room', 'hvac_action', 'heating') %}
#EB6D00
{% endif %} ;
background:
{% if is_state_attr('climate.living_room', 'hvac_action', 'cooling') %}
blue
{% endif %} ;
background:
{% if is_state_attr('climate.living_room', 'hvac_action', 'off') %}
#373F48
{% endif %} ;
}
- type: horizontal-stack
cards:
- type: 'custom:button-card'
entity: input_select.hvac_mode
name: MODE
show_name: true
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.hvac_mode
color_type: icon
state:
- operator: template
value: |
[[[ return states['climate.living_room'].state === 'off' ]]]
icon: 'mdi:power'
color: white
- operator: template
value: |
[[[ return states['climate.living_room'].state === 'heat' ]]]
icon: 'mdi:fire'
color: 'rgb(239, 140, 0)'
- operator: template
value: |
[[[ return states['climate.living_room'].state === 'cool' ]]]
color: blue
icon: 'mdi:snowflake'
styles:
card:
- background-color: |
[[[
if (states['climate.living_room'].attributes.hvac_action == 'heating')
return '#EB6D00';
if (states['climate.living_room'].attributes.hvac_action == 'cooling')
return 'blue';
else return '#373F48';
]]]
- color: white
show_state: false
- type: 'custom:button-card'
entity: input_select.preset_mode
name: ECO
label: ECO
tap_action:
action: call-service
service: input_select.select_next
service_data:
entity_id: input_select.preset_mode
color_type: icon
color: white
icon: 'mdi:leaf-off'
state:
- operator: template
value: >
[[[ return states['climate.living_room'].attributes.preset_mode ==
'eco' ]]]
icon: 'mdi:leaf'
color: green
show_state: false
show_name: true
styles:
card:
- background-color: |
[[[
if (states['climate.living_room'].attributes.hvac_action == 'heating')
return '#EB6D00';
if (states['climate.living_room'].attributes.hvac_action == 'cooling')
return 'blue';
else return '#373F48';
]]]
- color: white
- type: 'custom:button-card'
entity: climate.living_room
name: SCHEDULE
action: url
navigation_path: 'https://home.nest.com'
color_type: card
icon: 'mdi:calendar-clock'
show_state: false
show_name: true
styles:
card:
- background-color: |
[[[
if (states['climate.living_room'].attributes.hvac_action == 'heating')
return '#EB6D00';
if (states['climate.living_room'].attributes.hvac_action == 'cooling')
return 'blue';
else return '#373F48';
]]]
- color: white
- type: 'custom:button-card'
entity: climate.living_room
name: HISTORY
action: url
navigation_path: 'https://home.nest.com'
color_type: card
icon: 'mdi:progress-clock'
show_state: false
show_name: true
styles:
card:
- background-color: |
[[[
if (states['climate.living_room'].attributes.hvac_action == 'heating')
return '#EB6D00';
if (states['climate.living_room'].attributes.hvac_action == 'cooling')
return 'blue';
else return '#373F48';
]]]
- color: white
You should ask over at button-card, they have built-in styling. Or just read the docs of it over at GitHub.
Thanks. First time trying to use card-mod. Iāve read the docs and I guess Iām missing something. Does card-mod (or mod-card) need to be specified as a card type above the card(s) you want to inject styling into? I tried adding styling but nothing happened so I presume thatās what needs to be done now that I think more about it. Iāll have another go at itā¦
I did not know there was a Github Community Support forum. Now I do! Posted a new topicā¦
I figured it out, finally!
- type: 'custom:button-card'
style: |
ha-card {
font-size: 0.8rem
}
Well, I thought I had.
The ha-card entry is being overridden by a constructed stylesheet called ha-card.button-card-main {
.
UPDATE: added !important to the font entry and that fixed it.
Grid Card - is there any way to reduce the space between cards in new grid card?